/*
  DESIGN TOKENS
  Single source of truth for color, type, spacing, and other primitives.
  Retune the palette here — nothing below this file should hard-code a hex value.
*/

:root {

  /* ---------- COLOR: BASE ---------- */
  --color-bg: #FAF6EF;            /* warm cream / off-white */
  --color-bg-alt: #F3ECDF;        /* slightly deeper cream, for section banding */
  --color-surface: #FFFFFF;       /* cards / glass panels sit on this before opacity */
  --color-border: #E4DACB;        /* hairline dividers on cream */

  /* Unified text-color progression, used site-wide for every heading, body
     copy, muted/meta text, and link — the same rest/hover/disabled states
     as the button color field (e.g. "View the work", "Connect on LinkedIn"). */
  --color-heading: var(--color-accent-blue-800);      /* rest */
  --color-text: var(--color-accent-blue-800);         /* rest */
  --color-text-muted: var(--color-accent-blue-800);   /* rest */
  --color-text-hover: var(--color-accent-blue-900);   /* hover, interactive text only */
  --color-text-disabled: var(--color-accent-ash-300); /* disabled, interactive text/controls only */
  --color-text-on-dark: #F7F2E8;  /* text placed on dark/accent surfaces */

  /* ---------- COLOR: ACCENT — GREEN (sage → forest) ---------- */
  --color-accent-green-100: #EEF3EC;
  --color-accent-green-200: #DCE8D6;
  --color-accent-green-300: #C2D9B9;
  --color-accent-green-400: #A3C69A;
  --color-accent-green-500: #7FAE74;
  --color-accent-green-600: #5E9156;
  --color-accent-green-700: #47713F;
  --color-accent-green-800: #345530;
  --color-accent-green-900: #233A21;

  /* ---------- COLOR: ACCENT — AMBER (honey → amber) ---------- */
  --color-accent-amber-100: #FBF1DD;
  --color-accent-amber-200: #F6E1B8;
  --color-accent-amber-300: #F0CC85;
  --color-accent-amber-400: #E8B354;
  --color-accent-amber-500: #DC9A2E;
  --color-accent-amber-600: #BD7D1D;
  --color-accent-amber-700: #94611A;
  --color-accent-amber-800: #6E481A;
  --color-accent-amber-900: #4A3013;

  /* ---------- COLOR: ACCENT — BLUE (dusk → navy) ---------- */
  --color-accent-blue-100: #CCD9EC;
  --color-accent-blue-200: #B1C5E2;
  --color-accent-blue-300: #8CA9D4;
  --color-accent-blue-400: #658DC6;
  --color-accent-blue-500: #426FB1;
  --color-accent-blue-600: #33578A;
  --color-accent-blue-700: #264066;
  --color-accent-blue-800: #1B2E49;
  --color-accent-blue-900: #0F1A29;

  /* ---------- COLOR: ACCENT — PURPLE (lavender → plum) ---------- */
  --color-accent-purple-100: #D9CCEC;
  --color-accent-purple-200: #C4B1E2;
  --color-accent-purple-300: #A88CD4;
  --color-accent-purple-400: #8B65C6;
  --color-accent-purple-500: #6D42B1;
  --color-accent-purple-600: #55338A;
  --color-accent-purple-700: #3F2666;
  --color-accent-purple-800: #2D1B49;
  --color-accent-purple-900: #1A0F29;

  /* ---------- COLOR: ACCENT — ROSE (blush → wine) ---------- */
  --color-accent-rose-100: #F4E9EC;
  --color-accent-rose-200: #E7D0D6;
  --color-accent-rose-300: #D6AEB9;
  --color-accent-rose-400: #C48B9B;
  --color-accent-rose-500: #B2667B;
  --color-accent-rose-600: #964C60;
  --color-accent-rose-700: #753B4B;
  --color-accent-rose-800: #5A2D3A;
  --color-accent-rose-900: #3E1F28;

  /* ---------- COLOR: ACCENT — ASH (fog → slate) ---------- */
  --color-accent-ash-100: #DFDEE6;
  --color-accent-ash-200: #CAC8D6;
  --color-accent-ash-300: #AEACC0;
  --color-accent-ash-400: #918DA9;
  --color-accent-ash-500: #736D91;
  --color-accent-ash-600: #5A5672;
  --color-accent-ash-700: #444156;
  --color-accent-ash-800: #32303F;
  --color-accent-ash-900: #1F1D27;

  /* Semantic aliases — change these, not the raw scales, when retuning emphasis */
  --color-link: var(--color-accent-blue-800);
  --color-link-hover: var(--color-accent-blue-900);
  --color-focus-ring: var(--color-accent-amber-600);

  /* ---------- TYPE ---------- */
  --font-serif: 'Cormorant Garamond', 'Iowan Old Style', Georgia, serif;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --fs-body: 1rem;                          /* 16px minimum body copy */
  --fs-small: 0.875rem;
  --fs-meta: 0.8125rem;

  /* Fluid headline scale — clamp() so Cormorant Garamond scales smoothly
     rather than jumping at breakpoints. min / preferred(vw) / max */
  --fs-display: clamp(2.5rem, 1.8rem + 3.2vw, 5rem);      /* hero / page-hero titles */
  --fs-h1: clamp(2.1rem, 1.6rem + 2.2vw, 3.5rem);         /* case study title */
  --fs-h2: clamp(1.5rem, 1.25rem + 1.1vw, 2.25rem);       /* section headings */
  --fs-h3: clamp(1.2rem, 1.05rem + 0.6vw, 1.5rem);        /* card titles, sub-heads */

  --lh-body: 1.65;
  --lh-heading: 1.15;
  --lh-tight: 1.05;

  --ls-eyebrow: 0.08em;

  /* ---------- SPACING ---------- */
  /* Base unit 8px. Use fluid section padding via clamp() at usage sites for
     hero/section rhythm; use these fixed steps for component-level spacing. */
  --space-1: 0.5rem;    /* 8px */
  --space-2: 0.75rem;   /* 12px */
  --space-3: 1rem;      /* 16px */
  --space-4: 1.5rem;    /* 24px */
  --space-5: 2rem;      /* 32px */
  --space-6: 3rem;      /* 48px */
  --space-7: 4.5rem;    /* 72px */
  --space-8: 7rem;      /* 112px */

  --section-padding-y: clamp(3rem, 2.2rem + 4vw, 7rem);
  --content-max-width: 72rem;
  --prose-max-width: 42rem;

  /* ---------- LAYOUT: STICKY HEADER ---------- */
  /* Rendered height of .site-header (base.css), kept as a token so anchor
     targets can offset scroll position by exactly this much — see
     scroll-margin-top on #home/#work/#about in base.css. Mobile: the
     44px nav-toggle button + padding-block var(--space-3) x2 + 1px
     border. Overridden at the 600px breakpoint in base.css, where the
     header becomes a two-row logo+nav bar and is taller. */
  --header-height: 78px;

  /* ---------- SHAPE / DEPTH ---------- */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  --shadow-soft: 0 1px 2px rgba(43, 38, 32, 0.04), 0 8px 24px -8px rgba(43, 38, 32, 0.10);
  --shadow-lift: 0 4px 8px rgba(43, 38, 32, 0.05), 0 20px 40px -12px rgba(43, 38, 32, 0.16);

  /* "Layered translucent glass" surfaces */
  --glass-bg: rgba(255, 255, 255, 0.55);
  --glass-border: rgba(255, 255, 255, 0.6);
  --glass-blur: 18px;

  --border-hairline: 1px solid var(--color-border);

  --transition-base: 200ms ease;
  --transition-slow: 420ms cubic-bezier(0.22, 1, 0.36, 1);

  /* ---------- BREAKPOINTS (reference only — CSS vars can't be used inside
     @media queries, so mirror these literal values at each media query) ----------
     --bp-sm: 600px
     --bp-lg: 1024px
  */
}