/* ============================================================
   S·GONZÁLEZ — Design Tokens (Light Theme)
   Accent: Creative Blue #2563EB · Backgrounds: Warm whites
   ============================================================ */

@layer tokens {

  :root {
    /* --------------------------------------------------------
       Tier 1 — Literal Tokens
       -------------------------------------------------------- */

    /* Creative Blue (accent — vibrant but professional) */
    --color-blue-100: oklch(0.95 0.04 260);
    --color-blue-200: oklch(0.88 0.08 260);
    --color-blue-300: oklch(0.75 0.14 260);
    --color-blue-400: oklch(0.62 0.20 260);
    --color-blue-500: oklch(0.52 0.24 260); /* ≈ #2563EB */
    --color-blue-600: oklch(0.45 0.26 260);
    --color-blue-700: oklch(0.38 0.22 260);
    --color-blue-800: oklch(0.28 0.16 260);
    --color-blue-900: oklch(0.18 0.10 260);

    /* Neutrals (light-first for light theme) */
    --color-neutral-50:  oklch(0.99 0.002 260);  /* #FAFAFA */
    --color-neutral-100: oklch(0.97 0.002 260);  /* #F4F4F5 */
    --color-neutral-200: oklch(0.93 0.003 260);  /* #E4E4E7 */
    --color-neutral-300: oklch(0.87 0.004 260);  /* #D4D4D8 */
    --color-neutral-400: oklch(0.71 0.005 260);  /* #A1A1AA */
    --color-neutral-500: oklch(0.55 0.006 260);  /* #71717A */
    --color-neutral-600: oklch(0.45 0.006 260);  /* #52525B */
    --color-neutral-700: oklch(0.37 0.007 260);  /* #3F3F46 */
    --color-neutral-800: oklch(0.27 0.007 260);  /* #27272A */
    --color-neutral-900: oklch(0.21 0.007 260);  /* #18181B */
    --color-neutral-950: oklch(0.15 0.007 260);  /* #09090B */

    /* Pure */
    --color-white: oklch(1 0 0);
    --color-black: oklch(0 0 0);

    /* Typography Scale */
    --font-display: 'Sprat', serif;
    --font-body: 'Inter', sans-serif;

    --text-xs:   clamp(0.6875rem, 0.625rem + 0.25vw, 0.8125rem);
    --text-sm:   clamp(0.8125rem, 0.75rem + 0.25vw, 0.9375rem);
    --text-base: clamp(0.9375rem, 0.875rem + 0.25vw, 1.0625rem);
    --text-lg:   clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
    --text-xl:   clamp(1.375rem, 1.125rem + 1vw, 1.875rem);
    --text-2xl:  clamp(1.75rem, 1.25rem + 2vw, 2.75rem);
    --text-3xl:  clamp(2.25rem, 1.5rem + 3vw, 3.75rem);
    --text-hero: clamp(2.75rem, 1.5rem + 5vw, 6rem);

    /* Spacing */
    --space-2xs: clamp(0.25rem, 0.2rem + 0.2vw, 0.375rem);
    --space-xs:  clamp(0.5rem, 0.4rem + 0.4vw, 0.75rem);
    --space-sm:  clamp(0.75rem, 0.6rem + 0.6vw, 1.125rem);
    --space-md:  clamp(1rem, 0.8rem + 0.8vw, 1.5rem);
    --space-lg:  clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
    --space-xl:  clamp(2rem, 1.5rem + 2vw, 3.5rem);
    --space-2xl: clamp(3rem, 2rem + 4vw, 6rem);
    --space-3xl: clamp(4rem, 3rem + 5vw, 8rem);

    /* Radius */
    --radius-sm: 0.375rem;
    --radius-md: 0.75rem;
    --radius-lg: 1.25rem;
    --radius-xl: 2rem;
    --radius-full: 9999px;

    /* Timing */
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out-smooth: cubic-bezier(0.4, 0, 0.2, 1);
    --duration-fast: 200ms;
    --duration-normal: 400ms;
    --duration-slow: 700ms;
    --duration-glacial: 1200ms;

    /* --------------------------------------------------------
       Tier 2 — Semantic Tokens (LIGHT THEME)
       -------------------------------------------------------- */

    --color-primary: var(--color-blue-500);
    --color-primary-hover: var(--color-blue-600);
    --color-primary-glow: var(--color-blue-400);
    --color-primary-subtle: var(--color-blue-100);

    --color-surface: var(--color-neutral-50);
    --color-surface-elevated: var(--color-white);
    --color-surface-overlay: oklch(1 0 0 / 0.85);
    --color-surface-section: var(--color-neutral-100);

    --color-text-primary: var(--color-neutral-900);
    --color-text-secondary: var(--color-neutral-600);
    --color-text-muted: var(--color-neutral-400);
    --color-text-inverse: var(--color-white);

    --color-border: oklch(0.87 0.004 260 / 0.6);
    --color-border-hover: oklch(0.52 0.24 260 / 0.4);

    /* --------------------------------------------------------
       Tier 3 — UI Tokens
       -------------------------------------------------------- */

    --ui-glass-bg: oklch(1 0 0 / 0.7);
    --ui-glass-border: oklch(0.87 0.004 260 / 0.35);
    --ui-glass-blur: 20px;

    --ui-navbar-height: clamp(6rem, 5rem + 3vw, 8rem);
    --ui-section-padding: var(--space-3xl) var(--space-lg);

    --ui-shadow-sm: 0 1px 3px oklch(0 0 0 / 0.06), 0 1px 2px oklch(0 0 0 / 0.04);
    --ui-shadow-md: 0 4px 12px oklch(0 0 0 / 0.06), 0 2px 4px oklch(0 0 0 / 0.04);
    --ui-shadow-lg: 0 10px 30px oklch(0 0 0 / 0.08), 0 4px 8px oklch(0 0 0 / 0.04);
    --ui-shadow-glow: 0 0 30px oklch(0.52 0.24 260 / 0.2);

    /* Gradient color space token */
    --in-oklab: ;
    --in-oklch: ;
  }

  @supports (background: linear-gradient(in oklab, white, black)) {
    :root {
      --in-oklab: in oklab;
      --in-oklch: in oklch;
    }
  }
}