/* =============================================================================
   MailMoove — tokens.css  (Content & Design Guidelines v4.0 "Verified Dispatch")
   The single source of design truth. Loaded BEFORE app.css.

   Brand: MailMoove (DECISIONS.md D-RD-1). The v2/v3/v4 documents print "MailShift";
   that is the codebase name, not the product name, and the UI does not follow them.

   Two blocks live here:
     1. CANONICAL — the v4 token set. New and refactored components use these names.
     2. LEGACY ALIASES — the v3 token names, re-pointed at v4 values so that every
        existing rule in app.css renders in the v4 system untouched. Components move
        off these names one at a time; the block is deleted in the final cleanup
        phase. Nothing new may reference a name from block 2.
   ============================================================================= */

/* ---------- @font-face — Inter only (§9: "Inter is the only product typeface") ----------
   Self-hosted latin-subset woff2, generated from Google Fonts (OFL) via the gwfh API,
   same provenance and process as the faces it replaces. See public/fonts/README.md. */
@font-face { font-family: 'Inter'; font-weight: 400; font-style: normal; font-display: swap; src: url('/public/fonts/Inter-400.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 500; font-style: normal; font-display: swap; src: url('/public/fonts/Inter-500.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 600; font-style: normal; font-display: swap; src: url('/public/fonts/Inter-600.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 700; font-style: normal; font-display: swap; src: url('/public/fonts/Inter-700.woff2') format('woff2'); }

/* =========================== 1. CANONICAL (v4) =========================== */
:root {
  /* ---- Brand (§6.1) ---- */
  --color-brand-primary: #174ea6;
  --color-brand-primary-hover: #123f87;
  --color-brand-accent: #3b82f6;
  --color-brand-accent-soft: #e8f1ff;

  /* ---- Canvas and surfaces (§6.1) ---- */
  --color-bg-canvas: #f6f8fb;
  --color-bg-surface: #ffffff;
  --color-bg-elevated: #ffffff;
  --color-bg-subtle: #f1f4f8;
  --color-bg-selected: #eaf2ff;
  --color-bg-disabled: #eef1f4;

  /* ---- Borders (§6.1) ----
     The three greys below are §6.1's, and they are container boundaries: a card edge, a
     panel edge, a table rule. WCAG 1.4.11 does not ask anything of those, and at 1.33 and
     1.78 against white they could not meet it anyway.

     What 1.4.11 DOES ask 3:1 of is the boundary that tells you where a control is — a text
     field, a checkbox row, a switch track. Those cannot use the tokens above, so
     --color-border-control exists for them (D-RD-5). 3.57 against the worst ground it is
     drawn on, so it keeps its margin on canvas and selected backgrounds too, not just white.

     The hover value is DARKER than the resting one on purpose. The old hover reached for
     --color-border-strong, which is lighter; once resting is #767f8c that would have made
     pointing at a control reduce its contrast. */
  --color-border-default: #d9e0e8;
  --color-border-subtle: #e7ebf0;
  --color-border-strong: #b8c3d1;
  --color-border-control: #767f8c;
  --color-border-control-hover: #5d6673;
  --color-border-focus: #3b82f6;

  /* ---- Text (§6.1) ---- */
  --color-text-primary: #172033;
  --color-text-secondary: #4d5a6b;
  /* §6.1 specifies #718096, which is 4.02 on white and 3.77 on the canvas — below the 4.5
     that §60 also mandates, on every background this app has. Darkened to the first value on
     the same hue that clears 4.5 everywhere (4.64 worst, 5.26 on white). #667486 was the
     first candidate and is not enough: it passes on white at 4.76 and fails the canvas at
     4.48. The token carried no functional text when this changed, so nothing moved visually;
     the point is that it is now safe for whoever reaches for it next (D-RD-5). */
  --color-text-muted: #5f6d81;
  --color-text-disabled: #9aa5b1;
  --color-text-inverse: #ffffff;

  /* ---- Inverted surfaces ----
     §8 defines dark mode as a semantic remap, not an inversion, and leaves the values
     open. These are that remap, scoped for now to the deliberately dark marketing
     sections; a future prefers-color-scheme block reuses them for the whole app.
     --color-text-inverse-muted exists because the single inverse token in §6.1 cannot
     carry secondary text on a dark ground at AA. */
  --color-bg-inverse: #172033;
  --color-bg-inverse-elevated: #202c44;
  --color-border-inverse: #2e3a52;
  --color-text-inverse-muted: #a3b0c2;
  --color-bg-accent-on-inverse: rgb(59 130 246 / 0.14); /* accent wash on a dark ground */
  /* §8: dark mode maps the brand accent to "an accessible lightened blue accent" rather than
     reusing it. The 6.1 accent is 4.42:1 on --color-bg-inverse, just under AA; this is 6.40:1. */
  --color-brand-accent-on-inverse: #60a5fa;

  /* ---- Status (§7) — never colour alone: icon + text + colour ---- */
  --color-status-success: #15803d;
  --color-status-success-bg: #ecfdf3;
  --color-status-success-border: #a7e3bc;
  --color-status-warning: #a16207;
  --color-status-warning-bg: #fff9e8;
  --color-status-warning-border: #f3d98b;
  --color-status-error: #b42318;
  --color-status-error-bg: #fff1f0;
  --color-status-error-border: #f2b8b5;
  --color-status-error-hover: #8f1d14; /* pressed state for a destructive button (§22) */
  --color-status-info: #175cd3;
  --color-status-info-bg: #eff6ff;
  --color-status-info-border: #b8d4ff;

  /* ---- Typeface (§9) ---- */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* ---- Type scale (§10) ----
     Held as size/line/weight triplets rather than a `font:` shorthand on purpose: the
     shorthand resets font-variant-numeric, and tabular numerals are global here because
     counts and sizes must not reflow while they tick. */
  --type-display-size: 48px;  --type-display-line: 56px;  --type-display-weight: 700;
  --type-h1-size: 32px;       --type-h1-line: 40px;       --type-h1-weight: 700;
  --type-h2-size: 24px;       --type-h2-line: 32px;       --type-h2-weight: 700;
  --type-h3-size: 20px;       --type-h3-line: 28px;       --type-h3-weight: 600;
  --type-h4-size: 18px;       --type-h4-line: 24px;       --type-h4-weight: 600;
  --type-body-size: 16px;     --type-body-line: 24px;     --type-body-weight: 400;
  --type-body-medium-weight: 500;
  --type-small-size: 14px;    --type-small-line: 20px;    --type-small-weight: 400;
  --type-small-medium-weight: 500;
  --type-caption-size: 12px;  --type-caption-line: 16px;  --type-caption-weight: 400;
  --type-caption-medium-weight: 500;

  /* ---- Spacing (§12) — hybrid 4/8, 8 dominant ---- */
  --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;

  /* ---- Shape (§13) — radius carries hierarchy; not everything is a pill ---- */
  --radius-small: 6px;
  --radius-control: 8px;
  --radius-card: 12px;
  --radius-panel: 12px;
  --radius-large: 16px;
  --radius-pill: 999px;

  /* ---- Elevation (§14) — border-first; these are the only shadows ---- */
  --shadow-card: 0 1px 2px rgb(16 24 40 / 0.04);
  --shadow-popover: 0 8px 24px rgb(16 24 40 / 0.10);
  --shadow-dialog: 0 16px 40px rgb(16 24 40 / 0.16);
  --focus-ring: 0 0 0 3px rgb(59 130 246 / 0.20);
  --focus-ring-error: 0 0 0 3px rgb(180 35 24 / 0.18); /* same halo, error hue (§37) */
  --scrim: rgb(16 24 40 / 0.48);

  /* ---- Containers (§15.1) — hybrid; not every page shares one width ---- */
  --container-reading: 720px;
  --container-form: 880px;
  --container-workflow: 1120px;
  --container-dashboard: 1280px;
  --container-wide: 1440px;

  /* ---- Grid gutters (§16) ---- */
  --gutter-desktop: 24px;
  --gutter-tablet: 20px;
  --gutter-mobile: 16px;

  /* ---- Control heights (§24) ---- */
  --control-height: 44px;
  --control-height-compact: 40px;
  /* §22 gives marketing a larger call to action than the 44px default; 48 keeps the 8px rhythm. */
  --control-height-large: 48px;

  /* ---- Motion (§55) ---- */
  --duration-instant: 0ms;
  --duration-fast: 120ms;
  --duration-normal: 200ms;
  --duration-slow: 300ms;
  --duration-emphasis: 450ms;
  --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);

  /* ---- Layers (§57) — semantic, so no rule ever invents a 9999 ---- */
  --layer-base: 0;
  --layer-sticky: 10;
  --layer-popover: 20;
  --layer-modal: 30;
  --layer-critical: 40;
  --layer-notification: 50;
}

/* ====================== 2. LEGACY ALIASES (v3 → v4) ======================
   Delete in the cleanup phase, once no rule references a name below. Do not add to
   this block, and do not reference it from anything written from here on. */
:root {
  --color-ink: var(--color-bg-inverse);
  --color-ink-soft: var(--color-bg-inverse-elevated);
  --color-ink-line: var(--color-border-inverse);
  --color-paper: var(--color-bg-canvas);
  --color-surface: var(--color-bg-surface);
  --color-text: var(--color-text-primary);
  --color-text-2: var(--color-text-secondary);
  --color-on-dark: var(--color-text-inverse);
  --color-on-dark-2: var(--color-text-inverse-muted);
  --color-line: var(--color-border-default);
  --color-fill: var(--color-bg-subtle);

  /* The v3 "signal" green did three jobs with one colour. v4 splits them: primary
     identity and action, a hover/pressed step, and an accent for progress and focus. */
  --color-signal: var(--color-brand-primary);
  --color-signal-deep: var(--color-brand-primary-hover);
  --color-signal-glow: var(--color-brand-accent);
  --color-signal-tint: var(--color-brand-accent-soft);
  --color-on-signal: var(--color-text-inverse);

  --color-warn-text: var(--color-status-warning);
  --color-warn-solid: var(--color-status-warning);
  --color-warn-tint: var(--color-status-warning-bg);
  --color-danger-text: var(--color-status-error);
  --color-danger-solid: var(--color-status-error);
  --color-danger-tint: var(--color-status-error-bg);

  --glow-signal: var(--focus-ring);
  --shadow-1: var(--shadow-card);
  --shadow-2: var(--shadow-popover);

  --font-display: var(--font-sans);
  --font-body: var(--font-sans);
  --font-mono: var(--font-sans);

  --r-ctl: var(--radius-control);
  --r-card: var(--radius-card);
  --r-chip: var(--radius-pill);
  --r-modal: var(--radius-large);
  --r-tile: var(--radius-large);

  --ease: var(--ease-standard);
  --t-hover: var(--duration-fast);
  --t-reveal: var(--duration-normal);
  --t-modal: var(--duration-slow);
}