/* ==========================================================================
   Flosaic design tokens
   Built 2026-08-03 (website plan stage 3). The layer that outlives the
   website: the site, the project-finance dashboard, client HTML one-pagers
   and the future design system all consume these custom properties.

   Colour values are the Rev2 digital palette from Admin/Brand/brand-system.md
   (measured values - the guidelines PDF prints wrong hex for the whole
   extended palette; never take colours from the PDF).

   Load order: mozaic-webfont.css first, then this file.
   ========================================================================== */

:root {

  /* --- Core palette ------------------------------------------------------ */
  --yellow:   #F1E744;  /* signature yellow, Rev2. 1.29:1 on white - NEVER text on light */
  --charcoal: #262626;  /* primary text. 15.13:1 on white */
  --white:    #FFFFFF;

  /* Grey ramp - tints of charcoal. Keep >=15% tint gap between any two used together */
  --grey-100: #262626;
  --grey-80:  #515151;
  --grey-60:  #7D7D7D;  /* 4.12:1 on white - large text only, not body copy */
  --grey-40:  #A8A8A8;  /* 2.38:1 - decoration only, never text */
  --grey-20:  #D4D4D4;
  --grey-5:   #F4F4F4;

  /* Extended palette - blues, in brand order of use (after yellow and grey) */
  --blue:       #5668F1;  /* 4.52:1 on white - fills, charts, large display only */
  --blue-dark:  #23298B;  /* 11.92:1 - the robust link colour on white */
  --blue-mid:   #1A6BA6;  /* 5.68:1 - passes AA comfortably */
  --blue-light: #63B4DF;  /* 2.30:1 - decoration only */
  --blue-pale:  #9BDDFB;
  --blue-wash:  #D4EFFA;

  /* Teals - complex pie charts only, used only after blue */
  --teal-dark:  #13747A;
  --teal:       #00A1AB;
  --teal-light: #5FDFE0;
  --teal-pale:  #7FEFF8;
  --teal-cyan:  #00DFEB;
  --teal-wash:  #C6E8E7;

  --red-flowchart: #FF3921;  /* flowchart use only; value unresolved with Cadence */

  /* --- Semantic colour --------------------------------------------------- */
  --colour-text:        var(--charcoal);
  --colour-text-muted:  var(--grey-80);   /* grey-60 fails body-copy contrast; 80 is the muted floor */
  --colour-link:        var(--blue-dark); /* #5668F1 passes AA by 0.02 - too thin; dark blue is the rule */
  --colour-accent:      var(--yellow);    /* shapes and fills only on light backgrounds */
  --colour-surface:     var(--white);
  --colour-surface-alt: var(--grey-5);
  --colour-rule:        var(--grey-20);

  /* --- Typography -------------------------------------------------------- */
  --font-sans: 'Mozaic HUM', 'Mozaic HUM Fallback', Arial, sans-serif;

  /* Hierarchy is carried by weight contrast on a light base (brand-system
     type scale): body is Light, the lead paragraph is Medium, the large
     display line is Extra Light. No bold-on-regular anywhere. */
  --weight-display: 200;
  --weight-body:    300;
  --weight-heading: 500;

  /* Type scale - web mapping of the report scale's proportions (49/33/18/12/10
     relative to body). STARTING VALUES: extrapolated for the web, not
     Cadence-specified; tune on the real page at stage 4. */
  --text-body:    1.0625rem;                       /* 17px - Light body needs a touch over 16 */
  --text-small:   0.875rem;                        /* captions, footer */
  --text-lead:    1.25rem;                         /* Medium lead paragraph */
  --text-h3:      1.375rem;                        /* Medium subsection */
  --text-h2:      clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem);   /* section headings */
  --text-display: clamp(2.5rem, 1.6rem + 4.5vw, 5rem);       /* hero, Extra Light */
  --text-stat:    clamp(2rem, 1.4rem + 2.8vw, 3.25rem);      /* stat-tile big number */

  --leading-body:  1.55;
  --leading-tight: 1.15;   /* display and stat figures */
  --leading-heading: 1.25;

  /* --- Spacing - 8px base ------------------------------------------------ */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;
  --space-7: 4.5rem;
  --space-8: 6rem;    /* between-section rhythm */

  /* --- Grid -------------------------------------------------------------- */
  /* Guidelines p31-p32 draw a 12-column modular lattice with intersection
     points but print no measurements, so gutter/margin/max are working
     values to tune at stage 4. */
  --grid-columns: 12;
  --grid-gutter: 1.5rem;
  --page-margin: clamp(1rem, 4vw, 3rem);
  --content-max: 1200px;

  /* --- Motion ------------------------------------------------------------ */
  /* Subtle and tasteful only; motion is an enhancement layered on a page
     that is complete without it. */
  --motion-duration: 300ms;
  --motion-ease: cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* Breakpoints cannot live in custom properties (media queries cannot read
   them). Canonical values, matching the stage 6 check widths - keep any
   hard-coded media query on one of these:
     360px  small phone
     768px  tablet / sidebar collapse candidate
     1024px laptop
     1440px wide desktop */

/* The twelve-column grid, encoded once. Components place themselves with
   grid-column: span n / explicit lines. */
.grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
  gap: var(--grid-gutter);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-duration: 0ms;
  }
}