/* Zenith design tokens — see docs/brand.md.
 *
 * Mobile mirrors these token NAMES. Security-state colours (--secure,
 * --downgraded, --danger) are defined once here on purpose: per brand.md §4
 * they are a security property, and two platforms drifting on what "not
 * encrypted" looks like is how R-SEC-8 gets violated quietly.
 *
 * Since 2026-09-08 the same is true of the PRODUCT palette: everything in the
 * "product UI" block below reaches iOS and Android through
 * scripts/gen-security-tokens.mjs as BrandColors, so a bubble or a tick is the
 * same colour on all three clients because it is one number, not three.
 *
 * Rule: --zenith-blue and --horizon-cyan NEVER carry security meaning.
 */
:root{
  /* core — from the logo */
  --zenith-blue:#1195F5;
  --zenith-blue-deep:#0B72C0;
  --zenith-blue-ink:#075A99;
  --zenith-charcoal:#383836;
  /* The mark's glyph, and text on the signature gradient in EITHER theme:
     the band does not change with the theme (brand.md §2 measures it against
     white), so neither does what sits on it. Theme-independent on purpose —
     on-primary is the primary BUTTON's ink and flips in dark. */
  --zenith-white:#FFFFFF;
  --on-gradient:#FFFFFF;

  /* atmosphere — from the campaign artwork (expressive range) */
  --zenith-midnight:#0A1526;
  --zenith-deep-space:#060E1B;
  --zenith-slate:#132239;
  --horizon-cyan:#35CFDD;
  --horizon-cyan-deep:#17A3B8;
  --nebula-violet:#7B3FE4;
  --nebula-magenta:#C13AA8;
  --ember:#E8763A;
  --zenith-gradient:linear-gradient(135deg,#060E1B 0%,#0A1526 18%,#0B72C0 48%,#7B3FE4 78%,#C13AA8 100%);

  /* light theme surfaces */
  --canvas:#F6F9FC;
  --surface:#FFFFFF;
  --surface-2:#EEF3F8;
  --line:#DDE5EC;
  /* A field's boundary: one grey that clears 3:1 on the light card and the
     dark, so a text field is visible as a control in either theme. Not a
     separator — that is --line, a hairline. Theme-independent on purpose. */
  --control-line:#7E8C9B;
  --ink:#22252A;
  --ink-muted:#5A6068;

  /* product UI — brand.md §8. Colour only here; shape and type below. */
  --bubble-mine:#E1F0FC;      /* the brand, at a whisper: mine, not "secure" */
  --bubble-theirs:#FFFFFF;
  --bubble-line:#DDE5EC;
  --tick:#5A6068;             /* transport: the bytes arrived */
  --tick-read:#1195F5;        /* a person: somebody opened it */
  --focus:#075A99;
  --control-bg:#FFFFFF;
  --chip-bg:#EEF3F8;
  --chip-on:#1195F5;
  --chip-on-ink:#FFFFFF;
  --on-primary:#FFFFFF;

  /* security states — never brand blue, never cyan */
  --secure:#1E8F63;      --secure-bg:#E4F4ED;
  --downgraded:#B36A00;  --downgraded-bg:#FBEEDC;
  --danger:#C0453C;      --danger-bg:#F9E8E6;
  --pending:#5A6068;     --pending-bg:#EDF1F4;

  /* type */
  --font-display:"Archivo","IBM Plex Sans Arabic",system-ui,sans-serif;
  --font-body:"Source Sans 3","IBM Plex Sans Arabic",system-ui,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --text-xs:12px; --text-sm:13px; --text-md:15px; --text-lg:17px;
  --text-xl:20px; --text-2xl:24px; --text-3xl:32px;

  /* shape and rhythm — brand.md §8 */
  --radius-control:8px;
  --radius-card:12px;
  --radius-bubble:14px;
  --radius-pill:999px;
  --control-h:36px;   /* pointer surfaces */
  --touch-h:44px;     /* anything a thumb hits */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px; --space-6:32px;
  --shadow-card:0 1px 2px rgba(10,21,38,.06),0 4px 14px rgba(10,21,38,.05);
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --canvas:var(--zenith-midnight);
    --surface:var(--zenith-slate);
    --surface-2:#1A2B44;
    --line:#22334D;
    --ink:#E8EAED;
    --ink-muted:#9AA2AC;
    --zenith-blue:#3FA9F7;
    --zenith-blue-deep:#6BBDF9;
    --zenith-blue-ink:#9BD1FA;
    --zenith-charcoal:#C9C9C6;
    --bubble-mine:#16334F;
    --bubble-theirs:#132239;
    --bubble-line:#22334D;
    --tick:#9AA2AC;
    --tick-read:#3FA9F7;
    --focus:#6BBDF9;
    --control-bg:#1A2B44;
    --chip-bg:#1A2B44;
    --chip-on:#3FA9F7;
    --chip-on-ink:#0A1526;
    --on-primary:#0A1526;
    --secure:#45C08A;      --secure-bg:#12271F;
    --downgraded:#E0A245;  --downgraded-bg:#2C1F13;
    --danger:#E8635B;      --danger-bg:#2E1917;
    --pending:#9AA2AC;     --pending-bg:#232830;
    --shadow-card:0 1px 2px rgba(0,0,0,.35),0 4px 16px rgba(0,0,0,.28);
  }
}

:root[data-theme="dark"]{
  --canvas:var(--zenith-midnight);
  --surface:var(--zenith-slate);
  --surface-2:#1A2B44;
  --line:#22334D;
  --ink:#E8EAED;
  --ink-muted:#9AA2AC;
  --zenith-blue:#3FA9F7;
  --zenith-blue-deep:#6BBDF9;
  --zenith-blue-ink:#9BD1FA;
  --zenith-charcoal:#C9C9C6;
  --bubble-mine:#16334F;
  --bubble-theirs:#132239;
  --bubble-line:#22334D;
  --tick:#9AA2AC;
  --tick-read:#3FA9F7;
  --focus:#6BBDF9;
  --control-bg:#1A2B44;
  --chip-bg:#1A2B44;
  --chip-on:#3FA9F7;
  --chip-on-ink:#0A1526;
  --on-primary:#0A1526;
  --secure:#45C08A;      --secure-bg:#12271F;
  --downgraded:#E0A245;  --downgraded-bg:#2C1F13;
  --danger:#E8635B;      --danger-bg:#2E1917;
  --pending:#9AA2AC;     --pending-bg:#232830;
  --shadow-card:0 1px 2px rgba(0,0,0,.35),0 4px 16px rgba(0,0,0,.28);
}

/* The brand faces, SELF-HOSTED. A secure-communications client must not
 * announce every page open to a third-party font host, so these are vendored
 * under /fonts (all four are OFL-licensed) and nothing here reaches out.
 * Archivo and Source Sans 3 are variable fonts: one file each covers every
 * weight in use. IBM Plex Sans Arabic carries the Arabic range only — Latin
 * text stays in Source Sans, and the browser picks per glyph. */
@font-face{font-family:"Archivo";font-style:normal;font-weight:500 700;font-display:swap;
  src:url(/fonts/archivo-var.woff2) format("woff2")}
@font-face{font-family:"Source Sans 3";font-style:normal;font-weight:400 600;font-display:swap;
  src:url(/fonts/source-sans-3-var.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;
  src:url(/fonts/plex-mono-400.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;
  src:url(/fonts/plex-mono-500.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans Arabic";font-style:normal;font-weight:400;font-display:swap;
  src:url(/fonts/plex-sans-arabic-400.woff2) format("woff2");
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFC}
@font-face{font-family:"IBM Plex Sans Arabic";font-style:normal;font-weight:600;font-display:swap;
  src:url(/fonts/plex-sans-arabic-600.woff2) format("woff2");
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFC}