/* ==========================================================================
   SignMog design tokens
   One token contract (same names as BuildMog, MogDrive and AttorneyMog), two
   themes. Default = "stage": a deep ink field so the signer's hands and face
   carry all the contrast. "daylight" = paper field for bright rooms.
   Switch with data-theme on <html>.
   Accent = signal teal: the one warm thing per screen (primary button, the
   word being signed right now, the live dot). Dark text on teal, never white.
   ========================================================================== */

:root,
[data-theme="stage"] {
  color-scheme: dark;

  /* type */
  --font-display: "Instrument Serif", Georgia, "Times New Roman", serif;
  --font-ui: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --display-weight: 400;
  --display-tracking: -0.02em;

  /* surfaces: stage ink */
  --bg: #0e1220;
  --bg-2: #141a2c;
  --bg-elev: #1b2236;
  --surface: rgba(255, 255, 255, 0.05);
  --surface-2: rgba(255, 255, 255, 0.09);
  --surface-solid: #1e2538;
  --border: rgba(255, 255, 255, 0.10);
  --border-strong: rgba(255, 255, 255, 0.22);
  --glass-blur: 18px;

  /* text */
  --text: #f3f5fb;
  --text-2: #b7bfd3;
  --text-3: #8d97b0; /* 5.2:1 on --bg */

  /* brand accent: signal teal. Dark text on teal (10:1), never white. */
  --accent: #2ee6c5;
  --accent-2: #8ff5e3;
  --accent-ink: #06201b;
  --accent-grad: linear-gradient(135deg, #1fd1b0 0%, #8ff5e3 100%);
  --accent-soft: rgba(46, 230, 197, 0.16);
  --glow: rgba(46, 230, 197, 0.40);
  --focus: #8ff5e3;

  /* the second voice: sunlight amber for the word on screen right now */
  --live-word: #ffcf5a;
  --live-word-ink: #2a1d00;

  /* status */
  --live: #3ddc97;
  --warn: #ffb547;
  --danger: #ff6f5b;
  --danger-soft: rgba(255, 111, 91, 0.16);
  --meter-track: rgba(255, 255, 255, 0.12);

  /* shape and depth */
  --radius-xs: 10px;
  --radius-s: 14px;
  --radius-m: 20px;
  --radius-l: 28px;
  --radius-pill: 999px;
  --shadow-1: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 10px 30px rgba(0, 0, 0, 0.45);
  --shadow-2: 0 24px 70px rgba(0, 0, 0, 0.6);
  --shadow-glow: 0 0 0 4px var(--accent-soft), 0 12px 36px var(--glow);

  /* the 3D stage behind the signer */
  --stage-bg: radial-gradient(120% 90% at 50% 20%, #243052 0%, #121728 55%, #0b0e18 100%);
  --stage-floor: rgba(46, 230, 197, 0.10);
}

/* ---------- Daylight: paper field, the same teal, ink text ---------- */
[data-theme="daylight"] {
  color-scheme: light;

  --bg: #f5f6fb;
  --bg-2: #eceff7;
  --bg-elev: #ffffff;
  --surface: rgba(255, 255, 255, 0.72);
  --surface-2: rgba(255, 255, 255, 0.92);
  --surface-solid: #ffffff;
  --border: rgba(16, 22, 40, 0.10);
  --border-strong: rgba(16, 22, 40, 0.22);
  --glass-blur: 16px;

  --text: #101628;
  --text-2: #4b5470;
  --text-3: #66708c; /* 4.9:1 on --bg */

  --accent: #12bfa0;
  --accent-2: #2ee6c5;
  --accent-ink: #06201b;
  --accent-grad: linear-gradient(135deg, #12bfa0 0%, #2ee6c5 100%);
  --accent-soft: rgba(18, 191, 160, 0.14);
  --glow: rgba(18, 191, 160, 0.35);
  --focus: #0b6ad1;

  --live-word: #f4b400;
  --live-word-ink: #2a1d00;

  --live: #1f9d6a;
  --warn: #c77d00;
  --danger: #d8432f;
  --danger-soft: rgba(216, 67, 47, 0.12);
  --meter-track: rgba(16, 22, 40, 0.10);

  --shadow-1: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 8px 24px rgba(20, 30, 60, 0.12);
  --shadow-2: 0 20px 50px rgba(20, 30, 60, 0.18);
  --shadow-glow: 0 0 0 4px var(--accent-soft), 0 12px 30px var(--glow);

  --stage-bg: radial-gradient(120% 90% at 50% 20%, #ffffff 0%, #e9edf7 55%, #d9dfee 100%);
  --stage-floor: rgba(18, 191, 160, 0.12);
}

/* Motion contract: one easing family everywhere (shared with the family). */
:root {
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 160ms;
  --dur-med: 320ms;
  --dur-slow: 640ms;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-med: 0ms;
    --dur-slow: 0ms;
  }
}