/* ============================================================
   CALL MARLIN — FOUNDATIONS
   Layer 1: primitives (verbatim from 05_Design_System/design-tokens.css)
   Layer 2: semantic tokens (what components are allowed to reference)
   Layer 3: dark-surface context overrides

   RULE: components reference ONLY layer 2. If a component needs a raw
   primitive, that is a signal a semantic token is missing — add it here.
   ============================================================ */

:root {
  /* ---------- Layer 1: primitives — supplied palette, do not extend with stray hex ---------- */
  --cm-navy: #081F38;
  --cm-navy-raised: #0D2A4A;
  --cm-blue: #0066FF;
  --cm-blue-hover: #0052CC;
  --cm-aqua: #00C8F0;
  --cm-ice: #E6F4FF;
  --cm-surface: #F7FAFD;
  --cm-white: #FFFFFF;
  --cm-muted: #4E647B;
  --cm-text-on-dark-secondary: #B7C9DB;
  --cm-border: #D5E2EE;
  --cm-control-border: #6B8095;
  --cm-success: #067647;
  --cm-success-surface: #ECFDF3;
  --cm-warning: #8A4B00;
  --cm-warning-surface: #FFF4E5;
  --cm-error: #B42318;
  --cm-error-surface: #FEF3F2;

  /* Derived primitives. Added because the supplied palette has no mid-navy
     for dark-surface hairlines or a pressed-blue. Kept in the navy/blue ramp. */
  --cm-navy-deep: #051526;     /* below-navy, footer base + dark page ends */
  --cm-navy-line: #1C3A5C;     /* hairline on navy; decorative only        */
  /* Visible control edge on navy. Measured 3.96:1 on --cm-navy and 3.46:1
     on --cm-navy-raised, so it clears the 3:1 non-text threshold on BOTH
     dark surfaces. It was #40607F, which measured only 2.53:1 and 2.21:1
     and therefore failed — every secondary button and field edge inside a
     navy section was short. Do not darken this below #52769A (3.50/3.05);
     both surfaces have to pass, and the raised navy is the binding one. */
  --cm-navy-line-strong: #5A7FA3;
  --cm-blue-pressed: #0041A3;
  --cm-aqua-dim: #0A7E99;      /* aqua ramp, dark enough for text on white */

  /* ---------- Layer 2: semantic — colour ---------- */
  /* text */
  --text-primary: var(--cm-navy);
  --text-secondary: var(--cm-muted);
  --text-inverse: var(--cm-white);
  --text-link: var(--cm-blue);
  --text-link-hover: var(--cm-blue-hover);
  --text-on-accent: var(--cm-white);

  /* surface */
  --surface-default: var(--cm-white);
  --surface-subtle: var(--cm-surface);
  --surface-selected: var(--cm-ice);
  --surface-inverse: var(--cm-navy);
  --surface-inverse-raised: var(--cm-navy-raised);
  --surface-inverse-deep: var(--cm-navy-deep);

  /* action */
  --action-primary: var(--cm-blue);
  --action-primary-hover: var(--cm-blue-hover);
  --action-primary-pressed: var(--cm-blue-pressed);
  --action-primary-label: var(--cm-white);
  --action-secondary-label: var(--cm-navy);
  --action-secondary-border: var(--cm-control-border);
  --action-disabled-surface: var(--cm-border);
  --action-disabled-label: var(--cm-muted);

  /* border — "divider" is decorative, "control" is an essential boundary.
     Never use divider as the only visible edge of an input: #D5E2EE on white
     measures 1.32:1, far below the 3:1 non-text minimum. That row is absent
     from the supplied contrast-audit.csv; the figure here is computed with
     the same method, which reproduces all nine audited rows exactly. */
  --border-divider: var(--cm-border);
  --border-control: var(--cm-control-border);
  --border-control-hover: var(--cm-navy);
  --border-strong: var(--cm-navy);

  /* focus — validated against white, --surface-subtle, ice and navy */
  --focus-ring: var(--cm-blue);
  --focus-ring-inverse: var(--cm-aqua);
  --focus-ring-width: 3px;
  --focus-ring-offset: 2px;

  /* status — always paired with an icon + text label, never colour alone */
  --status-success-fg: var(--cm-success);
  --status-success-bg: var(--cm-success-surface);
  --status-warning-fg: var(--cm-warning);
  --status-warning-bg: var(--cm-warning-surface);
  --status-error-fg: var(--cm-error);
  --status-error-bg: var(--cm-error-surface);
  --status-neutral-fg: var(--cm-muted);
  --status-neutral-bg: var(--cm-surface);
  --status-progress-fg: var(--cm-blue-hover);
  --status-progress-bg: var(--cm-ice);

  /* accent — aqua is an accent on navy only. Use --accent-on-light for
     any aqua-family element that must sit on white. */
  --accent-on-dark: var(--cm-aqua);
  --accent-on-light: var(--cm-aqua-dim);

  /* ---------- Layer 2: semantic — type ---------- */
  --font-heading: "Manrope", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-numeric: "Inter", system-ui, sans-serif;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extrabold: 800;

  /* Scale from master prompt §5. Fluid between the 390px and 1440px frames so the
     1024 intermediate and the 320/1920 stress tests resolve without jumps. */
  --type-hero-size: clamp(2.5rem, 1.613rem + 3.63vw, 4rem);      /* 40 → 64 */
  --type-hero-lh: 1.0625;
  --type-h2-size: clamp(1.875rem, 1.506rem + 1.51vw, 2.5rem);    /* 30 → 40 */
  --type-h2-lh: 1.2;
  --type-h3-size: clamp(1.375rem, 1.301rem + 0.30vw, 1.5rem);    /* 22 → 24 */
  --type-h3-lh: 1.333;
  --type-lead-size: clamp(1.125rem, 1.051rem + 0.30vw, 1.25rem); /* 18 → 20 */
  --type-lead-lh: 1.5;
  --type-body-size: 1rem;                                        /* 16      */
  --type-body-lh: 1.625;
  --type-button-size: clamp(0.9375rem, 1rem - 0.06vw, 1rem);     /* 16 → 15 */
  --type-button-lh: 1.333;
  /* Smallest permitted size. Essential instructions never use it — master prompt §5. */
  --type-meta-size: 0.875rem;
  --type-meta-lh: 1.5;

  --measure-prose: 66ch;   /* target 60–72 characters */
  --measure-lead: 48ch;

  /* ---------- Layer 2: semantic — space, grid, shape ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;

  --content-max: 1200px;
  --grid-gutter: 24px;
  --page-gutter: 20px;
  --section-pad-y: 56px;                /* mobile start value */
  --nav-height: 72px;

  --radius-control: 12px;
  --radius-card: 20px;
  --radius-panel: 28px;
  --radius-pill: 999px;                 /* reserved: chips, avatars, round buttons */
  --radius-none: 0px;                   /* ledger rows — rule-separated, not floating */

  --shadow-card: 0 12px 40px rgba(8, 31, 56, 0.08);
  --shadow-raised: 0 2px 8px rgba(8, 31, 56, 0.06);
  --shadow-overlay: 0 24px 64px rgba(8, 31, 56, 0.18);

  /* ---------- Layer 2: semantic — motion ----------
     One shared system. Components reference these names; no component
     declares its own duration or curve, and nothing uses `transition: all`.
     Durations are banded by what is moving, so feedback stays quicker than
     a panel change and a panel change stays quicker than a page reveal. */
  --motion-feedback: 140ms;   /* button press, selection, hover      120–180 */
  --motion-crossfade: 200ms;  /* tab and scenario swap               180–220 */
  --motion-panel: 260ms;      /* panel and result transition         220–300 */
  --motion-reveal: 250ms;     /* optional section reveal, once only          */
  --motion-menu: 200ms;       /* mobile menu open and close                  */
  --motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --motion-shift: 7px;        /* paired with a fade on panel changes   6–8px */
  --motion-reveal-shift: 12px;/* maximum travel for a section reveal         */

  /* Retained so existing rules keep working; both map onto the new bands. */
  --motion-fast: var(--motion-feedback);
  --motion-standard: var(--motion-crossfade);

  /* ---------- Target sizes ---------- */
  /* 44px is THIS PROJECT'S target, not the WCAG 2.2 AA minimum (which is 24px
     for 2.5.8 Target Size (Minimum)). Do not relabel it. */
  --target-min: 44px;
}

@media (min-width: 768px) {
  :root {
    --page-gutter: 32px;
    --section-pad-y: 96px;
    --nav-height: 80px;
  }
}

/* ---------- Layer 3: surface context ----------
   Put class="on-dark" on any navy container. Components then resolve the
   same semantic names to dark-appropriate values without bespoke CSS.

   class="on-light" does the reverse: it restores the light values for a
   light island nested inside a dark section — a white result card on the
   navy hero, for example. Without it such a card inherits the dark
   context's --surface-default (navy) and disappears. Always reach for
   .on-light rather than hard-coding --cm-white in a component. */
.on-light {
  --text-primary: var(--cm-navy);
  --text-secondary: var(--cm-muted);
  --text-link: var(--cm-blue);
  --text-link-hover: var(--cm-blue-hover);
  --surface-default: var(--cm-white);
  --surface-subtle: var(--cm-surface);
  --surface-selected: var(--cm-ice);
  --border-divider: var(--cm-border);
  --border-control: var(--cm-control-border);
  --border-control-hover: var(--cm-navy);
  --border-strong: var(--cm-navy);
  --focus-ring: var(--cm-blue);
  --action-secondary-label: var(--cm-navy);
  --action-secondary-border: var(--cm-control-border);
  --action-disabled-surface: var(--cm-border);
  --action-disabled-label: var(--cm-muted);
  --accent-on-light: var(--cm-aqua-dim);
  --status-success-fg: var(--cm-success);
  --status-success-bg: var(--cm-success-surface);
  --status-warning-fg: var(--cm-warning);
  --status-warning-bg: var(--cm-warning-surface);
  --status-error-fg: var(--cm-error);
  --status-error-bg: var(--cm-error-surface);
  --status-neutral-fg: var(--cm-muted);
  --status-neutral-bg: var(--cm-surface);
  --status-progress-fg: var(--cm-blue-hover);
  --status-progress-bg: var(--cm-ice);
}

/* Ice is a third surface, and two tokens are too light on it. Measured:
   --text-link #0066FF on #E6F4FF is 4.32:1 and --accent-on-light #0A7E99 is
   4.21:1 — both below the 4.5:1 ordinary-text threshold, though both pass on
   white and on --surface-subtle. This is a real occurrence, not a theoretical
   one: the industry pages render a link inside .section--ice.
   Applied to .section--ice automatically, and available as .on-ice for any
   other element given an ice or --surface-selected background. */
.section--ice,
.on-ice {
  --text-link: var(--cm-blue-hover);        /* 6.09:1 on ice */
  --text-link-hover: var(--cm-blue-pressed);/* 8.21:1 on ice */
  --accent-on-light: #0A6D85;               /* 5.30:1 on ice */
}

.on-dark {
  --text-primary: var(--cm-white);
  --text-secondary: var(--cm-text-on-dark-secondary);
  --text-link: var(--cm-aqua);
  --text-link-hover: var(--cm-white);
  --surface-default: var(--cm-navy);
  --surface-subtle: var(--cm-navy-raised);
  --surface-selected: var(--cm-navy-raised);
  --border-divider: var(--cm-navy-line);
  --border-control: var(--cm-navy-line-strong);
  --border-control-hover: var(--cm-aqua);
  --border-strong: var(--cm-text-on-dark-secondary);
  --focus-ring: var(--cm-aqua);
  --action-secondary-label: var(--cm-white);
  --action-secondary-border: var(--cm-navy-line-strong);
  --action-disabled-surface: var(--cm-navy-line);
  --action-disabled-label: var(--cm-text-on-dark-secondary);
  --accent-on-light: var(--cm-aqua);
  /* Status foregrounds from the light palette are too dark on navy.
     These are the same hues lifted into the on-navy range. */
  --status-success-fg: #4ADE9B;
  --status-success-bg: rgba(74, 222, 155, 0.12);
  --status-warning-fg: #FFC062;
  --status-warning-bg: rgba(255, 192, 98, 0.14);
  --status-error-fg: #FF9B90;
  --status-error-bg: rgba(255, 155, 144, 0.14);
  --status-neutral-fg: var(--cm-text-on-dark-secondary);
  --status-neutral-bg: rgba(183, 201, 219, 0.10);
  --status-progress-fg: var(--cm-aqua);
  --status-progress-bg: rgba(0, 200, 240, 0.12);
}