/* --------------------------------------------------------------------------
   variables.css — Design tokens
   Palette + Fibonacci spacing as the underlying design language.
   -------------------------------------------------------------------------- */

:root {
  /* Core palette — do not introduce additional colors without a strong a11y reason */
  --color-blue: #03045e; /*#2f4fa8;*/
  --color-forest: #225937;
  --color-lime: #b8fb3c; /*#90e959;*/
  --color-dark: #080d14;

  /* Semantic aliases (always reference core palette) */
  --color-background: var(--color-dark);
  --color-text: #f2f4f7; /* near-white for contrast on dark — derived for accessibility */
  --color-text-muted: color-mix(in srgb, var(--color-text) 68%, var(--color-background));
  --color-accent: var(--color-lime);
  --color-accent-alt: var(--color-blue);
  --color-surface: var(--color-forest);
  --color-border: color-mix(in srgb, var(--color-text) 18%, transparent);
  --color-light: #FAFBFD; /* light sections — blends with intro wave into Work */
  --color-light-alt: #F2F4F8;
  --color-dark-alt: #111827;

  /*
    Accessibility note:
    --color-text uses a near-white value for WCAG contrast on --color-dark.
    It is not a new brand color — it is a readability token tied to the dark surface.
  */

  /* Fibonacci spacing scale */
  --space-1: 8px;
  --space-2: 13px;
  --space-3: 21px;
  --space-4: 34px;
  --space-5: 55px;
  --space-6: 89px;

  /* Extended Fibonacci where layout needs larger rhythm */
  --space-7: 144px;
  --space-8: 233px;
  --space-9: 377px;

  /* Typography scale (Fibonacci-inspired) */
  --font-size-xs: 0.8125rem; /* ~13px */
  --font-size-sm: 0.875rem; /* 14px — usability override */
  --font-size-base: 1.0625rem; /* ~17px — readable body */
  --font-size-md: 1.3125rem; /* ~21px */
  --font-size-lg: clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem); /* → ~34px */
  --font-size-xl: clamp(2.125rem, 1.4rem + 2.5vw, 3.4375rem); /* → ~55px */
  --font-size-2xl: clamp(2.75rem, 1.5rem + 4vw, 5.5625rem); /* → ~89px */
  --font-size-3xl: clamp(3.4rem, 1.2rem + 6vw, 8.9375rem); /* → ~144px hero ceiling */

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;

  --line-height-tight: 1.1;
  --line-height-snug: 1.25;
  --line-height-base: 1.55;
  --line-height-loose: 1.7;

  --letter-spacing-tight: -0.02em;
  --letter-spacing-wide: 0.08em;

  /* Font stacks — swap in custom faces via typography.css when added to /assets/fonts/ */
  --font-sans: ui-sans-serif, system-ui, sans-serif;
  --font-display: var(--font-sans);
  --font-mono: ui-monospace, "Cascadia Code", "Consolas", monospace;

  /* Layout — golden-ratio influenced content width (~61.8% of 1440 ≈ 890) */
  --container-max: 89rem; /* 1424px — Fibonacci-adjacent */
  --container-content: 55rem; /* 880px — near φ of common desktop */
  --container-narrow: 34rem;
  --container-pad: clamp(var(--space-3), 4vw, var(--space-5));

  /* Section rhythm */
  --section-pad-y: clamp(var(--space-5), 10vw, var(--space-7));

  /* Transitions — Fibonacci-friendly durations (ms) */
  --duration-1: 130ms;
  --duration-2: 210ms;
  --duration-3: 340ms;
  --duration-4: 550ms;
  --ease-standard: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-emphasized: cubic-bezier(0.16, 1, 0.3, 1);

  /* Z-index scale */
  --z-base: 1;
  --z-header: 100;
  --z-overlay: 200;
  --z-modal: 300;

  /* Breakpoints as custom props (documented; media queries still use raw values) */
  --bp-sm: 40rem; /* 640px */
  --bp-md: 48rem; /* 768px */
  --bp-lg: 64rem; /* 1024px */
  --bp-xl: 80rem; /* 1280px */

  /* Header */
  --header-height: 89px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-1: 0ms;
    --duration-2: 0ms;
    --duration-3: 0ms;
    --duration-4: 0ms;
  }
}