/*
  Design tokens — source of truth.
  Pulled 1:1 from the Figma variables of the W-ALBINFO file (May 2026).
  If you change a value here, every component picks it up automatically.
*/

:root {
	/* ---------- color ---------- */
	--c-dark:          #000000;
	--c-light:         #ffffff;
	--c-purple-dark:   #14111A;
	--c-red:           #E63946;  /* "costum red" — brand accent */
	--c-grey-medium:   #C7CAD5;
	--c-grey-light:    #F4F4F9;
	--c-grey-dark:     #9A9DA5;

	/* Semantic aliases (use these in components, not the raw colors). */
	--c-bg:            var(--c-light);
	--c-bg-elev:       var(--c-grey-light);
	--c-fg:            var(--c-dark);
	--c-fg-muted:      var(--c-grey-dark);
	--c-border:        var(--c-grey-medium);
	--c-accent:        var(--c-red);
	--c-on-accent:     var(--c-light);
	--c-overlay:       rgba(0, 0, 0, 1);

	/* ---------- typography ---------- */
	/* Source Sans 3 (Aptos stand-in) — see fonts-source-sans-3.css */
	--ff-base: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji", sans-serif;

	/* type scale: --fs-* size,  --lh-* line-height */
	--fs-hero:        48px;   --lh-hero:       60px;          /* 700 — Hero Headline */
	--fs-h1:          36px;   --lh-h1:         42px;          /* 700 */
	--fs-h2:          24px;   --lh-h2:         1.1;           /* 700 */
	--fs-h3:          21px;   --lh-h3:         1.2;           /* 600 */
	--fs-read:        21px;   --lh-read:       1.5;           /* 600 — body in article */
	--fs-newstitle:   18px;   --lh-newstitle:  24px;          /* 600 — card title */
	--fs-link-18:     18px;   --lh-link-18:    18px;          /* 600 */
	--fs-link-18-l:   18px;   --lh-link-18-l:  18px;          /* 300 */
	--fs-heading-14:  14px;   --lh-heading-14: 18.4px;        /* 600 ALL CAPS section labels */
	--fs-link-14:     14px;   --lh-link-14:    19px;          /* 600 */
	--fs-label-12:    12px;   --lh-label-12:   18px;          /* 400 — small label / meta */

	/* font weights */
	--fw-light:    300;
	--fw-regular:  400;
	--fw-semibold: 600;
	--fw-bold:     700;

	/* letter-spacing
	   NOTE: Figma tokens declare letterSpacing: -3 / -4 for some uppercase styles.
	   Those values are in Figma's px units which translate to ~-0.2em in CSS.
	   Flag with design: -3 on UPPERCASE looks squashed; usually want positive. */
	--ls-tight:     -0.02em;
	--ls-tighter:   -0.04em;
	--ls-normal:    0;

	/* ---------- effects ---------- */
	--shadow-card:  0 4px 4px 0 rgba(37, 37, 43, 0.10); /* "Drop Shadow" / "menu" */

	/* ---------- radii ---------- */
	--radius-sm: 4px;
	--radius-md: 8px;   /* card radius from Figma */
	--radius-lg: 16px;
	--radius-pill: 9999px;

	/* ---------- spacing scale (4px base) ---------- */
	--space-1:  4px;
	--space-2:  8px;
	--space-3:  12px;
	--space-4:  16px;
	--space-5:  20px;
	--space-6:  24px;
	--space-8:  32px;
	--space-10: 40px;
	--space-12: 48px;
	--space-16: 64px;
	--space-20: 80px;   /* matches the 80px gutter */

	/* ---------- layout ---------- */
	--canvas-width:    1440px;
	--container-width: 1280px;
	--container-gutter: 80px;  /* per-side gutter on desktop */

	/* breakpoints — used as media queries, expressed as min-width */
	--bp-sm:  480px;
	--bp-md:  768px;
	--bp-lg:  1024px;
	--bp-xl:  1280px;
	--bp-2xl: 1440px;
}