/**
 * Design Tokens
 * 
 * All design values are defined as CSS custom properties to avoid hard-coding
 * throughout the stylesheet. This ensures consistency and makes future updates easier.
 */

/* Font Face Declarations */
@font-face {
  font-family: "Ruder Plakat Maxi LL";
  src: url("../assets/fonts/RuderPlakatMaxiLLTT-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "ABC Marist";
  src: url("../assets/fonts/ABCMarist-Medium.woff2") format("woff2"),
       url("../assets/fonts/ABCMarist-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Colors */
  --color-bg-page: #faf4f0;
  --color-gridline: #f5e9e0;
  --color-border: #1c110a;
  --color-text: #1c110a;
  --color-link: #738c7a; /* Muted sage-green for links (Figma) */
  --color-link-hover: #5e7364;
  --color-link-highlight: rgba(115, 140, 122, 0.14); /* link at 14%: page-link hover fill (Figma) */
  --color-text-muted: rgba(28, 17, 10, 0.48);        /* secondary text (Figma 48%) */
  --color-text-muted-strong: rgba(28, 17, 10, 0.64); /* secondary text, hovered (Figma 64%) */
  --color-card-fill: rgba(255, 255, 255, 0.64);      /* project history card */
  --color-card-shadow-rgb: 217, 180, 155;            /* warm shadow under the card */
  /* The name's ink and its receded tint on the history page (= --color-text
     and --color-gridline), in oklch so the change between them fades evenly */
  --color-name-ink: oklch(19.02% 0.0229 53.36);
  --color-name-receded: oklch(94.1% 0.0178 59.47);

  /* Motion — durations. Exits are shorter than entrances; hover-in is
     faster than hover-out. scripts/motion.js reads these, so CSS and JS
     sequences run on the same clock. */
  --dur-1: 120ms;  /* hover-in, micro feedback */
  --dur-2: 180ms;  /* exits, content fade-out */
  --dur-3: 280ms;  /* hover-out, state crossfades */
  --dur-4: 460ms;  /* accordion open, peek close */
  --dur-5: 640ms;  /* name recolour, peek open, hairline draw */
  --dur-6: 900ms;  /* entrance transforms, image mask reveal */
  --dur-7: 1200ms; /* gridline draw, illustration fade-in */

  /* Motion — easing. Entrances decelerate, exits accelerate. */
  --ease-out: cubic-bezier(.22, 1, .36, 1);     /* default entrance */
  --ease-out-expo: cubic-bezier(.16, 1, .3, 1); /* draws, mask reveals, long settles */
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);  /* morphs (accordion close, recolour) */
  --ease-in: cubic-bezier(.4, 0, 1, 1);         /* exits */
  --ease-draw: cubic-bezier(.3, 0, .2, 1);      /* a pen stroke: eases in, travels, settles */

  /* Motion — distance and rhythm. Distance scales with mass. */
  --rise-1: 6px;   /* body text */
  --rise-2: 10px;  /* display name */
  --rise-3: 12px;  /* panel card */
  --stagger: 60ms;

  /* Spacing - Human-scaled spacing scale */
  --spacing-xs: 0.5rem;   /* 8px */
  --spacing-sm: 1rem;     /* 16px */
  --spacing-md: 2rem;     /* 32px */
  --spacing-lg: 4rem;     /* 64px */
  --spacing-xl: 8rem;     /* 128px */

  /* Typography */
  --font-display: "Ruder Plakat Maxi LL", sans-serif;
  --font-body: "Gantari", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  
  /* Writing section typography (content block uses ABC Marist) */
  --font-article-list: "IBM Plex Mono", monospace;
  --font-article-mono: "IBM Plex Mono", monospace;
  --font-article-marist: "ABC Marist", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-article-body: "ABC Marist", Georgia, "Times New Roman", serif;
  
  /* Typography Sizes */
  --font-size-display: clamp(3rem, 8vw, 6rem); /* Responsive display size */
  --font-size-body: 14px;
  --line-height-body: normal; /* Auto per design */
  --line-height-display: 1.1;
  --font-weight-body: 400; /* Medium */
  --letter-spacing-body: 0;

  /* Layout */
  --border-width: 32px; /* Thick frame border */
  --content-max-width: 40rem; /* Maintains left-aligned column */
  --content-padding: 48px; /* Padding inside page frame */
  --gridline-spacing: 2rem; /* Spacing between decorative gridlines */

  /* Scrollbar (Figma: 4px wide, 8px radius, 8px from edge) */
  --scrollbar-width: 4px;
  --scrollbar-radius: 8px;
  --scrollbar-color: #f5e9e0;
  --scrollbar-margin: 8px;
}