/* ==========================================================================
   Monitor Capital — Design Tokens (tokens.css)
   Single source of truth for every colour, type, space, radius, shadow, motion.
   BUILD RULE #1: never hardcode a value anywhere — reference these variables.
   Two tiers: PRIMITIVES (raw) -> SEMANTIC (intent). Components use semantic only.
   ========================================================================== */

:root {
  /* ── PRIMITIVES ──────────────────────────────────────────────────────── */
  --black:        #111111;
  --true-black:   #000000;
  --white:        #FFFFFF;
  --red-500:      #D94030;   /* brand red */
  --red-600:      #C23527;   /* red hover/active */
  --gold:         #C4964A;   /* dept: Finance */
  --concrete:     #8E8D83;   /* dept: Real Estate */
  --forest:       #1E6B3C;   /* dept: Football */
  --grey-900:     #111827;
  --grey-700:     #333333;
  --grey-500:     #6B7280;
  --grey-300:     #E5E7EB;
  --grey-100:     #F5F5F5;

  /* ── SEMANTIC — colour ───────────────────────────────────────────────── */
  --color-bg:        var(--white);     /* page background — always white       */
  --color-primary:   var(--black);     /* near-black: headings, nav, logo      */
  --color-accent:    var(--red-500);   /* red signal: CTA, labels, lines, dots */
  --color-accent-hover: var(--red-600);
  --color-accent-soft:  rgba(217, 64, 48, 0.08);
  --color-accent-text:  var(--red-600);            /* small red text — passes AA on white */
  --color-body:      var(--grey-700);  /* body paragraphs                      */
  --color-muted:     var(--grey-500);  /* captions, secondary text             */
  --color-surface:   var(--grey-100);  /* alternate section background         */
  --color-border:    var(--grey-300);  /* card borders, dividers               */
  --color-white:     var(--white);
  --color-hero-bg:   var(--black);     /* dark hero / overlay sections         */
  --color-overlay:   rgba(17, 17, 17, 0.65); /* photo hero overlay             */
  --color-inverse:   var(--white);     /* text on dark backgrounds             */

  /* ── DEPARTMENT ACCENTS ──────────────────────────────────────────────────
     Scope: a department's own page (full-bleed sections, cards, tags) only.
     NEVER on the homepage except inside the Pijlers card grid.               */
  --dept-familyoffice: #9CC0FC;   /* Family Office brand light-blue (from logo emblem) */
  --dept-finance:      #C79900;   /* matched to the Finance cube emblem gold (sampled from emblem-finance.png) */
  --dept-realestate:   var(--concrete);
  --dept-football:     var(--forest);
  --dept-mooi:         #0C3A63;   /* MOOI blue (brand)   */
  --dept-orient:       #16264A;   /* Orient navy (brand) */
  --mooi-gold:         #D89B2E;   /* MOOI gold (brand)   */
  --mooi-blue-soft:    #6CA0D8;   /* MOOI blue (on dark) */
  --orient-gold:       #C49A3A;   /* Orient gold (brand) */

  /* ── TYPOGRAPHY ──────────────────────────────────────────────────────────
     One typeface (Inter), many weights. The weight + scale contrast IS the
     design: light editorial hero vs heavy section headlines.                  */
  --font-display: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body:    'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --w-light:     300;   /* editorial display headings        */
  --w-regular:   400;   /* body                              */
  --w-medium:    500;   /* lead, emphasis                    */
  --w-semibold:  600;   /* labels, nav links                 */
  --w-bold:      700;   /* section headlines, card titles    */
  --w-extrabold: 800;   /* rare — strongest emphasis         */

  /* fluid type scale (rem honors zoom; clamp removes breakpoint jumps) */
  --text-xs:   0.75rem;    /* 12px — labels, legal           */
  --text-sm:   0.875rem;   /* 14px — captions, nav           */
  --text-base: 1rem;       /* 16px — body (never smaller)    */
  --text-lg:   1.125rem;   /* 18px — lead paragraphs         */
  --text-xl:   1.25rem;    /* 20px                           */
  --text-2xl:  1.5rem;     /* 24px — card headings           */
  --text-3xl:  1.875rem;   /* 30px                           */
  --text-4xl:  clamp(1.875rem, 1.2rem + 2.6vw, 2.5rem);  /* section headlines */
  --text-hero: clamp(2.5rem, 1.4rem + 4.6vw, 4.5rem);    /* hero display      */

  --leading-tight:  1.12;
  --leading-snug:   1.3;
  --leading-normal: 1.6;
  --leading-loose:  1.8;
  --leading-relaxed: 1.75;       /* legal-doc paragraphs */
  --color-error:    #C23527;     /* form validation error (AA on white) */
  --color-success:  #2E7D32;     /* form validation success */

  --tracking-tight:  -0.02em;  /* large headings           */
  --tracking-normal:  0;
  --tracking-wide:    0.08em;  /* subtitles                */
  --tracking-wider:   0.12em;  /* ALL CAPS section labels  */
  --tracking-widest:  0.18em;  /* nav links                */

  /* ── SPACING — 8pt grid ──────────────────────────────────────────────── */
  --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;  --space-24: 96px;
  --space-32: 128px;

  /* vertical rhythm for full sections (generous = premium) */
  --section-y: clamp(4rem, 2.5rem + 6vw, 7.5rem);

  /* ── LAYOUT ──────────────────────────────────────────────────────────── */
  --container-max: 1280px;
  --container-pad: clamp(20px, 5vw, 80px);
  --measure: 65ch;            /* max prose width — never full-width body text  */
  --nav-h: 76px;              /* navbar height (reserve to avoid CLS)          */

  /* ── RADII ───────────────────────────────────────────────────────────── */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  16px;
  --radius-full: 9999px;

  /* ── SHADOWS ─────────────────────────────────────────────────────────── */
  --shadow-sm:    0 1px 2px rgba(0,0,0,0.04);
  --shadow-card:  0 1px 3px rgba(0,0,0,0.08), 0 4px 16px rgba(0,0,0,0.06);
  --shadow-hover: 0 8px 30px rgba(0,0,0,0.12);
  --shadow-nav:   0 2px 24px rgba(0,0,0,0.08);

  /* ── MOTION ──────────────────────────────────────────────────────────── */
  --transition:  200ms ease;
  --ease-out:    cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:    120ms;
  --dur-base:    200ms;
  --dur-slow:    350ms;
  --dur-reveal:  550ms;

  /* ── Z-INDEX scale ───────────────────────────────────────────────────── */
  --z-nav:    100;
  --z-overlay:200;
  --z-modal:  300;
}