/* ==========================================================================
   COLOUR TOKENS: the only file in this project that holds colour values.
   Swap any value here to re-skin the demo. (The client-logo placeholder in
   assets/ is an image asset and is replaced as a whole file.)

   Two groups:
   1. --shell-*  The presenter shell (top bar, stage, side panel).
                 Follows the viewer's light/dark preference.
   2. --app-* / --te-*  The phone screens. These always render light, to match
                 the TikTok onboarding screens captured in the storyboard (v12, §11).
   ========================================================================== */

:root {
  /* ---- Presenter shell (light) ---- */
  --shell-bg: #eef0f3;
  --shell-stage: #e4e7ec;
  --shell-surface: #ffffff;
  --shell-surface-2: #f6f7f9;
  --shell-fg: #15171c;
  --shell-muted: #5a5f6b;
  --shell-border: #d5d9e0;
  --shell-accent: #0b6e7a;          /* links, focus, active controls */
  --shell-accent-soft: #dcefF1;
  --shell-on-accent: #ffffff;
  --shell-focus: #0b6e7a;

  /* Status cues (always paired with an icon and a word) */
  --status-complete: #16794a;
  --status-complete-soft: #e1f3e9;
  --status-processing: #1d5fc4;
  --status-processing-soft: #e3ecfb;
  --status-pending: #8a5a00;
  --status-pending-soft: #fbf0d9;
  --status-stopped: #b4232c;
  --status-stopped-soft: #fbe4e5;
  --status-idle: #6b7080;
  --status-idle-soft: #eceef2;

  /* Panel callouts */
  --gap-mark: #a35a00;
  --gap-soft: #fdf3e2;
  --check-mark: #0b6e7a;
  --check-soft: #e0f1f2;

  /* Device chip per role */
  --role-teen: #c8174a;
  --role-parent: #0b6e7a;
  --role-other: #5b4bb7;

  /* Phone hardware */
  --frame: #101114;
  --frame-edge: #2a2c33;
  --stage-shadow: rgba(20, 24, 33, 0.22);

  /* ---- Phone app (always light) ---- */
  --app-bg: #ffffff;
  --app-ink: #161823;               /* storyboard headline colour */
  --app-sub: #57585e;               /* storyboard sub-copy colour */
  --app-faint: #8a8b91;
  --app-field: #f1f1f2;             /* storyboard field fill */
  --app-line: #e3e3e6;
  /* Storyboard primary is #FE2C55. Darkened slightly so white button text
     meets WCAG AA (4.5:1). Restore #FE2C55 here to match the storyboard. */
  --app-primary: #e0193f;
  --app-primary-pressed: #c41436;
  --app-primary-disabled: #fdadbb;  /* storyboard disabled pink */
  --app-on-primary: #ffffff;
  --app-pink-soft: #fff0f3;
  --app-pink-line: #ffd3dc;
  --app-link: #2f5fc8;              /* storyboard secondary link */
  --app-error: #c0162f;
  --app-error-soft: #fff1f3;
  --app-ok: #12804d;
  --app-ok-soft: #e7f6ee;
  --app-danger: #c0162f;
  --app-scrim: rgba(16, 17, 22, 0.48);
  --app-toast-bg: #1f2027;
  --app-toast-fg: #ffffff;
  --app-switch-off: #c9cacf;
  --app-knob: #ffffff;

  /* TrustElevate trust mark (storyboard §11: teal #028090) */
  --te-teal: #028090;
  --te-teal-pressed: #016d7a;
  --te-teal-soft: #e6f4f5;
  --te-on-teal: #ffffff;

  /* Dark surfaces inside the phone (feed, lock screen, SMS) */
  --feed-bg: #121318;
  --feed-video-a: #2b2f3a;
  --feed-video-b: #3d2833;
  --feed-fg: #ffffff;
  --feed-fg-dim: rgba(255, 255, 255, 0.62);
  --lock-a: #3c4a72;
  --lock-b: #a77fb3;
  --lock-c: #f0b4a8;
  --lock-fg: #ffffff;
  --lock-card: rgba(255, 255, 255, 0.86);
  --sms-in: #e9e9eb;
  --sms-link: #0a63d8;
  --url-bar: #f1f1f2;
  --avatar-bg: #ece8f6;
  --avatar-fg: #4a3d8f;
  --camera-bg: #1b1d24;
  --camera-ring: #4fd1c5;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --shell-bg: #111318;
    --shell-stage: #0b0c10;
    --shell-surface: #1a1d24;
    --shell-surface-2: #22262f;
    --shell-fg: #eceef3;
    --shell-muted: #a3a9b6;
    --shell-border: #313643;
    --shell-accent: #5cc6d0;
    --shell-accent-soft: #173238;
    --shell-on-accent: #071a1d;
    --shell-focus: #7fd8e0;
    --status-complete: #5fd39a;
    --status-complete-soft: #143024;
    --status-processing: #8fb6ff;
    --status-processing-soft: #18263f;
    --status-pending: #f0c060;
    --status-pending-soft: #33280f;
    --status-stopped: #ff8a8f;
    --status-stopped-soft: #3a1a1d;
    --status-idle: #9aa0ad;
    --status-idle-soft: #262a33;
    --gap-mark: #f0b45c;
    --gap-soft: #2e2413;
    --check-mark: #5cc6d0;
    --check-soft: #15292d;
    --role-teen: #ff6f93;
    --role-parent: #5cc6d0;
    --role-other: #a99cf5;
    --frame: #000000;
    --frame-edge: #3a3d46;
    --stage-shadow: rgba(0, 0, 0, 0.55);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --shell-bg: #111318;
  --shell-stage: #0b0c10;
  --shell-surface: #1a1d24;
  --shell-surface-2: #22262f;
  --shell-fg: #eceef3;
  --shell-muted: #a3a9b6;
  --shell-border: #313643;
  --shell-accent: #5cc6d0;
  --shell-accent-soft: #173238;
  --shell-on-accent: #071a1d;
  --shell-focus: #7fd8e0;
  --status-complete: #5fd39a;
  --status-complete-soft: #143024;
  --status-processing: #8fb6ff;
  --status-processing-soft: #18263f;
  --status-pending: #f0c060;
  --status-pending-soft: #33280f;
  --status-stopped: #ff8a8f;
  --status-stopped-soft: #3a1a1d;
  --status-idle: #9aa0ad;
  --status-idle-soft: #262a33;
  --gap-mark: #f0b45c;
  --gap-soft: #2e2413;
  --check-mark: #5cc6d0;
  --check-soft: #15292d;
  --role-teen: #ff6f93;
  --role-parent: #5cc6d0;
  --role-other: #a99cf5;
  --frame: #000000;
  --frame-edge: #3a3d46;
  --stage-shadow: rgba(0, 0, 0, 0.55);
  color-scheme: dark;
}