/* admin-web copy (26.9) of playground/public/css/tokens.css, verbatim below; the playground file stays the source.
   Contract: server/PILOT-PLAN.md sec. 8.1 ("copy tokens.css into server/public, never import across"). Admin-only tokens live in admin.css. */
/* owner: frontend · Mazkira playground · contract: ARCHITECTURE.md sec. 12
   Design tokens. Components never use a raw color: every color, radius, shadow and duration comes from here.
   Themes: light (default), dark via prefers-color-scheme, and a manual override with html[data-theme]. */

:root {
  color-scheme: light;

  /* type */
  --font: "Assistant", "SF Hebrew", "Arial Hebrew", system-ui, sans-serif;
  --fs-11: 0.6875rem;
  --fs-12: 0.75rem;
  --fs-13: 0.8125rem;
  --fs-14: 0.875rem;
  --fs-15: 0.9375rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-32: 2rem;
  --fs-44: 2.75rem;
  --lh-tight: 1.2;
  --lh-body: 1.5;

  /* space */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 32px;
  --s-8: 40px;
  --s-9: 56px;

  /* shape */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-stage: 26px;
  --r-pill: 999px;
  --target: 44px;

  /* motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast: 140ms;
  --t-med: 240ms;
  --t-slow: 420ms;

  /* light palette: cool porcelain, ink, one sea accent */
  --bg: #eceff3;
  --bg-raised: #f4f6f8;
  --surface: #ffffff;
  --surface-2: #f5f7f9;
  --surface-3: #eaeef2;
  --line: #dde2e8;
  --line-strong: #c4cbd4;
  --ink: #12161c;
  --ink-2: #3a424d;
  --ink-3: #5b6470;
  --ink-on-accent: #ffffff;

  --accent: #0b6874;
  --accent-hover: #095964;
  --accent-soft: #dcecee;
  --accent-ink: #07525b;

  --ok: #16703f;
  --ok-soft: #ddf1e5;
  --warn: #93590a;
  --warn-soft: #fbeed6;
  --danger: #b3261e;
  --danger-soft: #fbe5e2;

  --call: #157f47;
  --call-hover: #11703e;
  --hangup: #c8352d;
  --hangup-hover: #b02b24;
  --ink-on-call: #ffffff;

  /* calendar */
  --cal-busy: #e3e7ec;
  --cal-busy-ink: #4a525d;
  --cal-closed: #f1f3f6;
  --cal-booking: #0b6874;
  --cal-booking-ink: #ffffff;
  --cal-offer: #0b6874;
  --cal-now: #c8352d;

  /* elevation (light declares shadow, dark declares border) */
  --shadow-card: 0 1px 2px rgba(18, 22, 28, 0.05), 0 8px 24px -12px rgba(18, 22, 28, 0.12);
  --shadow-pop: 0 2px 6px rgba(18, 22, 28, 0.08), 0 24px 48px -16px rgba(18, 22, 28, 0.28);
  --card-border: transparent;
  --focus: #0b6874;
  --focus-on-stage: #9fe3ea;
  --scrim: rgba(12, 16, 22, 0.32);
  --selection: #bfe0e4;

  /* the call card: a deep handset surface in both themes */
  --stage-bg: #111820;
  --stage-bg-lift: #1d2935;
  --stage-ink: #f1f5f8;
  --stage-ink-2: #aab6c2;
  --stage-ink-3: #7f8b98;
  --stage-line: rgba(255, 255, 255, 0.09);
  --stage-btn: rgba(255, 255, 255, 0.09);
  --stage-btn-hover: rgba(255, 255, 255, 0.15);
  --stage-btn-on: #f1f5f8;
  --stage-btn-on-ink: #111820;
  --stage-danger-soft: rgba(232, 92, 80, 0.16);
  --stage-warn-soft: rgba(240, 178, 80, 0.14);
  --stage-info-soft: rgba(255, 255, 255, 0.07);
  --stage-shadow: 0 2px 4px rgba(10, 14, 20, 0.12), 0 30px 60px -28px rgba(10, 14, 20, 0.55);
  --stage-border: transparent;
  --meter: #7fd6c0;

  /* Maya's presence: pairs per state (canvas reads these, hex only) */
  --orb-idle-1: #6fa3b8;
  --orb-idle-2: #2b4460;
  --orb-listen-1: #57c8dc;
  --orb-listen-2: #2f6fe0;
  --orb-think-1: #a495ff;
  --orb-think-2: #4d57d0;
  --orb-speak-1: #ffb37c;
  --orb-speak-2: #f06a86;
}

/* dark palette: graphite desk at night */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0b0d11;
    --bg-raised: #0f1216;
    --surface: #14171c;
    --surface-2: #191d23;
    --surface-3: #20252d;
    --line: #252b33;
    --line-strong: #353d48;
    --ink: #eceff3;
    --ink-2: #b9c0c9;
    --ink-3: #8e97a3;
    --ink-on-accent: #04262a;

    --accent: #62c7cf;
    --accent-hover: #7dd3da;
    --accent-soft: #11333a;
    --accent-ink: #8fdae0;

    --ok: #6fd39a;
    --ok-soft: #12301f;
    --warn: #f0b660;
    --warn-soft: #33260f;
    --danger: #ff8a80;
    --danger-soft: #3a1714;

    --cal-busy: #232932;
    --cal-busy-ink: #b3bbc6;
    --cal-closed: #111419;
    --cal-booking: #62c7cf;
    --cal-booking-ink: #04262a;
    --cal-offer: #62c7cf;
    --cal-now: #ff8a80;

    --shadow-card: none;
    --shadow-pop: 0 24px 60px -12px rgba(0, 0, 0, 0.7);
    --card-border: #22272f;
    --focus: #62c7cf;
    --scrim: rgba(0, 0, 0, 0.55);
    --selection: #1c4a50;

    --stage-bg: #080b0f;
    --stage-bg-lift: #141c26;
    --stage-shadow: none;
    --stage-border: #1f252d;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0b0d11;
  --bg-raised: #0f1216;
  --surface: #14171c;
  --surface-2: #191d23;
  --surface-3: #20252d;
  --line: #252b33;
  --line-strong: #353d48;
  --ink: #eceff3;
  --ink-2: #b9c0c9;
  --ink-3: #8e97a3;
  --ink-on-accent: #04262a;

  --accent: #62c7cf;
  --accent-hover: #7dd3da;
  --accent-soft: #11333a;
  --accent-ink: #8fdae0;

  --ok: #6fd39a;
  --ok-soft: #12301f;
  --warn: #f0b660;
  --warn-soft: #33260f;
  --danger: #ff8a80;
  --danger-soft: #3a1714;

  --cal-busy: #232932;
  --cal-busy-ink: #b3bbc6;
  --cal-closed: #111419;
  --cal-booking: #62c7cf;
  --cal-booking-ink: #04262a;
  --cal-offer: #62c7cf;
  --cal-now: #ff8a80;

  --shadow-card: none;
  --shadow-pop: 0 24px 60px -12px rgba(0, 0, 0, 0.7);
  --card-border: #22272f;
  --focus: #62c7cf;
  --scrim: rgba(0, 0, 0, 0.55);
  --selection: #1c4a50;

  --stage-bg: #080b0f;
  --stage-bg-lift: #141c26;
  --stage-shadow: none;
  --stage-border: #1f252d;
}

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