/* Monnai prototype — design tokens
   Source: Monnai brand book, September 2022 (Eva's brand identity file).
   Brand colors: Monnai Blue #5100FF, Deep Black #000000, Clear White #FFFFFF,
   secondary Monnai Yellow #FB9D00 and Monnai Pink #FF00AA (highlighters).
   Brand typeface: Rockford Sans (licensed, files not yet supplied — see QUESTIONS.md Q2).
   Stand-in: Outfit (SIL Open Font License), stored locally in assets/fonts.
   Rule: no color, size or spacing in a page that is not one of these tokens. */

@font-face { font-family: "Outfit"; font-weight: 300; font-style: normal; font-display: swap; src: url("/assets/fonts/outfit-300.woff2") format("woff2"); }
@font-face { font-family: "Outfit"; font-weight: 400; font-style: normal; font-display: swap; src: url("/assets/fonts/outfit-400.woff2") format("woff2"); }
@font-face { font-family: "Outfit"; font-weight: 500; font-style: normal; font-display: swap; src: url("/assets/fonts/outfit-500.woff2") format("woff2"); }
@font-face { font-family: "Outfit"; font-weight: 600; font-style: normal; font-display: swap; src: url("/assets/fonts/outfit-600.woff2") format("woff2"); }
@font-face { font-family: "Outfit"; font-weight: 700; font-style: normal; font-display: swap; src: url("/assets/fonts/outfit-700.woff2") format("woff2"); }

:root {
  /* Color — text */
  --c-ink: #000000;            /* Deep Black: headings, body */
  --c-ink-2: #2E2E38;          /* secondary ink: long body copy, 13.9:1 on white */
  --c-muted: #5B5B6B;          /* captions, labels: 6.6:1 on white */

  /* Color — surfaces and lines */
  --c-ground: #FFFFFF;         /* Clear White */
  --c-panel: #F4F4F7;          /* soft panel: 1.1 step off white */
  --c-line: #DCDCE4;           /* hairlines, table rules */
  --c-line-strong: #858596;    /* diagram strokes, form borders: 3.6:1 on white, 3.3:1 on panel */

  /* Color — the one accent, used for meaning */
  --c-accent: #5100FF;         /* Monnai Blue: the signal that changes a decision, primary button. 7.5:1 white text */
  --c-accent-ink: #3F00C7;     /* hover / pressed state of the accent */
  --c-accent-soft: #EEE8FF;    /* tint behind accent elements */
  --c-on-accent: #FFFFFF;

  /* Color — status, diagrams only (never text on white) */
  --c-status-approve: #5100FF; /* approve / genuine — same as accent so meaning is single */
  --c-status-review: #FB9D00;  /* Monnai Yellow: low confidence / manual review */
  --c-status-decline: #FF00AA; /* Monnai Pink: decline / risk */
  --c-status-neutral: #A9A9B8; /* not-yet-assessed dots; always labeled */

  /* Color — on dark (footer) */
  --c-on-ink: #FFFFFF;
  --c-on-ink-muted: #C9C9D6;   /* 11.6:1 on black */
  --c-ink-line: #33333F;
  --c-ink-line-strong: #6B6B7B;

  /* Color — homepage v5 (27 Oct): the deep band behind dark sections, two soft tints for light panels */
  --c-ink-deep: #07051A;       /* deep violet-black: AI band, banner, Monnai card; white text 19.6:1 */
  --c-tint-violet: #F6F2FF;    /* soft gradient panel, top */
  --c-tint-rose: #FFF4FA;      /* soft gradient panel, bottom */
  --gradient-soft: linear-gradient(180deg, var(--c-tint-violet) 0%, var(--c-tint-rose) 100%);
  --gradient-text-warm: linear-gradient(90deg, #FFD08A 0%, #FFB3E1 50%, #D9CCFF 100%); /* emphasis on the gradient card: 11:1 → 9:1 on #1A0B4A */
  --sec5-y: clamp(2.5rem, 1.5rem + 2.4vw, 4rem); /* homepage blocks, 40 → 59 at 1440. v8.9 (Eva, 29 Oct: less scrolling); clamp(3rem, 1.75rem + 3.5vw, 5.25rem) since v8.8; clamp(5rem, 3rem + 6.5vw, 10rem) before */
  /* Speed streaks behind "in milliseconds." (hero, Eva 27 Oct night): brand pink → blue, the tail fading out on the left */
  --gradient-speed: linear-gradient(90deg, rgba(248, 27, 105, 0) 0%, rgba(248, 27, 105, 0.5) 55%, rgba(81, 0, 255, 0.95) 100%);
  --glow-speed: radial-gradient(closest-side, rgba(255, 0, 170, 0.2), rgba(255, 0, 170, 0));
  /* v6 (27 Oct, night) — the three layers of "How it works", on the deep band (all above 7:1 on #07051A) */
  --c-layer-observe: #8FB0FF;
  --c-layer-infer: #C9A6FF;
  --c-layer-decide: #FF8FC4;
  /* v7 (28 Oct) — the threat bar in "Why now": blue at the base, pink at the tip (the risk grows) */
  --gradient-threat: linear-gradient(90deg, #5100FF 0%, #A60DB3 55%, #F81B69 100%);
  /* v7.2 (28 Oct) — kinds of business on the Customers page, from the brand gradient (white text 7.5, 6.3 and 5.2:1) */
  --c-kind-bank: #5100FF;
  --c-kind-lender: #A60DB3;
  --c-kind-platform: #D3175A;

  /* Color — form error text (AA on white) */
  --c-error-ink: #B0006F;

  /* Color — brand palette (brand book 2022) for illustrations and accents */
  --c-brand-blue: #5100FF;
  --c-brand-yellow: #FB9D00;
  --c-brand-pink: #FF00AA;
  --c-violet-on-dark: #8F66FF;  /* blue family, 5.5:1 on black */
  /* Brand gradient, sampled from the brand book logo (yellow → pink → blue, horizontal) */
  --g-1: #F99E1C; --g-2: #F95A44; --g-3: #F81B69; --g-4: #A60DB3; --g-5: #5100FF;
  --gradient-brand: linear-gradient(90deg, var(--g-1) 0%, var(--g-2) 25%, var(--g-3) 50%, var(--g-4) 75%, var(--g-5) 100%);
  /* Display text accents: only the stops that pass 3:1 for large text */
  --gradient-text-light: linear-gradient(90deg, #F81B69 0%, #A60DB3 45%, #5100FF 100%); /* on white: 3.9 → 7.5 */
  --gradient-text-dark: linear-gradient(90deg, #F99E1C 0%, #F81B69 55%, #8F66FF 100%);  /* on black: 9.9 → 5.4 → 5.5 */
  /* Risk scale (data encoding, not decoration): low → review → high */
  --gradient-risk: linear-gradient(90deg, #5100FF 0%, #8F66FF 30%, #FB9D00 60%, #FF00AA 100%);

  /* Color — risk and caution states (UI text and icons, AA on white) */
  --c-risk-ink: #B5007A;       /* 5.6:1 on white */
  --c-risk-soft: #FFE6F5;
  --c-warn-ink: #8A4B00;       /* 6.6:1 on white */
  --c-warn-soft: #FFF1D9;
  --c-map-land: #CFCFDA;       /* decorative dots */
  --c-map-live: #5100FF;        /* coverage map: live customers */
  --c-map-verify: #9B7BFF;      /* coverage map: identity checks against official records */
  --c-map-signals: #CDBCFF;     /* coverage map: phone, email and footprint signals (worldwide) */

  /* Color — review mode markers (prototype only) */
  --c-gap-bg: #FFF4DE;
  --c-gap-ink: #6B3F00;        /* 8.9:1 on --c-gap-bg */
  --c-gap-line: #FB9D00;

  /* Color — logo gradient (logo file only) */
  --gradient-logo: linear-gradient(90deg, #FB9D00 0%, #FF00AA 50%, #5100FF 100%);

  /* Typography */
  --font-sans: "Rockford Sans", "Outfit", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --fs-display: clamp(2.5rem, 1.6rem + 3.6vw, 4.5rem);  /* 40 → 72 */
  --fs-hero: clamp(2.5rem, 1.45rem + 3.2vw, 4.25rem);   /* 40 → 68: homepage H1 */
  --fs-display-2: clamp(2rem, 1.35rem + 2.1vw, 3.25rem); /* 32 → 52: section statements; v8.9 (Eva, 29 Oct: less scrolling) was clamp(2.125rem, 1.4rem + 2.6vw, 3.75rem), 34 → 60 */
  --fs-figure: clamp(2.5rem, 1.6rem + 3vw, 4.5rem);     /* 40 → 72: proof numbers */
  --fs-h1: clamp(2.25rem, 1.6rem + 2.6vw, 3.5rem);      /* 36 → 56 */
  --fs-h2: clamp(1.75rem, 1.35rem + 1.6vw, 2.5rem);     /* 28 → 40 */
  --fs-h3: clamp(1.375rem, 1.2rem + 0.7vw, 1.75rem);    /* 22 → 28 */
  --fs-h4: 1.1875rem;                                    /* 19 */
  --fs-lead: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem); /* 18 → 21 */
  --fs-body: 1.0625rem;                                  /* 17 */
  --fs-small: 0.9375rem;                                 /* 15 */
  --fs-micro: 0.8125rem;                                 /* 13 — diagram labels only */
  --fs-mono: 0.875rem;                                   /* 14 */

  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 600;
  --fw-heavy: 700;

  --lh-tight: 1.08;
  --lh-heading: 1.18;
  --lh-body: 1.6;

  /* Spacing (4 px base) */
  --s-1: 0.25rem;  /* 4 */
  --s-2: 0.5rem;   /* 8 */
  --s-3: 0.75rem;  /* 12 */
  --s-4: 1rem;     /* 16 */
  --s-5: 1.5rem;   /* 24 */
  --s-6: 2rem;     /* 32 */
  --s-7: 3rem;     /* 48 */
  --s-8: 4rem;     /* 64 */
  --s-9: 6rem;     /* 96 */
  --s-10: 8rem;    /* 128 */
  --section-y: clamp(2.25rem, 1.25rem + 2.5vw, 3.75rem); /* vertical rhythm between sections, 36 → 56 at 1440. v8.9; clamp(2.5rem, 1.5rem + 3vw, 4.5rem) since v8.8; clamp(4rem, 2.5rem + 6vw, 8rem) before */
  --gutter: clamp(1rem, 0.5rem + 2.5vw, 2.5rem); /* page side padding: 16 → 40 */

  /* Radii — brand book: rounded edges */
  --r-1: 4px;
  --r-2: 8px;
  --r-3: 14px;
  --r-pill: 999px;

  /* Lines */
  --stroke-hair: 1px;
  --stroke-diagram: 1.5px;
  --stroke-focus: 3px;

  /* The one shadow (menus and floating panels only) */
  --shadow-float: 0 18px 48px -12px rgba(10, 10, 30, 0.22);

  /* Widths */
  --w-read: 68ch;
  --w-page: 1200px;
  --w-wide: 1360px;

  /* Motion */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur-1: 160ms;
  --dur-2: 320ms;
  --dur-3: 700ms;

  /* Layers */
  --z-header: 50;
  --z-menu: 60;
  --z-review: 70;

  /* Breakpoints (documented here; media queries use these literal values)
     --bp-sm: 390px  --bp-md: 768px  --bp-lg: 1024px  --bp-xl: 1280px  --bp-xxl: 1440px */
}