/* ============================================================
   tokens.css
   Every value here is read directly from Figma
   (file 7pVjAAYSG0ohQpe5RJ9Bal). Do not invent new values —
   add them in Figma first, then mirror them here.
   ============================================================ */

:root {
  /* --- Colour: Gray scale (Figma variable group "Gray") ----- */
  --gray-0:   #ffffff;
  --gray-50:  #fafafa;
  --gray-100: #f4f4f5;
  --gray-200: #e4e4e7;
  --gray-600: #52525b;
  --gray-700: #3f3f46;
  --gray-800: #27272a;
  --gray-900: #18181b;

  /* --- Colour: accent ------------------------------------- */
  /* Blue/900 — used only for the Primary button hover state. */
  --blue-900: #002c50;

  /* --- Colour: Brand (Figma variable group "Brand") -------- */
  --brand-500: #008cff;  /* logo mark, inline text links (Link component) */
  --brand-50:  #e5f4ff;  /* home hero background */

  /* --- Colour: semantic aliases (Figma variable groups
     "bg", "Text", "border") — each maps onto a Gray/Brand
     value above; kept as separate names because Figma binds
     components to the alias, not the raw scale.               */
  --bg-default:           var(--gray-0);
  --bg-secondary-default: var(--gray-0);
  --bg-sunken-primary:    var(--gray-50);
  --bg-primary-default:   var(--gray-900);
  --border-primary:       var(--gray-200);
  --border-secondary:     var(--gray-100);
  --text-primary:         var(--gray-900);
  --text-secondary:       var(--gray-700);
  --text-tertiary:        var(--gray-600);
  --text-inverse:         var(--gray-0);

  /* --- Colour: card surfaces ------------------------------ */
  /* Raw hex in Figma (not variables). One per project card,
     applied in source order.                                  */
  --card-sand: #f3ede2;
  --card-sky:  #e6f0f9;
  --card-ice:  #f0f6ff;

  /* Meta text inside cards. Figma uses #52525c here, which is
     one hex step off Gray/600 (#52525b). Kept separate rather
     than silently normalised — see README "Known drift".      */
  --card-meta: #52525c;

  /* --- Colour: hero background (About only) ---------------- */
  /* Raw hex in Figma (not a variable) — home hero now uses
     Brand/50 above instead of a bespoke colour.                */
  --hero-lavender: #f3f0ff;

  /* --- Colour: CV row backgrounds (node 3218:9735) --------- */
  --cv-row-1: #ebf6ff;
  --cv-row-2: #f0f6ff;
  --cv-row-3: #f4f4f5;
  --cv-label-bg: #d4d4d8;

  /* --- Elevation primitives (SDS) ------------------------- */
  --depth-0:   0px;
  --depth-025: 1px;
  --depth-100: 4px;
  --black-100: rgba(12, 12, 13, 0.05);
  --black-200: rgba(12, 12, 13, 0.10);

  /* --- Shadows -------------------------------------------- */
  --shadow-topnav:
    var(--depth-0) var(--depth-025) calc(var(--depth-100) / 2) var(--black-200),
    var(--depth-0) var(--depth-025) calc(var(--depth-100) / 2) var(--black-100);

  --shadow-btn-primary-hover:
    0px 2px 8px 0px rgba(0, 0, 0, 0.25),
    var(--depth-0) var(--depth-025) var(--depth-100) 0px var(--black-100);

  --shadow-btn-secondary-hover: 0px 2px 4px rgba(0, 0, 0, 0.25);

  --shadow-photo:
    10px 16px 104px 0px rgba(4, 9, 31, 0.15),
    var(--depth-0) var(--depth-025) var(--depth-100) 0px var(--black-200),
    var(--depth-0) var(--depth-025) var(--depth-100) 0px var(--black-100);

  /* --- Radii ---------------------------------------------- */
  --radius-8:  8px;   /* buttons */
  --radius-12: 12px;  /* images inside cards */
  --radius-16: 16px;  /* top nav, project cards */
  --radius-24: 24px;  /* work section, photo frame */

  /* --- Typeface families ---------------------------------- */
  --font-display: "REM", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;

  /* --- Type scale (family / weight / size / line-height) --- */
  /* Header/h1 */
  --h1-size: 60px;   --h1-line: 60px;   --h1-weight: 700;
  /* Card headline (raw values in Figma, no named style) */
  --h2-size: 40px;   --h2-line: 64px;   --h2-weight: 700;
  /* Header/h3 */
  --h3-size: 36px;   --h3-line: 40px;   --h3-weight: 700;
  /* Header/h4 */
  --h4-size: 28px;   --h4-line: 44px;   --h4-weight: 700;
  /* Card sub-heading "Project uitkomst" */
  --h5-size: 20px;   --h5-line: 32px;   --h5-weight: 700;
  /* Text/Intro/semibold. In Figma staat deze stijl op 24/38; op de
     site is de intro-tekst zelf naar 20/32 geschaald. Controleer of
     Figma nog bijgewerkt moet worden. */
  --intro-size: 20px; --intro-line: 32px; --intro-weight: 600;
  /* De naam in de top nav gebruikte dezelfde stijl en blijft op de
     originele 24/38 staan — daarom een eigen paar. */
  --topnav-name-size: 24px; --topnav-name-line: 38px;
  /* Text/Button/Regular */
  --btn-size: 16px;  --btn-line: 24px;  --btn-weight: 600;
  /* Body + Text/italic */
  --body-size: 16px; --body-line: 24px; --body-weight: 400;
  /* Testimonial quote — raw values in Figma, no named style. Same
     16px as body but on a 28px line, so a long quote stays airy. */
  --quote-size: 16px; --quote-line: 28px;
  /* Testimonial attribution. The name reuses the h5 style above
     (20/32); only the role needs its own pair. Together they make
     48px — exactly the height of the portrait beside them, which
     is what sets the height of a quote with no portrait. */
  --voice-role-size: 12px; --voice-role-line: 16px;

  /* --- Layout --------------------------------------------- */
  /* Widths measured off the Figma frames. The shell caps and
     centres, so viewports above 1440px keep content centred.  */
  --shell-max: 1296px;   /* work section, about content cards, desktop */
  --prose-max: 1076px;   /* hero content, top nav, footer inner, desktop */

  --pad-mobile: 16px;
  --pad-tablet: 32px;

  /* --- Motion --------------------------------------------- */
  /* Kept under the 400ms Doherty threshold so feedback reads
     as instant rather than as a wait.                         */
  --transition-fast: 300ms;
  --transition-page: 200ms;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1); /* buttons — same in and out of hover */

  /* NOT in Figma. Page-load fade-in and scroll-reveal — slower
     and gentler than the button/page-nav transitions above.     */
  --transition-slow: 500ms;

  /* --- Focus ---------------------------------------------- */
  /* NOT in the Figma file. Added for keyboard accessibility;
     derived from Blue/900. See README "Additions".            */
  --focus-ring: var(--blue-900);
  --focus-width: 3px;
  --focus-offset: 2px;
}