/* ============================================================================
   Future Office landing - design tokens
   ----------------------------------------------------------------------------
   Every value here is copied from the product, never invented. Each group names
   its source file:line. `node landing/check.mjs` (check 9) fails if any hex in
   this file does not appear in one of:
     packages/ui/src/styles.css   (rgb triplets count, converted)
     apps/web/src/office/iso/iso.css
     apps/web/src/office/plan/plan.css
     apps/web/src/presence/status.ts
     apps/web/public/favicon.svg
   Marketing-only colours belong in landing.css, not here.

   Theme switch: <html data-theme="dark"> (default, also :root with no attribute)
   or <html data-theme="light">. `.keep-dark` re-asserts Night on a subtree inside
   a Day page (video tiles, the theater stage, the agent orb), exactly like the
   product's `.keep-dark` (packages/ui/src/styles.css:20-28). `.m-video` and
   `.m-stage` (mock.css) are always Night for the same reason.
   ========================================================================== */

/* ============================ NIGHT (default) ============================ */
:root,
[data-theme="dark"],
.keep-dark,
.m-video,
.m-stage {
  /* -- app surfaces: packages/ui/src/styles.css:22-27 (triplets 11 13 18 ...) -- */
  --surface-base: #0b0d12; /* styles.css:22  11 13 18  (also favicon.svg) */
  --surface-raised: #141821; /* styles.css:23  20 24 33 */
  --surface-sunken: #0f131b; /* styles.css:24  15 19 27 */
  --surface-border: #232838; /* styles.css:25  35 40 56 */
  --surface-base-rgb: 11 13 18;

  /* -- page chrome on the dark scale: plan.css:191-202 -- */
  --paper: #141821; /* plan.css:191 */
  --paper-2: #0f131b; /* plan.css:192 */
  --ink: #e4e9f1; /* plan.css:193 */
  --ink-rgb: 228 233 241;
  --ink-70: rgba(228, 233, 241, 0.7); /* plan.css:194 */
  --ink-50: rgba(228, 233, 241, 0.5); /* plan.css:195 */
  --ink-32: rgba(228, 233, 241, 0.32); /* plan.css:196 */
  --ink-muted: #9aa4b4; /* plan.css:198 */
  --line: #232838; /* plan.css:199 */
  --line-strong: #333a4e; /* plan.css:200 */
  --wash: rgba(255, 255, 255, 0.05); /* plan.css:201 */
  --wash-2: rgba(255, 255, 255, 0.09); /* plan.css:202 */

  /* -- the lamp (warm accent): plan.css:223-225 -- */
  --lamp: #ffd9a0; /* plan.css:223 (also favicon.svg) */
  --lamp-rgb: 255 217 160; /* plan.css:224 */
  --lamp-ink: #f3e3cc; /* plan.css:225 */
  /* text on a lamp-filled button: the app's own base surface (styles.css:22) */
  --on-lamp: #0b0d12;

  /* -- cyan (AI / available): iso.css:40-41, Night ink plan.css:212 -- */
  --cyan: #22d3ee; /* iso.css:40 */
  --cyan-deep: #0891b2; /* iso.css:41 */
  --cyan-ink: #67e3f5; /* plan.css:212 */
  --cyan-rgb: 34 211 238; /* plan.css:226 */

  /* -- coral (brand / visitor at the door): iso.css:36-37, Night plan.css:210-211 -- */
  --coral: #ff6b5e; /* iso.css:36 */
  --coral-deep: #e5533f; /* iso.css:37 */
  --coral-ink: #ff9d92; /* plan.css:211 */
  --coral-wash: rgba(255, 107, 94, 0.16); /* plan.css:210 */

  /* -- the floor: plan.css:186-190, vignette plan.css:248-250 -- */
  --plan-ground: #070a0c; /* plan.css:186 */
  --floor-hi: #0b1014; /* plan.css:188 */
  --floor-lo: #050709; /* plan.css:189 */
  --floor-line: rgba(214, 232, 238, 0.05); /* plan.css:190 */
  --floor-vignette:
    inset 0 -70px 90px -50px rgba(0, 0, 0, 0.65),
    inset 0 40px 70px -50px rgba(255, 217, 160, 0.05);
  --torch: rgba(255, 217, 160, 0.13); /* plan.css:264 */

  /* -- the rooms: plan.css:229-235 -- */
  --room-unlit: #0e1418; /* plan.css:229 */
  --room-lit: #151e25; /* plan.css:230 */
  --room-cold: #121a1f; /* plan.css:231 */
  --room-colder: #0f161a; /* plan.css:234 */

  /* -- a tile's own line, ink and elevation: plan.css:236-262 -- */
  --tile-line: rgba(214, 232, 238, 0.14);
  --tile-line-cold: rgba(214, 232, 238, 0.12);
  --tile-line-hi: rgba(214, 232, 238, 0.22);
  --tile-ink: #dde7ea; /* plan.css:240 */
  --tile-name: #9ba5ae; /* plan.css:241 */
  --tile-muted: rgba(221, 231, 234, 0.55);
  --tile-e1: 0 1px 2px rgba(0, 0, 0, 0.28);
  --tile-e2: 0 8px 24px -14px rgba(0, 0, 0, 0.55);
  --tile-av-bg: color-mix(in srgb, var(--lamp) 18%, var(--room-unlit));
  --tile-float:
    inset 0 1px 0 rgba(255, 255, 255, 0.045), 0 14px 28px -14px rgba(0, 0, 0, 0.85),
    0 2px 5px rgba(0, 0, 0, 0.4);
  --tile-float-hi: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 24px 44px -18px rgba(0, 0, 0, 0.9);
  --lit-spill: 0 0 30px -8px rgb(var(--lamp-rgb) / 0.5);
  --lit-inner: inset 0 0 46px -16px rgb(var(--lamp-rgb) / 0.9);
  --lit-pool: 0 22px 40px -20px rgb(var(--lamp-rgb) / 0.45);
  --lit-pool-soft: 0 22px 40px -20px rgb(var(--lamp-rgb) / 0.22);
  --dnd-pool: 0 22px 40px -20px rgb(var(--dnd-rgb) / 0.4);
  --pin-ring: #1b2230; /* plan.css:263 */

  /* -- dock + tab bar glass: plan.css:266-268 -- */
  --dock-bg: rgba(15, 19, 27, 0.86);
  --dock-border: rgba(255, 255, 255, 0.08);
  --tabbar-bg: rgba(11, 13, 18, 0.94);

  /* -- status: apps/web/src/presence/status.ts:6-13 (same in both themes) -- */
  --st-available: #67e3f5; /* status.ts available */
  --st-meeting: #f59e0b; /* status.ts in_meeting */
  --st-dnd: #ef4444; /* status.ts dnd */
  --st-ooo: #6b7280; /* status.ts ooo (stepped out) */
  --st-offline: #4b5563; /* status.ts offline */
  --dnd: #ef4444; /* iso.css:46 */
  --dnd-rgb: 239 68 68; /* plan.css:81 */
  --on: #67e3f5; /* iso.css:45 live dot */

  /* -- agent orb / glow gradient: packages/ui/src/styles.css:64-65 -- */
  --glow-from: #22d3ee; /* styles.css:64 */
  --glow-to: #a855f7; /* styles.css:65 */

  /* the big soft shadow under a screenshot window (Night: the product's black
     shadow alpha, plan.css:219-220, pushed further out) */
  --sh-window: 0 40px 120px -40px rgba(0, 0, 0, 0.7), 0 18px 40px -20px rgba(0, 0, 0, 0.5),
    0 22px 56px -28px rgba(0, 0, 0, 0.85);
  --white: #ffffff; /* plan.css:106 - text on coral fills (iso.css uses #fff) */

  /* -- shadows: Night plan.css:218-220 -- */
  --sh-sm: 0 1px 2px rgba(0, 0, 0, 0.45);
  --sh-md: 0 8px 24px -14px rgba(0, 0, 0, 0.7), 0 1px 2px rgba(0, 0, 0, 0.45);
  --sh-lg: 0 22px 56px -28px rgba(0, 0, 0, 0.85), 0 6px 16px rgba(0, 0, 0, 0.45);

  color-scheme: dark;
}

/* ============================ SHARED SCALE ============================ */
/* iso.css:51-61 (radii + spacing) and iso.css:78-85 (rounded display face) */
:root {
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-pill: 999px;
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;
  --font-ui: Inter, system-ui, sans-serif;
  --font-display: ui-rounded, "SF Pro Rounded", "Nunito", "Segoe UI", system-ui, sans-serif;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* plan.css .plan-tile transition */
}

/* ============================ DAY ============================ */
/* data-theme="light". Order matters: this block follows the Night block so it
   wins on <html> at equal specificity. */
[data-theme="light"] {
  /* -- app surfaces: packages/ui/src/styles.css:36-41 -- */
  --surface-base: #f3eee5; /* styles.css:37  243 238 229 */
  --surface-raised: #fbf9f4; /* styles.css:38  251 249 244 */
  --surface-sunken: #f6f2ea; /* styles.css:39  246 242 234 */
  --surface-border: #dcd5c7; /* styles.css:40  220 213 199 */
  --surface-base-rgb: 243 238 229;

  /* -- paper palette: iso.css:20-33 -- */
  --paper: #fbf9f4; /* iso.css:23 */
  --paper-2: #f3eee5; /* iso.css:24 */
  --ink: #2b2a26; /* iso.css:25 */
  --ink-rgb: 43 42 38;
  --ink-70: rgba(43, 42, 38, 0.7);
  --ink-50: rgba(43, 42, 38, 0.5);
  --ink-32: rgba(43, 42, 38, 0.32);
  --ink-muted: #6b6760; /* iso.css:31 */
  --line: rgba(43, 42, 38, 0.1);
  --line-strong: rgba(43, 42, 38, 0.16);
  --wash: rgba(43, 42, 38, 0.05);
  --wash-2: rgba(43, 42, 38, 0.09);

  /* -- the lamp: plan.css:74-76 -- */
  --lamp: #b45309; /* plan.css:74 */
  --lamp-rgb: 180 83 9; /* plan.css:75 */
  --lamp-ink: #4a2d05; /* plan.css:76 */
  /* white on the Day amber (5.5:1); plan.css:106 */
  --on-lamp: #ffffff;

  /* -- cyan: iso.css:40-42 -- */
  --cyan: #22d3ee;
  --cyan-deep: #0891b2;
  --cyan-ink: #0b6a80; /* iso.css:42 */
  --cyan-rgb: 8 145 178; /* plan.css:80 */

  /* -- coral: iso.css:36-39 -- */
  --coral: #ff6b5e;
  --coral-deep: #e5533f;
  --coral-ink: #a83a2e; /* iso.css:38 */
  --coral-wash: #ffe4de; /* iso.css:39 */

  /* -- the floor: plan.css:84-90 -- */
  --plan-ground: #e9eef0; /* plan.css:84 */
  --floor-hi: #eef2f4; /* plan.css:85 */
  --floor-lo: #e2e8eb; /* plan.css:86 */
  --floor-line: rgba(43, 42, 38, 0.055); /* iso.css:22 */
  --floor-vignette:
    inset 0 -60px 80px -40px rgba(43, 42, 38, 0.14),
    inset 0 40px 60px -50px rgba(255, 255, 255, 0.7);
  --torch: rgba(180, 83, 9, 0.1);

  /* -- the rooms: plan.css:92-97 -- */
  --room-unlit: #dfe5e8; /* plan.css:92 */
  --room-lit: #fde8c4; /* plan.css:93 */
  --room-cold: #d8dfe2; /* plan.css:94 */
  --room-colder: #d8dfe2;

  /* -- tile: plan.css:99-127 -- */
  --tile-line: rgba(7, 10, 12, 0.14);
  --tile-line-cold: rgba(7, 10, 12, 0.14);
  --tile-line-hi: rgba(7, 10, 12, 0.3);
  --tile-ink: #0d1316; /* plan.css:101 */
  --tile-name: #5b646b; /* plan.css:102 */
  --tile-muted: rgba(13, 19, 22, 0.62);
  --tile-e1: 0 1px 2px rgba(0, 0, 0, 0.08);
  --tile-e2: 0 8px 24px -14px rgba(0, 0, 0, 0.25);
  --tile-av-bg: #ffffff; /* plan.css:106 */
  --tile-float: 0 0 0 transparent;
  --tile-float-hi: 0 0 0 transparent;
  --lit-spill: 0 1px 0 rgba(255, 255, 255, 0.7);
  --lit-inner: inset 0 0 34px -12px rgb(var(--lamp-rgb) / 0.45);
  --lit-pool: 0 0 0 transparent;
  --lit-pool-soft: 0 0 0 transparent;
  --dnd-pool: 0 0 0 transparent;
  --pin-ring: #fbf9f4;

  /* -- dock glass: plan.css:129-131 -- */
  --dock-bg: rgba(251, 249, 244, 0.82);
  --dock-border: rgba(255, 255, 255, 0.7);
  --tabbar-bg: rgba(251, 249, 244, 0.94);

  --sh-window: 0 40px 100px -40px rgba(43, 42, 38, 0.35), 0 18px 40px rgba(43, 42, 38, 0.18);

  /* -- shadows: iso.css:62-64 -- */
  --sh-sm: 0 1px 2px rgba(43, 42, 38, 0.1), 0 2px 6px rgba(43, 42, 38, 0.06);
  --sh-md: 0 6px 16px rgba(43, 42, 38, 0.12), 0 2px 6px rgba(43, 42, 38, 0.06);
  --sh-lg: 0 18px 40px rgba(43, 42, 38, 0.18), 0 6px 14px rgba(43, 42, 38, 0.1);

  color-scheme: light;
}