/* Design tokens: the Aletheon palette, type, shape and motion.
 *
 * Source of truth: the aletheon.ai website (docs/design/aletheon-design.md). The product
 * wears Aletheon's brand, fixed; the client it calls for is named in words, never in colour.
 *
 * Two layers in this file:
 *   1. Brand constants (--purple, --ink, --lavender …) — the website's exact values.
 *   2. Semantic tokens (--bg, --surface, --text, --accent, --ok …) — what app.css uses.
 *      Light mode maps them onto the brand constants; dark mode (the owner kept one,
 *      2026-10-02) re-maps them onto near-neutral inks. The owner asked for less purple
 *      (2026-10-02): purple is kept for the primary button, the active place, links and focus;
 *      backgrounds, dividers, outlines and neutral status are near-neutral.
 *
 * The call console is dark in both modes; its own tokens (--console-*, --agent, --them …)
 * never change.
 */

/* Sora, self-hosted (the page policy allows fonts from this server only). OFL: OFL-Sora.txt. */
@font-face {
  font-family: "Sora";
  font-style: normal;
  font-display: swap;
  font-weight: 100 800;
  src: url("../fonts/sora-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
    U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
    U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Sora";
  font-style: normal;
  font-display: swap;
  font-weight: 100 800;
  src: url("../fonts/sora-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: light;

  /* ---- 1. Brand constants (the website's palette; nothing else is a colour) ---------- */
  --purple: #5b2192;
  --purple-deep: #491a76;
  --violet: #7341b5;
  --blue: #2b63c9;
  --lavender: #e9e0f8;
  --line: #c9c7ef;
  --mist: #f8f5ff;
  --paper: #fbfaff;
  --ink: #1b1030;
  --ink-soft: #564d6b;

  /* The call console: dark in both modes. */
  --console-bg: radial-gradient(90% 120% at 0% 0%, #2a1550 0%, #1b1030 60%);
  --console-shadow: 0 40px 80px -40px rgb(27 16 48 / 0.6);
  --console-divider: rgb(255 255 255 / 0.10);
  --agent: #b48cf2;          /* waveform while the agent speaks, progress fill, the live ring */
  --agent-label: #d3bdf8;
  --them: #8fb2f5;           /* waveform while the other side speaks, the confirmed tick */
  --them-label: #a9c4f7;
  --warn: #f2b347;           /* the mismatch circle */
  --warn-text: #f6c978;
  --error-on-dark: #e46a61;
  --error-text-on-dark: #f2a39d;
  --icon-on-dark: #c9b2f5;
  --purple-band: radial-gradient(120% 140% at 100% 0%, #7341b5 0%, #491a76 60%);
  --illustration-tile: radial-gradient(80% 80% at 30% 20%, #ffffff 0%, #e9e0f8 100%);

  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-pop: cubic-bezier(0.2, 0.7, 0.2, 1.2);

  /* ---- 2. Semantic tokens, light mode ------------------------------------------------ */
  --bg: #fafafc;                     /* the app background: near-white, barely tinted */
  --surface: #ffffff;                /* cards */
  --surface-raised: #ffffff;         /* menus, sheets, dialogs */
  --surface-sunken: #f5f4f8;         /* tiles and wells inside a white card */
  --surface-hover: #f5f4f8;
  --divider: #ecebf1;                /* rows inside a card */
  --outline: #dddbe6;                /* card rings, field borders, chips */
  --text: var(--ink);
  --text-muted: var(--ink-soft);
  --text-faint: #9a93ad;             /* placeholders and non-essential meta only */

  --accent: var(--purple);           /* primary button, selected state, active dot */
  --accent-hover: var(--purple-deep);
  --accent-soft: #f6f3fb;            /* hover/selected fill behind accent text */
  --accent-text: var(--purple);      /* links, icons */
  --on-accent: #ffffff;
  --focus-ring: var(--purple);
  --field-bg: #ffffff;
  --field-focus: var(--purple);
  --field-focus-ring: rgb(91 33 146 / 0.16);
  --desk-label: var(--blue);         /* the other side's name on a light conversation */
  --console-edge: 0 0 0 0 transparent;
  --logo-filter: none;
  --show-on-light: contents;         /* what only the light mode shows (the top bar's moon) */
  --show-on-dark: none;

  /* Status: four families, never more (guide §2.3). Blue is confirmed; there is no green. */
  --ok: var(--blue);                 /* confirmed / done / approved / sent */
  --ok-soft: #e8effb;
  --ok-text: var(--blue);
  --attn: #f2b347;                   /* a person needs to look: mismatch, follow-up, review */
  --attn-soft: #fdf0d8;
  --attn-text: #7a4b00;
  --neutral: #6e6880;                /* in progress, scheduled, voicemail, no answer */
  --neutral-soft: #f2f1f5;
  --neutral-text: #4b4558;
  --err: #b3261e;                    /* failed (technical) */
  --err-soft: #fbe9e7;
  --err-text: #8c1d18;

  /* Depth: rings, not drop shadows (guide §5). One purple lift for the selected item. */
  --ring: 0 0 0 1px var(--outline);
  --ring-selected: 0 0 0 2px var(--accent);
  --shadow-selected: 0 18px 40px -28px rgb(91 33 146 / 0.55);
  --shadow-card-lift: 0 24px 48px -28px rgb(91 33 146 / 0.55);
  --shadow-float: 0 8px 24px -16px rgb(27 16 48 / 0.35);
  --shadow-overlay: 0 40px 80px -40px rgb(27 16 48 / 0.45), 0 0 0 1px var(--outline);
  --scrim: rgb(27 24 36 / 0.36);
  --header-bg: rgb(255 255 255 / 0.85);

  /* ---- Type (guide §3) ---------------------------------------------------------------- */
  --font-sans: "Sora", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  --text-micro: 0.6875rem;  /* 11 — in-illustration chips only */
  --text-xs:   0.75rem;     /* 12 — speaker labels, pills */
  --text-sm:   0.875rem;    /* 14 — meta, labels, chips */
  --text-btn:  0.9375rem;   /* 15 — buttons, nav links, the line above a page headline */
  --text-base: 1rem;        /* 16 — body */
  --text-md:   1.125rem;    /* 18 — card titles, body large */
  --text-lg:   1.5rem;      /* 24 — a card's lead sentence (weight 300), dialog titles */
  --text-display: clamp(1.625rem, 2.2vw, 2rem); /* the one headline on every page, 26–32px (weight 300) */
  --text-stat: clamp(1.75rem, 2.4vw, 2.25rem);   /* big numbers: stage counts, results, 28–36px (weight 200) */

  --weight-thin: 200;
  --weight-light: 300;
  --weight-normal: 400;
  --weight-medium: 500;

  --leading-tight: 1.08;
  --leading-snug: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;

  /* ---- Space: the 4px scale; prefer 12, 16, 20, 24, 32, 40, 56, 80 ------------------- */
  --space-1: 0.25rem;  /*  4 */
  --space-2: 0.5rem;   /*  8 */
  --space-3: 0.75rem;  /* 12 */
  --space-4: 1rem;     /* 16 */
  --space-5: 1.25rem;  /* 20 */
  --space-6: 1.5rem;   /* 24 */
  --space-7: 2rem;     /* 32 */
  --space-8: 2.5rem;   /* 40 */
  --space-9: 3.5rem;   /* 56 */
  --space-10: 5rem;    /* 80 */

  /* ---- Shape (guide §5.1): radii shrink as they nest ------------------------------- */
  --radius-xl: 12px;     /* fields, small inner panels, list buttons */
  --radius-2xl: 16px;    /* icon tiles, bubbles, rows */
  --radius-3xl: 24px;    /* cards */
  --radius-console: 28px;
  --radius-panel: 32px;  /* large panels, sheets */
  --radius-full: 999px;  /* buttons, chips, pills, avatars, dots */

  /* ---- Motion (guide §9) ------------------------------------------------------------- */
  --duration-color: 200ms;
  --duration-state: 300ms;
  --duration-panel: 500ms;
  --duration-enter: 900ms;

  --header-h: 72px;
  --z-header: 200;
  --z-bar: 300;
  --z-drawer: 400;
  --z-modal: 500;
  --z-toast: 600;
}

/* ---- Dark mode: the ink palette (owner decision 2026-10-02) ------------------------------
 * Pages sit on a deep ink; cards are one step lighter and outlined, like the console's own
 * raised panels. Light is the default; dark applies only when the person picks it (the top
 * bar's switch or Settings; boot.js sets data-theme before first paint). */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #121117;
  --surface: #1b1a22;
  --surface-raised: #23212c;
  --surface-sunken: #16151c;
  --surface-hover: #262430;
  --divider: rgb(255 255 255 / 0.10);
  --outline: #34323f;
  --text: #f3f2f7;
  --text-muted: #b6b3c2;
  --text-faint: #85828f;

  --accent: var(--violet);
  --accent-hover: #6a35ae;
  --accent-soft: rgb(180 140 242 / 0.10);
  --accent-text: #c9b2f5;
  --on-accent: #ffffff;
  --focus-ring: #ffffff;
  --field-bg: #16151c;
  --field-focus: #b48cf2;
  --field-focus-ring: rgb(180 140 242 / 0.22);
  --desk-label: #a9c4f7;
  --console-edge: 0 0 0 1px rgb(255 255 255 / 0.08);
  --logo-filter: brightness(0) invert(1);
  --show-on-light: none;
  --show-on-dark: contents;

  --ok: #8fb2f5;
  --ok-soft: rgb(143 178 245 / 0.14);
  --ok-text: #8fb2f5;
  --attn: #f2b347;
  --attn-soft: rgb(242 179 71 / 0.14);
  --attn-text: #f6c978;
  --neutral: #a7a3b5;
  --neutral-soft: rgb(255 255 255 / 0.07);
  --neutral-text: #cfccd9;
  --err: #e46a61;
  --err-soft: rgb(228 106 97 / 0.16);
  --err-text: #f2a39d;

  --shadow-selected: 0 18px 40px -24px rgb(0 0 0 / 0.7);
  --shadow-card-lift: 0 24px 48px -24px rgb(0 0 0 / 0.7);
  --shadow-float: 0 8px 24px -12px rgb(0 0 0 / 0.6);
  --shadow-overlay: 0 40px 80px -30px rgb(0 0 0 / 0.75), 0 0 0 1px var(--outline);
  --scrim: rgb(6 6 10 / 0.62);
  --header-bg: rgb(18 17 23 / 0.85);
}