/*
 * tokens.css — Design Tokens (Cascade Layer: tokens)
 * OKLCH color system, variable font stacks, spacing, layout tokens
 * Uses light-dark() for zero-duplication theming
 */

@layer tokens {

/* ===== VARIABLE FONT DECLARATIONS ===== */

@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('../fonts/BricolageGrotesque-Variable.woff2') format('woff2');
  font-weight: 200 800;
  font-stretch: 75% 100%;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-Italic-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Geist Mono';
  src: url('../fonts/GeistMono-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}

/* ===== COLOR SYSTEM (OKLCH) ===== */

:root {
  color-scheme: light dark;

  /* Brand hue — single source, everything derives from this */
  --hue: 250;
  --accent-hue: 160;

  /* Surfaces */
  --color-bg:          light-dark(oklch(0.98 0.005 80), oklch(0.13 0.01 250));
  --color-bg-elevated: light-dark(oklch(1.00 0 0),      oklch(0.17 0.01 250));
  --color-surface:     light-dark(oklch(0.95 0.008 80),  oklch(0.20 0.012 250));

  /* Text */
  --color-text:        light-dark(oklch(0.15 0.01 250),  oklch(0.91 0.01 80));
  --color-text-secondary: light-dark(oklch(0.45 0.01 250), oklch(0.65 0.01 80));
  --color-text-tertiary:  light-dark(oklch(0.62 0.008 250), oklch(0.58 0.008 80));

  /* Borders */
  --color-border:       light-dark(oklch(0.88 0.01 80),  oklch(0.28 0.015 250));
  --color-border-subtle: light-dark(oklch(0.92 0.005 80), oklch(0.23 0.01 250));

  /* Accent — decorative/brand color */
  --color-accent:      light-dark(oklch(0.50 0.18 var(--accent-hue)), oklch(0.70 0.15 var(--accent-hue)));
  --color-accent-hover: light-dark(oklch(0.42 0.18 var(--accent-hue)), oklch(0.78 0.12 var(--accent-hue)));
  --color-accent-subtle: light-dark(oklch(0.95 0.04 var(--accent-hue)), oklch(0.20 0.04 var(--accent-hue)));

  /* Links — distinct from accent, clearly interactive */
  --link-hue: 250;
  --color-link:       light-dark(oklch(0.47 0.14 var(--link-hue)), oklch(0.72 0.11 var(--link-hue)));
  --color-link-hover: light-dark(oklch(0.40 0.16 var(--link-hue)), oklch(0.80 0.09 var(--link-hue)));

  /* Section color system — set --section-hue on a container,
     then use these derived tokens for consistent per-section theming */
  --section-accent:        light-dark(oklch(0.50 0.12 var(--section-hue, var(--accent-hue))), oklch(0.72 0.10 var(--section-hue, var(--accent-hue))));
  --section-accent-hover:  light-dark(oklch(0.42 0.14 var(--section-hue, var(--accent-hue))), oklch(0.80 0.08 var(--section-hue, var(--accent-hue))));
  --section-accent-subtle: light-dark(oklch(0.95 0.04 var(--section-hue, var(--accent-hue))), oklch(0.20 0.04 var(--section-hue, var(--accent-hue))));
  --section-accent-border: light-dark(oklch(0.80 0.06 var(--section-hue, var(--accent-hue))), oklch(0.35 0.06 var(--section-hue, var(--accent-hue))));

  /* Semantic */
  --color-highlight:   light-dark(oklch(0.60 0.20 30), oklch(0.75 0.16 30));

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

  --font-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:    'Geist Mono', ui-monospace, 'Cascadia Code', monospace;

  /* Fluid type scale — clamp(min, preferred, max) */
  --text-xs:    clamp(0.6875rem, 0.65rem + 0.15vw, 0.75rem);
  --text-sm:    clamp(0.8125rem, 0.775rem + 0.15vw, 0.875rem);
  --text-base:  clamp(1rem, 0.95rem + 0.2vw, 1.0625rem);
  --text-lg:    clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem);
  --text-xl:    clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --text-2xl:   clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  --text-3xl:   clamp(2rem, 1.5rem + 2vw, 2.75rem);
  --text-4xl:   clamp(2.5rem, 1.8rem + 3vw, 3.75rem);
  --text-5xl:   clamp(3rem, 2rem + 4vw, 5rem);

  /* Weights — inversely proportional to size */
  --weight-display: 300;
  --weight-heading: 400;
  --weight-body: 400;
  --weight-label: 600;
  --weight-bold: 700;

  /* Line heights */
  --leading-tight:   1.1;
  --leading-snug:    1.25;
  --leading-normal:  1.6;
  --leading-relaxed: 1.75;

  /* Measure (max line width) */
  --measure: 65ch;

  /* ===== SPACING (8px grid) ===== */

  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --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;

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

  --content-width: 65ch;
  --wide-width: 85ch;
  --full-width: 1400px;
  --gutter: clamp(1rem, 3vw, 2rem);

  /* ===== TRANSITIONS ===== */

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --transition-fast: 150ms var(--ease-out);
  --transition-base: 300ms var(--ease-out);
  --transition-slow: 500ms var(--ease-in-out);

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

  --z-base: 0;
  --z-sticky: 100;
  --z-overlay: 200;
  --z-modal: 300;
}

/* ===== MANUAL THEME OVERRIDES ===== */

[data-theme="dark"]  { color-scheme: dark; }
[data-theme="light"] { color-scheme: light; }

} /* end @layer tokens */