/*
 * ITM Design Tokens — Phase 6 (Figma-driven)
 *
 * Source: Figma file ITM-Website (n7GF243mYhM1tINUB3G71Z), extracted via the
 * Figma MCP integration on 2026-05-12. Synced to docs/FIGMA_DESIGN_TOKENS.md.
 *
 * Reference these custom properties from every block partial, layout, and
 * page-specific stylesheet. Hard-coded colours/spacing in component CSS are a
 * lint failure waiting to happen — when the brand evolves, only this file
 * should need to change.
 *
 * Loaded as the first stylesheet in _Layout.cshtml so subsequent rules can
 * use the vars.
 */

:root {
  /* ----- Brand palette ----- */
  /* The complete ITM brand palette — six colours. Every shade on the site
     should be one of these or a transparency / mix derived from them. */
  --itm-white:        #FFFFFF;   /* Text on dark, hero text, card surfaces */
  --itm-dark-grey:    #333333;   /* Top nav, secondary text on light */
  --itm-mid-grey:     #999999;   /* Placeholder text, disabled, dividers */
  --itm-yellow:       #FFF200;   /* Brand accent — icons, logo bg, primary CTAs */
  --itm-black:        #000000;   /* Main header, hero, dark theme */
  --itm-bone-white:   #ECEBE2;   /* CVP / trust-bar bg, subtle off-white sections */

  /* ----- Spacing scale ----- */
  --itm-space-xxs:     4px;
  --itm-space-xs:      8px;
  --itm-space-sm:     12px;
  --itm-space-default: 16px;
  --itm-space-md:     20px;
  --itm-layout-gutter: 40px; /* canonical side padding for all section inner wrappers */

  /* ----- Type system ----- */
  /* Helvetica for headings & main nav, Inter for body & utility. */
  --itm-font-display: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --itm-font-body:    'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  /* Default character-spacing values seen across the design — use these on
     headings + nav so they match the Figma exactly. */
  --itm-tracking-tight:  -0.08px;
  --itm-tracking-normal: -0.32px;

  /* ----- Layout ----- */
  /* `--itm-screen-desktop` is the Figma authored canvas width (1440px) — kept
     as a design-reference constant, not the actual content cap. The actual
     centred-content max-width is `--itm-content-max`, which mirrors the live
     itm.co.nz site (1170px — dominant max-width in main.css, observed via
     grep across 17 rules on 2026-05-13). Use --itm-content-max in component
     wrappers; reach for --itm-screen-desktop only when you genuinely need
     the design canvas width (rare). */
  --itm-screen-desktop: 1440px;
  --itm-content-max:    1170px;

  /* ----- Semantic aliases ----- */
  /* Use these in component CSS rather than the raw brand colours when the
     usage is contextual (e.g. "background of a hero CTA") so we can re-skin
     individual contexts without hunting through 16 partials. */
  --itm-bg-page:           var(--itm-white);
  --itm-bg-hero:           var(--itm-black);
  --itm-bg-cvp-bar:        var(--itm-bone-white);
  --itm-bg-top-nav:        var(--itm-dark-grey);
  --itm-text-on-dark:      var(--itm-white);
  --itm-text-on-light:     var(--itm-dark-grey);
  --itm-text-placeholder:  var(--itm-mid-grey);
  --itm-cta-bg:            var(--itm-yellow);
  --itm-cta-text:          var(--itm-black);
  --itm-icon-accent:       var(--itm-yellow);
}