/**
 * Clics Modernos
 * Design Tokens
 */

:root {
  /*  =========================================================
     COLORS
    ========================================================= */

  --color-background: oklch(0.985 0.0035 85);
  --color-foreground: oklch(0.185 0.004 285);

  --color-primary: oklch(0.225 0.004 285);
  --color-primary-foreground: oklch(0.985 0.0035 85);

  --color-secondary: oklch(0.945 0.006 82);
  --color-secondary-foreground: oklch(0.225 0.004 285);

  --color-accent: oklch(0.686 0.153 45);
  --color-accent-foreground: oklch(0.99 0.004 85);

  --color-accent-soft: oklch(0.945 0.032 55);
  --color-accent-strong: oklch(0.6 0.155 42);

  --color-muted: oklch(0.945 0.006 82);
  --color-muted-foreground: oklch(0.53 0.008 70);

  --color-surface: oklch(0.958 0.005 85);
  --color-surface-strong: oklch(0.93 0.007 80);

  --color-card: oklch(0.958 0.005 85);
  --color-card-foreground: oklch(0.185 0.004 285);

  --color-popover: oklch(0.99 0.003 85);
  --color-popover-foreground: oklch(0.185 0.004 285);

  --color-destructive: oklch(0.577 0.245 27.325);
  --color-destructive-foreground: oklch(0.985 0.0035 85);

  --color-border: oklch(0.912 0.005 80);
  --color-input: oklch(0.912 0.005 80);
  --color-ring: oklch(0.686 0.153 45);

  --color-celeste: #38bdf8;
  --color-celeste: oklch(0.72 0.145 228);
  --color-celeste-hover: #0ea5e9;
  --color-celeste-hover: oklch(0.66 0.155 228);
  --color-celeste-foreground: #ffffff;


  /*  =========================================================
     TYPOGRAPHY
    ========================================================= */

  --font-display: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, sans-serif;


  /*  =========================================================
     LAYOUT
    ========================================================= */

  --container-width: 1600px;
  --container-padding: 1.25rem;

  --section-spacing-xs: 2.5rem;
  --section-spacing-sm: 4rem;
  --section-spacing-md: 6rem;
  --section-spacing-lg: 8rem;


  /*  =========================================================
     SPACING
    ========================================================= */

  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;


  /*   =========================================================
     BORDER RADIUS
     ========================================================= */

  --radius-sm: 0.5rem;
  --radius-md: 1rem;
  --radius-lg: 1.5rem;
  --radius-xl: 1.75rem;
  --radius-2xl: 2rem;
  --radius-full: 9999px;
  --radius: 1.5rem;


  /*  =========================================================
     BORDERS
    ========================================================= */

  --border-width: 1px;


  /*  =========================================================
     SHADOWS
    ========================================================= */

  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.04);
  --shadow-md: 0 8px 24px rgb(0 0 0 / 0.06);
  --shadow-lg: 0 16px 40px rgb(0 0 0 / 0.08);


  /*  =========================================================
     MOTION
    ========================================================= */

  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-apple: cubic-bezier(0.22, 1, 0.36, 1);

  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 400ms;

  --transition-fast:
    var(--duration-fast) var(--ease-standard);

  --transition-base:
    var(--duration-base) var(--ease-apple);

  --transition-slow:
    var(--duration-slow) var(--ease-apple);


  /*  =========================================================
    Z-INDEX
    ========================================================= */

  --z-base: 0;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-overlay: 300;
  --z-modal: 400;
  --z-toast: 500;
}


/* ===========================================================
   DARK MODE
   =========================================================== */

.dark {
  --color-background: oklch(0.129 0.042 264.695);
  --color-foreground: oklch(0.984 0.003 247.858);

  --color-primary: oklch(0.929 0.013 255.508);
  --color-primary-foreground: oklch(0.208 0.042 265.755);

  --color-secondary: oklch(0.279 0.041 260.031);
  --color-secondary-foreground: oklch(0.984 0.003 247.858);

  --color-accent: oklch(0.279 0.041 260.031);
  --color-accent-foreground: oklch(0.984 0.003 247.858);

  --color-accent-soft: oklch(0.24 0.04 260);
  --color-accent-strong: oklch(0.7 0.15 45);

  --color-muted: oklch(0.279 0.041 260.031);
  --color-muted-foreground: oklch(0.704 0.04 256.788);

  --color-surface: oklch(0.208 0.042 265.755);
  --color-surface-strong: oklch(0.24 0.04 260);

  --color-card: oklch(0.208 0.042 265.755);
  --color-card-foreground: oklch(0.984 0.003 247.858);

  --color-popover: oklch(0.208 0.042 265.755);
  --color-popover-foreground: oklch(0.984 0.003 247.858);

  --color-destructive: oklch(0.704 0.191 22.216);
  --color-destructive-foreground: oklch(0.984 0.003 247.858);

  --color-border: oklch(1 0 0 / 10%);
  --color-input: oklch(1 0 0 / 15%);
  --color-ring: oklch(0.551 0.027 264.364);
}