/* =========================================================================
   AG design tokens — "Cinema" edition, no build step.

   Dark is the primary theme: deep blue-black (never pure #000 — OLED smear),
   frosted-glass chrome, a warm gold accent with a real gradient, and two slow
   ambient light fields behind everything. Light is warm paper with a deep
   violet accent, same geometry, same glass.

   A theme swap is still a variable swap. Driven by prefers-color-scheme AND an
   explicit data-theme attribute on <html>; the manual choice wins both ways.
   Every colour in app.css comes from here — no raw hex outside this file.
   ========================================================================= */

:root {
  /* ---- Light: warm paper + violet -------------------------------------- */
  --bg: #f7f5f0;
  --surface: #efece5;
  --elevated: #ffffff;
  --text: #17161a;
  --muted: #6b6870;

  /* --hairline is too light to carry a form border legibly (fails 3:1), so
     inputs use --control and decorative dividers use --hairline. */
  --hairline: rgb(23 22 26 / 0.09);
  --control: #8a868f;

  --accent: #5b3df5;
  --accent-2: #8b5cf6;
  --accent-soft: rgb(91 61 245 / 0.10);
  --accent-ink: #4a2fd1;         /* accent as text on light surfaces (≥4.5:1) */
  --on-accent: #ffffff;
  --accent-grad: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
  --accent-glow: 0 10px 30px -10px rgb(91 61 245 / 0.55);

  --danger: #c0392b;
  --warn: #8a5a00;
  --ok: #157a4a;
  --info: #2457c5;

  /* Glass chrome: header, tab bar, composer. */
  --glass: rgb(255 255 255 / 0.72);
  --glass-strong: rgb(255 255 255 / 0.88);
  --glass-border: rgb(23 22 26 / 0.08);
  --blur: 18px;

  /* Bubbles */
  --bubble-them: #ffffff;
  --bubble-them-border: rgb(23 22 26 / 0.08);

  /* Ambient light fields (page background) */
  --aurora-1: rgb(139 92 246 / 0.22);
  --aurora-2: rgb(236 178 96 / 0.20);
  --aurora-3: rgb(56 189 248 / 0.12);

  /* Scrim for lightbox / overlays */
  --scrim: rgb(10 10 14 / 0.86);

  /* ---- Scale --------------------------------------------------------- */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;

  --r-sm: 10px;
  --r-input: 14px;
  --r: 18px;
  --r-lg: 22px;
  --r-xl: 28px;
  --r-pill: 980px;

  --ic: 22px;         /* default icon box */
  --ic-sm: 18px;
  --ic-lg: 28px;

  --elev: 0 1px 2px rgb(23 22 26 / 0.04), 0 10px 30px -12px rgb(23 22 26 / 0.18);
  --elev-lift: 0 2px 6px rgb(23 22 26 / 0.06), 0 30px 70px -20px rgb(23 22 26 / 0.30);
  --elev-glow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent);

  --ff: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI",
          system-ui, "Noto Sans Arabic", "Geeza Pro", Tahoma, sans-serif;
  --ff-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  /* Expo-out: fast start, long settle. Reads as "physical" on a phone. */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.55, 0, 1, 0.45);
  --t-fast: 150ms;
  --t: 260ms;
  --t-slow: 420ms;

  --tabbar-h: 60px;
  --container: 720px;
  color-scheme: light;
}

/* ---- Dark: blue-black + gold -------------------------------------------- */
:root[data-theme="dark"] {
  --bg: #0b0b10;
  --surface: #14141b;
  --elevated: #1a1a23;
  --text: #f3f2f7;
  --muted: #a3a1ad;
  --hairline: rgb(255 255 255 / 0.08);
  --control: #7d7b87;

  --accent: #e2b656;
  --accent-2: #c9963a;
  --accent-soft: rgb(226 182 86 / 0.14);
  --accent-ink: #f0c96a;
  --on-accent: #17130a;
  --accent-grad: linear-gradient(135deg, #f0c96a 0%, #d9a83f 55%, #b8862c 100%);
  --accent-glow: 0 12px 34px -12px rgb(226 182 86 / 0.55);

  --danger: #ff6b63;
  --warn: #f2c14e;
  --ok: #5bd88a;
  --info: #86a9ff;

  --glass: rgb(20 20 27 / 0.66);
  --glass-strong: rgb(20 20 27 / 0.86);
  --glass-border: rgb(255 255 255 / 0.07);

  --bubble-them: rgb(255 255 255 / 0.06);
  --bubble-them-border: rgb(255 255 255 / 0.08);

  --aurora-1: rgb(226 182 86 / 0.16);
  --aurora-2: rgb(120 72 255 / 0.20);
  --aurora-3: rgb(38 130 190 / 0.12);

  --scrim: rgb(5 5 8 / 0.9);

  /* A soft shadow is invisible on near-black, so both tiers go heavier. */
  --elev: 0 1px 2px rgb(0 0 0 / 0.5), 0 12px 32px -10px rgb(0 0 0 / 0.6);
  --elev-lift: 0 2px 8px rgb(0 0 0 / 0.55), 0 30px 80px -20px rgb(0 0 0 / 0.75);

  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0b0b10;
    --surface: #14141b;
    --elevated: #1a1a23;
    --text: #f3f2f7;
    --muted: #a3a1ad;
    --hairline: rgb(255 255 255 / 0.08);
    --control: #7d7b87;

    --accent: #e2b656;
    --accent-2: #c9963a;
    --accent-soft: rgb(226 182 86 / 0.14);
    --accent-ink: #f0c96a;
    --on-accent: #17130a;
    --accent-grad: linear-gradient(135deg, #f0c96a 0%, #d9a83f 55%, #b8862c 100%);
    --accent-glow: 0 12px 34px -12px rgb(226 182 86 / 0.55);

    --danger: #ff6b63;
    --warn: #f2c14e;
    --ok: #5bd88a;
    --info: #86a9ff;

    --glass: rgb(20 20 27 / 0.66);
    --glass-strong: rgb(20 20 27 / 0.86);
    --glass-border: rgb(255 255 255 / 0.07);

    --bubble-them: rgb(255 255 255 / 0.06);
    --bubble-them-border: rgb(255 255 255 / 0.08);

    --aurora-1: rgb(226 182 86 / 0.16);
    --aurora-2: rgb(120 72 255 / 0.20);
    --aurora-3: rgb(38 130 190 / 0.12);

    --scrim: rgb(5 5 8 / 0.9);

    --elev: 0 1px 2px rgb(0 0 0 / 0.5), 0 12px 32px -10px rgb(0 0 0 / 0.6);
    --elev-lift: 0 2px 8px rgb(0 0 0 / 0.55), 0 30px 80px -20px rgb(0 0 0 / 0.75);

    color-scheme: dark;
  }
}

/* ===================== Base ===================== */

* { box-sizing: border-box; }

/* Any class that sets `display` outranks the user-agent's [hidden] rule, so
   `hidden` silently stops working on .field, .btn and friends — the 2FA
   field and the install button both leaked onto the login screen this way.
   One global rule is the reliable fix. */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  /* Lock the document; panes scroll internally so the tab bar never moves. */
  height: 100%;
  overflow: hidden;
}

body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: var(--ff);
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Stops the iOS rubber-band bounce revealing white behind a dark app. */
  overscroll-behavior: none;
  transition: background-color var(--t) var(--ease), color var(--t) var(--ease);
}

/* Ambient light: two soft fields that drift very slowly. Plain gradients,
   no filter: blur(), so low-end phones do not pay for it every frame. */
body::before,
body::after {
  content: "";
  position: fixed;
  z-index: -1;
  pointer-events: none;
  border-radius: 50%;
  will-change: transform;
}

body::before {
  width: 70vmax; height: 70vmax;
  top: -30vmax; inset-inline-start: -20vmax;
  background: radial-gradient(closest-side, var(--aurora-1), transparent 70%);
  animation: drift-a 26s var(--ease) infinite alternate;
}

body::after {
  width: 80vmax; height: 80vmax;
  bottom: -40vmax; inset-inline-end: -30vmax;
  background:
    radial-gradient(closest-side, var(--aurora-2), transparent 70%),
    radial-gradient(closest-side at 30% 70%, var(--aurora-3), transparent 60%);
  animation: drift-b 34s var(--ease) infinite alternate;
}

@keyframes drift-a {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(8vmax, 6vmax, 0) scale(1.08); }
}

@keyframes drift-b {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(-8vmax, -5vmax, 0) scale(1.06); }
}

h1, h2, h3 { margin: 0; font-weight: 650; text-wrap: balance; }
h1 { font-size: 24px; line-height: 1.15; letter-spacing: -0.024em; }
h2 { font-size: 19px; line-height: 1.25; letter-spacing: -0.018em; }
h3 { font-size: 16px; }
p  { margin: 0; }
a  { color: inherit; text-decoration: none; }

:focus-visible {
  outline: none;
  box-shadow: var(--elev-glow);
  border-radius: var(--r-sm);
}

::selection { background: color-mix(in srgb, var(--accent) 30%, transparent); }

.vh {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ===================== Icons =====================
   One inline SVG sprite in index.html; every icon is a <use>. Stroke icons,
   1.75px, round caps, 24-unit grid — one family, one weight, themeable. */

.ic {
  display: inline-block;
  width: var(--ic);
  height: var(--ic);
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: middle;
  pointer-events: none;
}

.ic--sm { width: var(--ic-sm); height: var(--ic-sm); }
.ic--lg { width: var(--ic-lg); height: var(--ic-lg); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}