/* Hallmark · macrostructure: Marquee Hero · genre: modern-minimal · theme: custom (CT Innovates brand)
 * paper: dual-band (light #fff / deep navy) · display: geometric-sans (Montserrat) · accent: cool-blue
 * Brand colours are kept as exact hex from the CT Innovates Brand Guide (fidelity > colour-space).
 * OKLCH equivalents noted in comments. This is the single source of truth — reference via var().
 */

:root {
  /* --- Brand palette (Brand Guide › Color palette — exact hex) ------------- */
  --brand-blue-700: #395FD3; /* indigo   ~oklch(53% 0.19 268) */
  --brand-blue-500: #318FFD; /* primary  ~oklch(66% 0.17 256) */
  --brand-blue-400: #19B5FF; /* bright   ~oklch(74% 0.14 233) */
  --brand-blue-200: #9DDFFF; /* light    ~oklch(88% 0.07 226) */
  --brand-black:    #000000;
  --brand-white:    #FFFFFF;

  /* --- Extended navy scale (derived for dark sections; from comp gradients) - */
  --navy-950: #060f2a; /* near-black ink navy */
  --navy-900: #0a1840;
  --navy-800: #0e2154;
  --navy-700: #143079;
  --navy-600: #1c44a8;

  /* --- Semantic colour roles ---------------------------------------------- */
  --color-bg:            var(--brand-white);
  --color-bg-soft:       #eef4fc;   /* alt light band; deep enough to read as a band */
  --color-bg-card:       var(--brand-white);
  --color-bg-dark:       var(--navy-900);
  --color-ink:           #0b1530;   /* primary text on light (near-black navy) */
  --color-ink-soft:      #475069;   /* secondary text on light */
  --color-ink-faint:     #616c8a;   /* tertiary / labels on light (AA at small sizes) */
  --color-on-dark:       #eaf1ff;   /* primary text on dark */
  --color-on-dark-soft:  #a9b8de;   /* secondary text on dark */
  --color-primary:       var(--brand-blue-500);
  --color-primary-deep:  var(--brand-blue-700);
  --color-accent:        var(--brand-blue-400);
  --color-line:          #e2e9f5;   /* hairline on light */
  --color-line-dark:     rgba(157, 223, 255, 0.16); /* hairline on dark */
  --color-focus:         var(--brand-blue-400);
  --color-danger:        #b3261e;   /* form errors on light; 6.4:1 on white */
  --color-danger-soft:   #fbeceb;   /* error callout ground; the danger-band twin of --color-bg-soft */

  /* --- Gradients ----------------------------------------------------------- */
  --grad-hero:    radial-gradient(120% 140% at 78% 8%, var(--navy-700) 0%, var(--navy-900) 48%, var(--navy-950) 100%);
  --grad-dark:    linear-gradient(168deg, var(--navy-900) 0%, var(--navy-800) 60%, var(--navy-700) 100%);
  --grad-primary: linear-gradient(135deg, var(--brand-blue-500) 0%, var(--brand-blue-400) 100%);
  --grad-deep:    linear-gradient(135deg, var(--brand-blue-700) 0%, var(--brand-blue-500) 100%);

  /* --- Typography (Gotham → Montserrat stand-in until web license confirmed) */
  --font-display: "Montserrat", "Gotham", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Montserrat", "Gotham", "Helvetica Neue", Arial, sans-serif;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;
  --fw-extra:   800;

  /* Type scale — two ratios, one cap.
   *
   * ~1.15 below body, 1.25 above. A single ratio across the whole range is the
   * common mistake: small sizes need fine gradation and hit a legibility floor
   * (16 / 1.25 twice is already 10px), while headings need a wider interval to
   * establish hierarchy, because large glyphs carry more optical weight per
   * unit than the arithmetic predicts.
   *
   * Every fluid step reaches its cap at the SAME viewport (1100px). When steps
   * capped at different widths the ratio between any two sizes drifted as the
   * window moved. One shared cap makes the designed ratio the real ratio.
   *
   * Headings do not have to use every rung: .h-section (3xl) to .card h3 (xl)
   * deliberately skips 2xl, which is why that jump is 1.25² and not 1.25.
   */
  --text-eyebrow: 0.6875rem;                                    /* 11        */
  --text-xs:   0.78125rem;                                      /* 12.5      */
  --text-sm:   0.90625rem;                                      /* 14.5      */
  --text-base: 1rem;                                            /* 16        */
  --text-lg:   clamp(1.125rem, 1.06rem + 0.28vw, 1.25rem);      /* 18 → 20   */
  --text-xl:   clamp(1.3125rem, 1.183rem + 0.55vw, 1.5625rem);  /* 21 → 25   */
  --text-2xl:  clamp(1.5625rem, 1.369rem + 0.83vw, 1.9375rem);  /* 25 → 31   */
  --text-3xl:  clamp(1.875rem, 1.584rem + 1.24vw, 2.4375rem);   /* 30 → 39   */
  --text-display: clamp(2.0625rem, 1.578rem + 2.07vw, 3rem);    /* 33 → 48   */

  /* Mark scale — for numerals and word marks that are ORNAMENT, not text.
   * The 01/02/03 ledger indices and the stat figure are graphic wayfinding
   * made of glyphs; they answer to "how big an anchor does this need" rather
   * than to reading hierarchy, so they get their own named steps instead of
   * being forced onto the text scale or left as inline clamps. */
  --mark-sm: clamp(1.375rem, 1.149rem + 0.97vw, 1.8125rem);     /* 22 → 29   */
  --mark-md: clamp(2.25rem, 1.798rem + 1.93vw, 3.125rem);       /* 36 → 50   */
  --mark-lg: clamp(2.875rem, 1.646rem + 5.24vw, 5.25rem);       /* 46 → 84   */

  --lh-tight: 1.06;
  --lh-snug:  1.22;
  --lh-base:  1.62;
  --tracking-eyebrow: 0.16em;
  --tracking-tight: -0.02em;

  /* --- Measure -------------------------------------------------------------
     Line length was set ad hoc: 44 / 46 / 48 / 52 / 54 / 60 / 62 / 64 / 68ch
     across the stylesheets for what is essentially one job. Three named steps,
     picked by TYPE SIZE — larger text needs fewer characters to hit the same
     comfortable line, which is why the lede measure is shorter than the body
     measure even though the lede is the more prominent text. */
  --measure-narrow: 46ch;   /* constrained columns: hero lede, in-card copy */
  --measure-lede:   54ch;   /* --text-lg intros                            */
  --measure-body:   66ch;   /* --text-base / --text-sm prose               */

  /* --- Spacing (4pt scale) ------------------------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;
  --section-y: clamp(4rem, 3rem + 6vw, 8rem);

  /* --- Layout -------------------------------------------------------------- */
  --container: 1200px;
  --container-narrow: 880px;
  --container-pad: clamp(1.25rem, 5vw, 4rem);

  /* floating nav island — heroes pull up under it so the gap shows the hero */
  --nav-gap: clamp(0.7rem, 1.6vw, 1.1rem);
  --nav-h: 66px;
  --header-h: calc(var(--nav-gap) + var(--nav-h) + 2px);

  /* --- Radius / shadow / motion ------------------------------------------- */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-xl: 32px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(11, 21, 48, 0.06), 0 2px 6px rgba(11, 21, 48, 0.05);
  --shadow-md: 0 12px 32px -12px rgba(11, 21, 48, 0.18);
  --shadow-lg: 0 28px 64px -20px rgba(11, 21, 48, 0.28);
  --shadow-blue: 0 18px 40px -16px rgba(49, 143, 253, 0.5);

  /* Signature geometry */
  --ribbon-angle: 3.2deg;     /* diagonal section ribbon tilt */
  --clip-arrow:  polygon(0 0, 100% 0, 100% 86%, 50% 100%, 0 86%);        /* downward pennant (portraits) */
  --clip-parallelogram: polygon(7% 0, 100% 0, 93% 100%, 0 100%);          /* slanted sides */
  --clip-arrow-r: polygon(0 0, 84% 0, 100% 50%, 84% 100%, 0 100%);        /* right-pointing chevron */
  --clip-notch:  polygon(0 0, 100% 0, 100% 78%, 78% 100%, 0 100%);        /* cut bottom-right corner */

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in:  cubic-bezier(0.55, 0, 1, 0.45);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 160ms;
  --dur:      260ms;
  --dur-slow: 520ms;
}

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