/* GENERATED FILE — DO NOT EDIT.
 * Source: src/app/globals.css
 * Regenerate: node docs/prototypes/scripts/build-tokens.mjs
 *
 * Quiet Sky v2.0 design tokens for standalone prototypes.
 * Dark is the default (:root); light is [data-theme='light'].
 */

:root {
  --white: #ffffff;
  --canvas-l: #fbfbfd;
  --ink: #0e0e14;
  --gray-muted: #5b5b66;
  --gray-faint: #8a8a94;
  --night: #0a0d12;
  --night-2: #0d1117;
  --night-3: #12161f;
  --night-ink: #edeef4;
  --night-muted: #9da1b2;
  --night-faint: #7e8095;
  --cyan: #0fa8ce;
  --cyan-deep: #0b86a6;
  --cyan-night: #5fd4f2;
  --red: #c24558;
  --red-night: #ff7a87;
  --mint: #2bd9a9;
  --mint-deep: #14795c;
  --mint-night: #8fe0c4;
  --z-base: 0;
  --z-raised: 100;
  --z-rail: 200;
  --z-popover: 300;
  --z-drawer: 400;
  --z-scrim: 500;
  --z-modal: 600;
  --z-modal-nested: 650;
  --z-toast: 700;
  --z-tooltip: 800;
  --row-h: 44px;
  --gap-section: 24px;
  --pad-card: 16px;
  --cell-y: 11px;
  --cell-x: 18px;
  --ease-brand: cubic-bezier(0.22, 1, 0.36, 1);
  --t-fast: 200ms;
  --t-base: 250ms;
  --t-slow: 300ms;
  --t-reveal: 500ms;
}

[data-density='compact'] {
  --row-h: 36px;
  --gap-section: 16px;
  --pad-card: 12px;
  --cell-y: 7px;
  --cell-x: 14px;
}

:root {
  --bg: var(--night);
  --surface-1: var(--night-2);
  --surface-2: var(--night-3);
  --surface-3: #0f131b;
  --text-1: var(--night-ink);
  --text-2: var(--night-muted);
  --text-3: var(--night-faint);
  --border: rgba(237, 238, 244, 0.09);
  --border-strong: rgba(237, 238, 244, 0.18);
  --fill: rgba(237, 238, 244, 0.05);
  --accent: var(--cyan-night);
  --accent-text: var(--cyan-night);
  --accent-tint: rgba(95, 212, 242, 0.1);
  --accent-border: rgba(95, 212, 242, 0.3);
  --danger: var(--red-night);
  --danger-text: var(--red-night);
  --danger-tint: rgba(255, 122, 135, 0.1);
  --danger-border: rgba(255, 122, 135, 0.3);
  --ok: var(--mint);
  --ok-text: var(--mint-night);
  --ok-tint: rgba(43, 217, 169, 0.1);
  --ok-border: rgba(43, 217, 169, 0.3);
  --btn-primary-bg: var(--night-ink);
  --btn-primary-fg: var(--night);
  --bubble-agent: rgba(237, 238, 244, 0.07);
  --bubble-user-bg: var(--night-ink);
  --bubble-user-fg: var(--night);
  --glass: rgba(13, 17, 23, 0.72);
  --elev-card: 0 0 0 1px rgba(0, 0, 0, 0.3), 0 24px 64px rgba(0, 0, 0, 0.5);
  --elev-soft: 0 1px 2px rgba(0, 0, 0, 0.3), 0 12px 32px rgba(0, 0, 0, 0.35);
  --focus-ring: var(--cyan-night);
  --chart-1: #057d95;
  --chart-2: #0897b3;
  --chart-3: #34b1ce;
  --chart-4: #54cae8;
  --chart-5: #89e6ff;
}

[data-theme='light'] {
  --bg: var(--canvas-l);
  --surface-1: var(--white);
  --surface-2: #f7f7fa;
  --surface-3: #fdfdfe;
  --text-1: var(--ink);
  --text-2: var(--gray-muted);
  --text-3: var(--gray-faint);
  --border: rgba(14, 14, 20, 0.08);
  --border-strong: rgba(14, 14, 20, 0.14);
  --fill: rgba(14, 14, 20, 0.045);
  --accent: var(--cyan);
  --accent-text: var(--cyan-deep);
  --accent-tint: rgba(15, 168, 206, 0.08);
  --accent-border: rgba(15, 168, 206, 0.3);
  --danger: var(--red);
  --danger-text: var(--red);
  --danger-tint: rgba(194, 69, 88, 0.08);
  --danger-border: rgba(194, 69, 88, 0.3);
  --ok: var(--mint);
  --ok-text: var(--mint-deep);
  --ok-tint: rgba(43, 217, 169, 0.1);
  --ok-border: rgba(43, 217, 169, 0.35);
  --btn-primary-bg: var(--ink);
  --btn-primary-fg: var(--white);
  --bubble-agent: #f4f4f8;
  --bubble-user-bg: var(--ink);
  --bubble-user-fg: var(--white);
  --glass: rgba(255, 255, 255, 0.78);
  --elev-card:
    0 1px 2px rgba(14, 14, 20, 0.04), 0 24px 64px rgba(14, 14, 20, 0.12);
  --elev-soft:
    0 1px 2px rgba(14, 14, 20, 0.04), 0 12px 32px rgba(14, 14, 20, 0.07);
  --focus-ring: var(--cyan);
  --chart-1: #5fbfe0;
  --chart-2: #1fa9ce;
  --chart-3: #0a8aab;
  --chart-4: #07728c;
  --chart-5: #05596d;
}

@theme inline {

  --color-canvas: var(--bg);
  --color-surface-1: var(--surface-1);
  --color-surface-2: var(--surface-2);
  --color-surface-3: var(--surface-3);
  --color-content-1: var(--text-1); /* text-content-1, not text-text-1 */
  --color-content-2: var(--text-2);
  --color-content-3: var(--text-3);
  --color-wash: var(--fill); /* bg-wash — the quiet, meaning-free fill */
  /* bg-cal-weekend — the calendar's Sat/Sun column wash. Deliberately fainter
     than --fill (the hover fill) so a weekend never competes with a hovered
     day or with today's markers. */
  --color-cal-weekend: color-mix(in oklab, var(--fill) 55%, transparent);
  /* bg-cal-event — the calendar event "glass" pill fill (month pills + the
     side pane's all-day rows). A 9% text tint, noticeably brighter than the 5%
     bg-wash, matching the AIC prototype's --evt-glass. Built on --text-1 so it
     flips with the theme automatically. */
  --color-cal-event: color-mix(in oklab, var(--text-1) 9%, transparent);
  --color-accent: var(--accent);
  --color-accent-text: var(--accent-text);
  --color-accent-tint: var(--accent-tint);
  --color-accent-border: var(--accent-border);
  --color-danger: var(--danger);
  --color-danger-text: var(--danger-text);
  --color-danger-tint: var(--danger-tint);
  --color-danger-border: var(--danger-border);
  --color-ok: var(--ok);
  --color-ok-text: var(--ok-text);
  --color-ok-tint: var(--ok-tint);
  --color-ok-border: var(--ok-border);
  --color-btn-primary: var(--btn-primary-bg);
  --color-btn-primary-fg: var(--btn-primary-fg);
  --color-bubble-agent: var(--bubble-agent);
  --color-bubble-user: var(--bubble-user-bg);
  --color-bubble-user-fg: var(--bubble-user-fg);
  --color-glass: var(--glass);
  --color-focus: var(--focus-ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);

  /* elevation → shadow-card / shadow-soft */
  --shadow-card: var(--elev-card);
  --shadow-soft: var(--elev-soft);

  /* motion → ease-brand */
  --ease-brand: var(--ease-brand);
}

@theme {

  /* Calendar day-grid geometry. */
  /* Taller rows keep the initial 09:00–18:00 workday near one viewport. */
  --spacing-agenda-hour: 96px;
  /* Calendar-fork hour-row height. Clamped 44px…96px by the grid fit pass
     (see calendar/_agenda/calHour.ts) so 08:00–20:00 fills the viewport
     without hiding 00:00–24:00. Defaults to the max; the fit pass overrides
     it at runtime on the scroll container. */
  --cal-hour: 96px;
  /* Shared height for the calendar's top bands — the left-column toolbar and
     the right-pane header — so their bottom borders line up across the seam. */
  --cal-head-h: 3.25rem;
  /* Fits the longest valid short offset (for example "GMT+13:45") as well as
     hour labels without crowding the first event column. */
  --spacing-agenda-time-label: 56px;
  --spacing-agenda-event-inset: 2px;
  /* Month rows keep their controls readable; the month body scrolls when six
     rows cannot fit at this minimum. */
  --spacing-cal-month-row-min: 7rem;

  /* shape → rounded-pill / -frame / -card / -inner / -ctrl / -tight. */
  --radius-pill: 99px;
  --radius-frame: 20px;
  --radius-card: 16px;
  --radius-inner: 14px;
  --radius-ctrl: 12px;
  --radius-tight: 8px;

  /* type scale (Part A3) → text-title-1 … text-micro. */
  --text-title-1: 28px;
  --text-title-1--line-height: 34px; /* page titles */
  --text-title-2: 19px;
  --text-title-2--line-height: 25px; /* card/modal titles */
  --text-title-3: 15px;
  --text-title-3--line-height: 21px; /* row titles */
  --text-body: 14px;
  --text-body--line-height: 21px; /* the product default */
  --text-small: 13px;
  --text-small--line-height: 19px; /* secondary rows, nav */
  --text-caption: 12px;
  --text-caption--line-height: 17px; /* timestamps, meta */
  --text-micro: 11px;
  --text-micro--line-height: 15px; /* chips, micro labels */
}

:root {
  --qs-border-soft: rgba(237, 238, 244, 0.09);
  --qs-border-strong: rgba(237, 238, 244, 0.18);
  --qs-accent: var(--cyan-night);
}

[data-theme='light'] {
  --qs-border-soft: rgba(14, 14, 20, 0.08);
  --qs-border-strong: rgba(14, 14, 20, 0.14);
  --qs-accent: var(--cyan);
}

@theme inline {

  --color-line: var(--qs-border-soft);
  --color-line-strong: var(--qs-border-strong);
  --color-brand: var(--qs-accent);
}

@theme {

  --text-qs-body: 14px;
  --text-qs-body--line-height: 21px;
  --text-qs-caption: 12px;
  --text-qs-caption--line-height: 17px;
  --text-qs-micro: 11px;
  --text-qs-micro--line-height: 15px;
}

@theme {

  /* ---- Font Families ---- */
  --font-display: inherit;

  /* ---- Typography Scale (AIC source of truth) ----
     Generates text-h1, text-h2, text-h3, text-heading, text-body, text-subtitle, text-chat-body */
  --text-h1: 80px;
  --text-h1--line-height: 96px;
  --text-h2: 39px;
  --text-h2--line-height: 44px;
  --text-h3: 28px;
  --text-h3--line-height: 32px;
  --text-heading: 17px;
  --text-heading--line-height: 22px;
  --text-body: 15px;
  --text-body--line-height: 20px;
  --text-body2: 14px;
  --text-body2--line-height: 18px;
  --text-subtitle: 13px;
  --text-subtitle--line-height: 16px;
  --text-xs: 12px;
  --text-xs--line-height: 16px;
  --text-micro: 10px;
  --text-micro--line-height: 14px;
  --text-chat-body: 17px;
  --text-chat-body--line-height: 22px;

  /* ---- Content Colors (dark mode defaults) ---- */
  --color-content-primary: #ffffff;
  --color-content-secondary: rgba(255, 255, 255, 0.5);
  --color-content-tertiary: rgba(255, 255, 255, 0.35);
  --color-content-quaternary: rgba(255, 255, 255, 0.15);

  /* ---- Surface Colors (AIC source of truth) ---- */
  --color-surface-primary: rgba(255, 255, 255, 0.02);
  --color-surface-transparent: rgba(255, 255, 255, 0.1);
  --color-surface-transparent-selected: rgba(255, 255, 255, 0.25);
  --color-surface-background: #040a14;
  --color-surface-sidebar: #050507;
  --color-surface-contrast: #ffffff;
  --color-surface-modal: rgba(0, 0, 0, 0.16);

  /* ---- Gradient Colors (AIC source of truth) ---- */
  --color-gradient-nav-start: rgba(30, 30, 31, 0.9);
  --color-gradient-nav-end: rgba(30, 31, 32, 0);

  /* ---- Chat Colors (AIC source of truth) ---- */
  --color-chat-user-primary: #ffffff;
  --color-chat-user-secondary: #ffffff;
  --color-chat-text-primary-sent: #add5ff;
  --color-chat-text-primary-received: #f1f1f1;
  --color-chat-text-secondary-sent: #d5d5d5;
  --color-chat-text-secondary-received: #d5d5d5;
  --color-bg-agent-bubble: rgba(0, 136, 255, 0.5);
  /* Unread / “new messages” horizontal rule (Slack-style) */
  --color-chat-unread-divider: #e01e5a;

  /* ---- Background Colors ---- */
  --color-bg-list: rgba(255, 255, 255, 0.04);
  --color-surface-input: rgba(255, 255, 255, 0.05);
  --color-surface-popover: rgba(255, 255, 255, 0.06);
  --color-surface-progress-track: rgba(255, 255, 255, 0.08);
  --color-progress-fill: rgba(255, 255, 255, 0.5);
  --color-input-placeholder: #bfbfbf;
  --color-content-muted: #8e8e8e;
  --color-code-bg: rgba(160, 160, 160, 0.28);
  --color-code-text: #e8912d;
  --color-code-border: rgba(128, 128, 128, 0.3);
  --color-code-bg-subtle: rgba(128, 128, 128, 0.06);
  --color-theme-stroke-light: rgba(0, 0, 0, 0.12);
  --color-theme-stroke-dark: rgba(255, 255, 255, 0.2);
  --color-cc-emerald-soft: rgba(130, 170, 130, 0.1);
  --color-cc-emerald: rgb(130, 170, 130);

  /* ---- Button Colors (AIC source of truth) ---- */
  --color-button-primary: #ffffff;
  --color-button-primary-alt: #f1f5f9;
  --color-button-primary-text: #181818;
  --color-button-secondary: #181818;
  --color-button-tertiary: rgba(255, 255, 255, 0.04);
  --color-button-glass-bg: rgba(255, 255, 255, 0.02);
  --color-button-glass-selected: rgba(255, 255, 255, 0.05);
  --color-button-glass-hover: rgba(255, 255, 255, 0.04);
  --color-button-glass-shadow: rgba(255, 255, 255, 0.02);
  --color-button-glass-stroke: rgba(255, 255, 255, 0.1);
  --color-glass-hover-bg: rgba(255, 255, 255, 0.04);

  /* ---- Card Colors ---- */
  --color-card-bg: rgba(41, 41, 41, 0.9);
  --color-card-bg-solid: #18181c;
  --color-card-bg-dark: #050505;
  --color-card-surface: #23262a;
  --color-card-usage: #303030;
  --color-card-background-blurred: rgba(24, 26, 32, 0.98);
  --color-card-background-solid: #303030;
  --color-card-bg-blurred: rgba(24, 26, 32, 0.98);

  /* ---- Border (AIC source of truth — dark mode) ---- */
  --color-border-secondary: rgba(255, 255, 255, 0.1);
  --color-border-tertiary: rgba(255, 255, 255, 0.3);
  /* Border-color namespace: generates border-secondary utility (avoids border-secondary) */
  --border-color-secondary: rgba(255, 255, 255, 0.1);

  /* ---- Page Background (AIC source of truth) ---- */
  --color-page-bg: #040a14;
  --color-loading-page-bg: #040a14;

  /* ---- Status / Feedback (AIC source of truth) ---- */
  --color-accent-custom: #98eaff;
  /* Deep-link message focus glow. Tracks the icing accent in dark mode but
     gets a saturated override in light mode (where --color-accent-custom is
     white and would be invisible on a light background). */
  --color-message-focus: #98eaff;
  --color-lavender: #b08cff;
  --color-success: #66ff00;
  --color-success-20: rgba(102, 255, 0, 0.2);
  --color-warning: #ff6600;
  --color-error: #fca5a5;
  --color-online: #66ff00;

  /* ---- System Colors (AIC) ---- */
  --color-system-blue: #0091ff;
  --color-system-red: #ff4245;
  --color-system-green: #34c759;
  --color-indicator-dot: rgb(140, 180, 220);
  --color-system-blue-12: rgba(0, 136, 255, 0.12);
  --color-system-blue-20: rgba(0, 136, 255, 0.2);
  --color-alert-green-10: rgba(168, 205, 153, 0.1);
  --color-alert-green: #a8cd99;
  /* Inline link color — distinct from action/brand (Notion #0075de / Slack #1264a3
     family). Inline links must read as links, not as accent buttons. */
  --color-link: #3da9fc;

  /* ---- Special (AIC source of truth) ---- */
  --color-always-white: #ffffff;
  --color-overlay: rgba(0, 0, 0, 0.5);
  --color-special-avatar-overlay: rgba(24, 24, 24, 0.7);
  --color-marketing-off-white: #ebebeb;

  /* ---- Avatar Colors (dark mode defaults — AIC source of truth) ---- */
  --color-avatar-cherry: #ff3838;
  --color-avatar-orange: #ff6b35;
  --color-avatar-tangerine: #ff9f0a;
  --color-avatar-sunshine: #ffd60a;
  --color-avatar-lime: #30d158;
  --color-avatar-teal: #17c2b4;
  --color-avatar-sky: #64d2ff;
  --color-avatar-blue: #0088ff;
  --color-avatar-blueberry: #5e5ce6;
  --color-avatar-lavender: #b08cff;
  --color-avatar-fuchsia: #d228f0;
  --color-avatar-rose: #ff6b9d;
  --color-avatar-mint: #00c87a;
  --color-avatar-violet: #bf5af2;
  --color-avatar-sky-alt: #32ade6;

  /* ---- Group Avatar Colors (WWW addition) ---- */
  /* Dark theme: bright text + dark desaturated background */
  --color-group-avatar-red-text: #ff3838;
  --color-group-avatar-red-bg: #5d2222;
  --color-group-avatar-orange-text: #ff8833;
  --color-group-avatar-orange-bg: #5d3322;
  --color-group-avatar-yellow-text: #ffb800;
  --color-group-avatar-yellow-bg: #5d4422;
  --color-group-avatar-lime-text: #66ff00;
  --color-group-avatar-lime-bg: #2d5d11;
  --color-group-avatar-teal-text: #00d4d4;
  --color-group-avatar-teal-bg: #115d5d;
  --color-group-avatar-blue-text: #0088ff;
  --color-group-avatar-blue-bg: #113a5d;
  --color-group-avatar-violet-text: #aa66ff;
  --color-group-avatar-violet-bg: #3d2d5d;
  --color-group-avatar-fuchsia-text: #ff66ff;
  --color-group-avatar-fuchsia-bg: #5d225d;
  --color-group-avatar-rose-text: #ff6b9d;
  --color-group-avatar-rose-bg: #5d2244;

  /* Light theme gradients: from/to with white text */
  --color-group-avatar-red-from: #f87171;
  --color-group-avatar-red-to: #fb7185;
  --color-group-avatar-orange-from: #fb923c;
  --color-group-avatar-orange-to: #f59e0b;
  --color-group-avatar-yellow-from: #fbbf24;
  --color-group-avatar-yellow-to: #d97706;
  --color-group-avatar-lime-from: #84cc16;
  --color-group-avatar-lime-to: #16a34a;
  --color-group-avatar-teal-from: #2dd4bf;
  --color-group-avatar-teal-to: #06b6d4;
  --color-group-avatar-blue-from: #60a5fa;
  --color-group-avatar-blue-to: #6366f1;
  --color-group-avatar-violet-from: #a78bfa;
  --color-group-avatar-violet-to: #9333ea;
  --color-group-avatar-fuchsia-from: #e879f9;
  --color-group-avatar-fuchsia-to: #ec4899;
  --color-group-avatar-rose-from: #fb7185;
  --color-group-avatar-rose-to: #db2777;

  /* ---- Bot Avatar Colors (WWW addition) ---- */
  --color-bot-avatar-slate-bg: #334155;
  --color-bot-avatar-slate-text: #94a3b8;
  --color-bot-avatar-sky-bg: #0c4a6e;
  --color-bot-avatar-sky-text: #38bdf8;
  --color-bot-avatar-indigo-bg: #3730a3;
  --color-bot-avatar-indigo-text: #818cf8;
  --color-bot-avatar-cyan-bg: #155e75;
  --color-bot-avatar-cyan-text: #22d3ee;
  --color-bot-avatar-emerald-bg: #064e3b;
  --color-bot-avatar-emerald-text: #34d399;
  --color-bot-avatar-amber-bg: #78350f;
  --color-bot-avatar-amber-text: #fbbf24;
  --color-bot-avatar-stone-bg: #44403c;
  --color-bot-avatar-stone-text: #a8a29e;
  --color-bot-avatar-violet-bg: #4c1d95;
  --color-bot-avatar-violet-text: #a78bfa;
  --color-bot-avatar-teal-bg: #134e4a;
  --color-bot-avatar-teal-text: #2dd4bf;

  /* ---- Shadow Tokens (AIC source of truth) ----
     surface-modal = rgba(0,0,0,0.16), glass-outer-shadow = rgba(0,0,0,0.02) */
  --shadow-token-sm: 0 1px 6px rgba(0, 0, 0, 0.16);
  --shadow-token-md: 0 2px 10px rgba(0, 0, 0, 0.16);
  --shadow-token-lg: 0 8px 32px rgba(0, 0, 0, 0.16);
  --shadow-token-modal: 0 24px 80px rgba(0, 0, 0, 0.16);
  --shadow-glass: 0px 0px 32px 0px rgba(0, 0, 0, 0.02);

  /* ---- Border Radius (AIC source of truth) ---- */
  --radius-token-none: 0px;
  --radius-token-xs: 0.25px;
  --radius-token-sm: 6px;
  --radius-token-md: 10px;
  --radius-token-lg: 12px;
  --radius-token-xl: 16px;

  /* ---- Spacing Tokens (AIC source of truth) ----
     Generates p-token-1, gap-token-2, etc. */
  --spacing-token-half: 2px;
  --spacing-token-1: 4px;
  --spacing-token-2: 8px;
  --spacing-token-3: 12px;
  --spacing-token-4: 16px;
  --spacing-token-5: 20px;
  /* WWW addition: stable width for the Meet lobby's Scribe settings pane. */
  --spacing-scribe-panel: 28rem;
  /* WWW addition: minimum presenter-strip tile footprint in Meet. */
  --spacing-meet-presenter-strip: 160px;
  --spacing-meet-presenter-tile-height: 90px;
  /* WWW addition: max inline size for chat message image/video thumbnails. */
  --spacing-chat-media-max: 300px;
  /* WWW addition: min readable width when upscaling small chat media thumbnails. */
  --spacing-chat-media-min: 120px;
  /* WWW addition: stack multi-image gallery to 1/row below this container width. */
  --spacing-chat-media-gallery-stack: 800px;
  /* WWW addition: stack thread-panel multi-image gallery to 1/row below this width. */
  --spacing-chat-media-thread-stack: 480px;
  /* WWW addition: page gutter for product-shell surfaces (SocialSurfacePage). */
  --spacing-surface-gutter: 2rem;

  /* ---- Background Gradients (AIC source of truth) ---- */
  --surface-background-grad-start: #040a14;
  --surface-background-grad-end: #07101c;
  --surface-background-dialog-grad-end: #4c4c4c;
  --gradient-nav-start: rgba(30, 30, 31, 0.9);
  --gradient-nav-end: rgba(30, 31, 32, 0);

  /* ---- Dialog Colors (WWW addition) ---- */
  --color-dialog-background: rgba(255, 255, 255, 0.02);
  --color-dialog-action-button: #181818;

  /* ---- Agent Activity Panel (WWW addition) ---- */
  --color-border-subtle: rgba(255, 255, 255, 0.06);
  --color-terminal-bg: #0d0f13;
  --color-terminal-success: #4ade80;
  --color-browser-chrome-bg: #22262f;
  --color-browser-pane-bg: #1a1d24;
  --color-toggle-track: #3a3a3c;
  --color-globe-bubble-bg: rgba(86, 101, 128, 0.1);
  --color-cta-bg: #ebebeb;
  --color-cta-bg-hover: #e0e0e0;
  --color-cta-bg-active: #d2d2d2;

  /* ---- Icing Design System (AIC) ---- */
  --color-icing-panel-border: rgba(255, 255, 255, 0.1);
  --color-icing-text-primary: #d8d9da;
  --color-icing-text-secondary: #898c90;
  /* Nav sidebar item text — prototype --text-2 */
  --color-icing-nav-text: #a1a1a8;
  --color-icing-nav-muted: #71717a;
  --color-icing-nav-active-bg: #141416;
  --color-icing-nav-active-text: #ececef;
  --color-icing-panel-bg: #16171a;
  /* Activity strip above composer: lighter than icing-input-bg; border matches Figma stack */
  --color-icing-activity-bar: #1f1f23;
  --color-icing-activity-bar-border: #333336;
  --color-icing-outer-bg: #0e0f13;
  --color-icing-input-bg: #1a1b1e;
  /* Message bubble colors: user sent & human group members */
  --color-icing-user-msg-bg: color-mix(in srgb, #d8d9da 25%, #16171a);
  --color-icing-user-msg-text: #d8d9da;
  --color-icing-human-msg-bg: color-mix(in srgb, #d8d9da 10%, #16171a);
  --color-icing-human-msg-text: #d8d9da;

  /* Icing overlay tokens — matches AIC priority-inbox/tokens.css */
  --color-icing-overlay-subtle: rgba(255, 255, 255, 0.02);
  --color-icing-overlay-soft: rgba(255, 255, 255, 0.04);
  --color-icing-overlay-strong: rgba(255, 255, 255, 0.07);

  /* Command Center tokens — matches AIC priority-inbox/tokens.css */
  --color-cc-text-readable: #898c90;
  --color-cc-red: rgb(200, 115, 70);
  --color-cc-amber: #c49a3c;
  --color-cc-emerald: rgb(130, 170, 130);
  --color-cc-red-soft: rgba(200, 115, 70, 0.1);
  --color-cc-amber-soft: rgba(196, 154, 60, 0.1);
  --color-cc-emerald-soft: rgba(130, 170, 130, 0.1);
  --color-cc-lavender-soft: rgba(176, 140, 255, 0.06);
  --color-cc-cta-from: #9b72f0;
  --color-cc-cta-to: #b08cff;
  /* Sync / thin progress bars in Command Center (Figma track height) */
  --spacing-cc-sync-bar: 5px;
}

:root {
  --sat: max(54px, env(safe-area-inset-top, 0px));
  --sab: env(safe-area-inset-bottom, 0px);
  --feature-card-bg: #2a3548;
  --feature-card-visual-bg: #34445d;
  --color-primary: #fff;
  --color-bg-primary: #040a14;
  --color-bg-secondary: #1877f2;
  --color-bg-tertiary: #6f0;
  --color-text-primary: #fff;
  --color-text-secondary: #181818;
  --color-border: rgba(0, 0, 0, 0.06);
  --color-border-hover: rgba(0, 0, 0, 0.1);
  --color-border-focus: rgba(59, 130, 246, 0.5);
  --color-border-secondary: rgba(255, 255, 255, 0.1);
  --color-border-tertiary: rgba(255, 255, 255, 0.3);
  --border-color-secondary: rgba(255, 255, 255, 0.1);
  --border-secondary: rgba(255, 255, 255, 0.1);
  --color-surface-input: rgba(255, 255, 255, 0.05);
  --color-surface-popover: rgba(255, 255, 255, 0.06);
  --color-surface-progress-track: rgba(255, 255, 255, 0.08);
  --color-progress-fill: rgba(255, 255, 255, 0.5);
  --color-input-placeholder: #bfbfbf;
  --color-content-muted: #8e8e8e;
  --color-code-bg: rgba(160, 160, 160, 0.28);
  --color-code-text: #e8912d;
  --color-code-border: rgba(128, 128, 128, 0.3);
  --color-code-bg-subtle: rgba(128, 128, 128, 0.06);
  --color-theme-stroke-light: rgba(0, 0, 0, 0.12);
  --color-theme-stroke-dark: rgba(255, 255, 255, 0.2);
  --color-globe-bubble-bg: rgba(86, 101, 128, 0.1);
  --color-browser-chrome-bg: #22262f;
  --color-browser-pane-bg: #1a1d24;
  --color-toggle-track: #3a3a3c;
  --color-cta-bg: #ebebeb;
  --color-cta-bg-hover: #e0e0e0;
  --color-cta-bg-active: #d2d2d2;
  --spacing-1: 4px;
  --spacing-2: 8px;
  --spacing-2-5: 10px;
  --spacing-3: 12px;
  --spacing-4: 16px;
  --spacing-5: 20px;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --font-sans:
    var(--font-onest), var(--font-inter-variable), -apple-system,
    BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: var(--font-geist-mono), 'SF Mono', 'Consolas', monospace;
  --font-family-sans:
    var(--font-onest), 'Inter Variable', 'Inter', system-ui, sans-serif;
  --font-family-sf-pro: 'SF Pro', system-ui, sans-serif;
  --font-family-system:
    -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, system-ui,
    sans-serif;
  --font-size-micro: 10px;
  --font-size-caption: 11px;
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-base: 1rem;
  --font-size-md: 16px;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 2rem;
  --leading-normal: 1.2;
  --font-size-h1: 80px;
  --line-height-h1: 96px;
  --font-size-h2: 39px;
  --line-height-h2: 44px;
  --font-size-h3: 28px;
  --line-height-h3: 32px;
  --font-size-h4: 22px;
  --line-height-h4: 26px;
  --font-size-h5: 18px;
  --line-height-h5: 22px;
  --font-size-h6: 16px;
  --line-height-h6: 20px;
  --font-size-heading: 17px;
  --line-height-heading: 22px;
  --font-size-body: 15px;
  --line-height-body: 20px;
  --font-size-subtitle: 13px;
  --line-height-subtitle: 16px;
  --font-size-chat-body: 17px;
  --line-height-chat-body: 22px;
  --markdown-font-family: var(--font-family-sans);
  --markdown-paragraph-gap: var(--spacing-4);
  --markdown-list-gap: var(--spacing-2);
  --markdown-h1-font-size: 24px;
  --markdown-h1-line-height: 36px;
  --markdown-h1-font-weight: 600;
  --markdown-h2-font-size: 17px;
  --markdown-h2-line-height: 32px;
  --markdown-h2-font-weight: 600;
  --markdown-h3-font-size: 16px;
  --markdown-h3-line-height: 27px;
  --markdown-h3-font-weight: 600;
  --markdown-h4-font-size: 15px;
  --markdown-h4-line-height: 22px;
  --markdown-h5-font-size: 15px;
  --markdown-h5-line-height: 22px;
  --markdown-h4-font-weight: 400;
  --markdown-h5-font-weight: 400;
  --markdown-h6-font-size: 15px;
  --markdown-h6-line-height: 22px;
  --markdown-h6-font-weight: 400;
  --markdown-body-font-size: 15px;
  --markdown-body-line-height: 22px;
  --markdown-body-font-weight: 400;
  --markdown-body-emphasis-font-weight: 600;
  --stroke-md: 1.25px;
  --width-xl: 576px;
  --cell-group: 28px;
  --color-avatar-cherry: #ff3838;
  --color-avatar-orange: #ff6b35;
  --color-avatar-tangerine: #ff9f0a;
  --color-avatar-sunshine: #ffd60a;
  --color-avatar-lime: #30d158;
  --color-avatar-teal: #17c2b4;
  --color-avatar-sky: #64d2ff;
  --color-avatar-blue: #0088ff;
  --color-avatar-blueberry: #5e5ce6;
  --color-avatar-lavender: #b08cff;
  --color-avatar-fuchsia: #d228f0;
  --color-avatar-rose: #ff6b9d;
  --color-avatar-mint: #00c87a;
  --color-avatar-violet: #bf5af2;
  --color-avatar-sky-alt: #32ade6;
  --avatar-blue: #0088ff;
  --green: #66ff00;
  --green-20: rgba(102, 255, 0, 0.2);
  --warning: #ff6600;
  --lavender: #b08cff;
  --cc-lavender-glow: rgba(176, 140, 255, 0.04);
  --accent-bg: rgba(152, 234, 255, 0.2);
  --core-background: linear-gradient(
    180deg,
    var(--surface-background-grad-start, #040a14) 0%,
    var(--surface-background-grad-end, #07101c) 100%
  );
  --background: oklch(0.145 0 0);
  --radius: 0.625rem;
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.205 0 0);
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.205 0 0);
  --popover-foreground: oklch(0.985 0 0);
  --primary: oklch(0.922 0 0);
  --primary-foreground: oklch(0.205 0 0);
  --secondary: oklch(0.269 0 0);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.269 0 0);
  --muted-foreground: oklch(0.708 0 0);
  --accent: oklch(0.269 0 0);
  --accent-foreground: oklch(0.985 0 0);
  --destructive: oklch(0.704 0.191 22.216);
  --border: oklch(1 0 0 / 10%);
  --input: oklch(1 0 0 / 15%);
  --ring: oklch(0.556 0 0);
  --chart-1: oklch(0.488 0.243 264.376);
  --chart-2: oklch(0.696 0.17 162.48);
  --chart-3: oklch(0.769 0.188 70.08);
  --chart-4: oklch(0.627 0.265 303.9);
  --chart-5: oklch(0.645 0.246 16.439);
  --sidebar: oklch(0.205 0 0);
  --sidebar-foreground: oklch(0.985 0 0);
  --sidebar-primary: oklch(0.488 0.243 264.376);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.269 0 0);
  --sidebar-accent-foreground: oklch(0.985 0 0);
  --sidebar-border: oklch(1 0 0 / 10%);
  --sidebar-ring: oklch(0.556 0 0);
  --glass-stroke: rgba(255, 255, 255, 0.1);
  --button-glass-background: rgba(255, 255, 255, 0.02);
  --button-glass-inner-shadow: rgba(255, 255, 255, 0.02);
  --button-glass-outer-shadow: rgba(0, 0, 0, 0.02);
  --color-online: #66ff00;
  --color-chat-circle-sender-background: #ffffff;
  --color-chat-circle-receiver-background: #ffffff;
  --color-sender-text: #ffffff;
  --color-receiver-text: #f1f1f1;
  --color-chat-timestamp: #ffffff;
  --color-chat-sender-play-bar: #ffffff;
  --color-chat-receiver-play-bar: #ffffff;
  --color-chat-sender-play-dot: #ffffff;
  --color-chat-receiver-play-dot: #ffffff;
  --shadow-sm: 0 1px 6px var(--color-surface-modal, rgba(0, 0, 0, 0.16));
  --shadow-md: 0 2px 10px var(--color-surface-modal, rgba(0, 0, 0, 0.16));
  --shadow-lg: 0 8px 32px var(--color-surface-modal, rgba(0, 0, 0, 0.16));
  --shadow-modal: 0 24px 80px var(--color-surface-modal, rgba(0, 0, 0, 0.16));
  --radius-none: 0px;
  --radius-xs: 0.25px;
  --sidebar-bg-start: #040a14;
  --sidebar-bg-end: #030912;
  --dot-grid-color: rgba(140, 180, 220, 0.12);
  --timestamp-received: rgba(235, 235, 245, 0.6);
  --icing-outer-bg: #0e0f13;
  --icing-panel-bg: #16171a;
  --icing-panel-border: rgba(255, 255, 255, 0.1);
  --icing-input-bg: #1a1b1e;
  --cc-card-bg: #1a1b1e;
  --cc-cta-from: #9b72f0;
  --cc-cta-to: #b08cff;
  --cc-red: rgb(200, 115, 70);
  --cc-amber: #c49a3c;
  --cc-emerald: rgb(130, 170, 130);
  --cc-red-soft: rgba(200, 115, 70, 0.1);
  --cc-amber-soft: rgba(196, 154, 60, 0.1);
  --cc-emerald-soft: rgba(130, 170, 130, 0.1);
  --cc-lavender-soft: rgba(176, 140, 255, 0.06);
  --cc-checkbox-border: rgba(255, 255, 255, 0.15);
  --cc-checkbox-border-hover: rgba(255, 255, 255, 0.25);
  --icing-overlay-soft: rgba(255, 255, 255, 0.04);
  --cc-text-readable: #898c90;
  --color-alert-green: #a8cd99;
  --color-alert-green-10: rgba(168, 205, 153, 0.1);
  --icing-text-primary: #d8d9da;
  --icing-text-secondary: #898c90;
  --icing-ai-sender: #c1a7c1;
  --icing-user-msg-bg: color-mix(in srgb, #d8d9da 25%, #16171a);
  --icing-user-msg-text: #d8d9da;
  --icing-human-msg-bg: color-mix(in srgb, #d8d9da 10%, #16171a);
  --icing-human-msg-text: #d8d9da;
  --icing-activity-bar-bg: #1f1f23;
  --icing-activity-bar-border: #333336;
  --ios-fills-primary: #78787833;
  --ios-fills-secondary: #78788052;
  --ios-fills-vibrant-primary: #333333;
  --ios-labels-primary: #ffffff;
  --ios-labels-secondary: #ebebf599;
  --ios-labels-vibrant-primary: #ffffff;
  --ios-keyboard-keys: #454545;
  --ios-keyboard-glyphs-primary: #a6a6a6;
  --ios-keyboard-emoji-mic: #ffffffba;
}

[data-theme='light'] {
  --color-primary: #181818;
  --color-bg-primary: #fbfbfb;
  --color-text-primary: #1a1b1e;
  --color-text-secondary: #fff;
  --color-content-primary: #1a1b1e;
  --color-content-secondary: #6f7276;
  --color-content-tertiary: rgba(0, 0, 0, 0.4);
  --color-content-quaternary: rgba(0, 0, 0, 0.15);
  --color-surface-primary: #ffffff;
  --color-surface-transparent: rgba(26, 27, 30, 0.1);
  --color-surface-transparent-selected: rgba(26, 27, 30, 0.18);
  --color-surface-background: #fbfbfb;
  --color-surface-sidebar: #fbfbfb;
  --color-surface-contrast: #000000;
  --color-surface-modal: rgba(0, 0, 0, 0.16);
  --surface-background-grad-start: #fbfbfb;
  --surface-background-grad-end: #fbfbfb;
  --surface-background-dialog-grad-end: #ffffff;
  --color-gradient-nav-start: rgba(251, 251, 251, 0.85);
  --color-gradient-nav-end: rgba(251, 251, 251, 0);
  --gradient-nav-start: rgba(251, 251, 251, 0.85);
  --gradient-nav-end: rgba(251, 251, 251, 0);
  --color-chat-user-primary: #ffffff;
  --color-chat-user-secondary: #1a1b1e;
  --color-chat-text-primary-sent: #add5ff;
  --color-chat-text-primary-received: #1a1a1a;
  --color-chat-text-secondary-sent: rgba(255, 255, 255, 0.7);
  --color-chat-text-secondary-received: #898c90;
  --color-bg-agent-bubble: rgba(0, 136, 255, 0.5);
  --color-chat-unread-divider: #e01e5a;
  --color-bg-list: rgba(26, 27, 30, 0.04);
  --color-button-primary: #1a1b1e;
  --color-button-primary-alt: #1a1b1e;
  --color-button-primary-text: #f1f5f9;
  --color-button-secondary: #f2f2f4;
  --color-button-tertiary: rgba(0, 0, 0, 0.04);
  --color-button-glass-bg: rgba(252, 253, 253, 0.2);
  --color-button-glass-selected: rgba(255, 255, 255, 0.5);
  --color-button-glass-hover: rgba(255, 255, 255, 0.5);
  --color-button-glass-shadow: rgba(0, 0, 0, 0.1);
  --color-button-glass-stroke: rgba(255, 255, 255, 0.5);
  --color-glass-hover-bg: rgba(255, 255, 255, 0.5);
  --color-page-bg: #fbfbfb;
  --color-loading-page-bg: rgba(0, 0, 0, 0.08);
  --color-card-bg: rgba(255, 255, 255, 0.5);
  --color-card-bg-solid: #ffffff;
  --color-card-bg-dark: #050505;
  --color-card-surface: #2f2f2f;
  --color-card-background-blurred: rgba(240, 240, 244, 0.98);
  --color-card-background-solid: #e8ecf0;
  --color-card-usage: #ffd9c0;
  --color-card-bg-blurred: rgba(240, 240, 244, 0.98);
  --color-success: #a8cd99;
  --color-success-20: rgba(168, 205, 153, 0.2);
  --color-alert-green: #a8cd99;
  --color-alert-green-10: rgba(168, 205, 153, 0.1);
  --color-accent-custom: #98eaff;
  --color-message-focus: #0091ff;
  --color-online: #a8cd99;
  --color-marketing-off-white: #1a1b1e;
  --color-always-white: #ffffff;
  --color-overlay: rgba(0, 0, 0, 0.5);
  --color-special-avatar-overlay: rgba(255, 255, 255, 0.75);
  --color-avatar-tangerine: #ff801e;
  --color-avatar-sunshine: #e3cc00;
  --color-avatar-lime: #4ec217;
  --color-avatar-sky: #32ade6;
  --color-avatar-rose: #f10084;
  --color-group-avatar-red-text: #ffffff;
  --color-group-avatar-orange-text: #ffffff;
  --color-group-avatar-yellow-text: #ffffff;
  --color-group-avatar-lime-text: #ffffff;
  --color-group-avatar-teal-text: #ffffff;
  --color-group-avatar-blue-text: #ffffff;
  --color-group-avatar-violet-text: #ffffff;
  --color-group-avatar-fuchsia-text: #ffffff;
  --color-group-avatar-rose-text: #ffffff;
  --color-border-secondary: rgba(0, 0, 0, 0.1);
  --color-border-tertiary: rgba(0, 0, 0, 0.2);
  --border-color-secondary: rgba(0, 0, 0, 0.1);
  --color-border-subtle: rgba(0, 0, 0, 0.06);
  --color-surface-input: #f2f2f4;
  --color-surface-popover: rgba(0, 0, 0, 0.04);
  --color-surface-progress-track: rgba(0, 0, 0, 0.08);
  --color-progress-fill: rgba(0, 0, 0, 0.5);
  --color-input-placeholder: #8e8e8e;
  --color-content-muted: #8e8e8e;
  --color-code-bg: rgba(96, 96, 96, 0.18);
  --color-code-text: #c2571a;
  --color-code-border: rgba(128, 128, 128, 0.25);
  --color-code-bg-subtle: rgba(128, 128, 128, 0.06);
  --color-theme-stroke-light: rgba(0, 0, 0, 0.12);
  --color-theme-stroke-dark: rgba(255, 255, 255, 0.2);
  --glass-stroke: rgba(255, 255, 255, 0.5);
  --button-glass-background: rgba(252, 253, 253, 0.2);
  --button-glass-inner-shadow: rgba(255, 255, 255, 0.25);
  --button-glass-outer-shadow: rgba(0, 0, 0, 0.1);
  --color-sender-text: #1b4389;
  --color-receiver-text: #1a1a1a;
  --color-chat-timestamp: #ffffff;
  --color-chat-sender-play-bar: #1a1a1a;
  --color-chat-receiver-play-bar: #979797;
  --color-chat-sender-play-dot: #243c56;
  --color-chat-receiver-play-dot: #ffffff;
  --color-chat-circle-sender-background: #ffffff;
  --color-chat-circle-receiver-background: #ffffff;
  --avatar-blue: #0088ff;
  --green: #a8cd99;
  --green-20: rgba(168, 205, 153, 0.2);
  --lavender: #b08cff;
  --sidebar-bg-start: #fbfbfb;
  --sidebar-bg-end: #fbfbfb;
  --dot-grid-color: rgba(0, 40, 80, 0.06);
  --timestamp-received: rgba(26, 27, 30, 0.45);
  --feature-card-bg: #e4e6ea;
  --feature-card-visual-bg: #d8dce2;
  --icing-outer-bg: #fbfbfb;
  --icing-panel-bg: #ffffff;
  --icing-panel-border: rgba(0, 0, 0, 0.1);
  --color-icing-panel-border: rgba(0, 0, 0, 0.1);
  --color-icing-text-primary: #1a1b1e;
  --color-icing-text-secondary: #6f7276;
  --color-icing-nav-text: #52525b;
  --color-icing-nav-muted: #8a8a90;
  --color-icing-nav-active-bg: #ffffff;
  --color-icing-nav-active-text: #18181b;
  --color-icing-panel-bg: #ffffff;
  --color-icing-activity-bar: #e4e6ec;
  --color-icing-activity-bar-border: #d1d5db;
  --color-icing-outer-bg: #fbfbfb;
  --color-icing-input-bg: #f2f2f4;
  --color-icing-user-msg-bg: rgba(26, 27, 30, 0.1);
  --color-icing-user-msg-text: #1a1b1e;
  --color-icing-human-msg-bg: rgba(26, 27, 30, 0.05);
  --color-icing-human-msg-text: #1a1b1e;
  --icing-input-bg: #f2f2f4;
  --cc-card-bg: #fbfbfb;
  --icing-text-primary: #1a1b1e;
  --icing-text-secondary: #6f7276;
  --icing-ai-sender: #965c96;
  --icing-user-msg-bg: rgba(26, 27, 30, 0.1);
  --icing-user-msg-text: #1a1b1e;
  --icing-human-msg-bg: rgba(26, 27, 30, 0.05);
  --icing-human-msg-text: #1a1b1e;
  --icing-activity-bar-bg: #e4e6ec;
  --icing-activity-bar-border: #d1d5db;
  --color-cc-text-readable: #6f7276;
  --color-icing-overlay-subtle: rgba(15, 23, 42, 0.025);
  --color-icing-overlay-soft: rgba(15, 23, 42, 0.045);
  --color-icing-overlay-strong: rgba(15, 23, 42, 0.07);
  --color-cc-text-readable: #6f7276;
  --color-cc-red: rgb(180, 100, 60);
  --color-cc-amber: #a8832e;
  --color-cc-emerald: rgb(100, 145, 100);
  --color-cc-red-soft: rgba(180, 100, 60, 0.08);
  --color-cc-amber-soft: rgba(168, 131, 46, 0.08);
  --color-cc-emerald-soft: rgba(100, 145, 100, 0.08);
  --color-cc-lavender-soft: rgba(176, 140, 255, 0.08);
  --color-cc-cta-from: #8b5cf6;
  --color-cc-cta-to: #a78bfa;
  --cc-red: rgb(180, 100, 60);
  --cc-amber: #a8832e;
  --cc-emerald: rgb(100, 145, 100);
  --cc-red-soft: rgba(180, 100, 60, 0.08);
  --cc-amber-soft: rgba(168, 131, 46, 0.08);
  --cc-emerald-soft: rgba(100, 145, 100, 0.08);
  --cc-lavender-soft: rgba(176, 140, 255, 0.08);
  --cc-checkbox-border: rgba(15, 23, 42, 0.15);
  --cc-checkbox-border-hover: rgba(15, 23, 42, 0.22);
  --icing-overlay-soft: rgba(15, 23, 42, 0.045);
  --cc-text-readable: #6f7276;
  --cc-cta-from: #8b5cf6;
  --cc-cta-to: #a78bfa;
  --color-terminal-bg: #f5f5f5;
  --color-terminal-success: #16a34a;
  --color-dialog-background: rgba(0, 0, 0, 0.02);
  --color-dialog-action-button: #f1f5f9;
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.145 0 0);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.145 0 0);
  --primary: oklch(0.205 0 0);
  --primary-foreground: oklch(0.985 0 0);
  --secondary: oklch(0.97 0 0);
  --secondary-foreground: oklch(0.205 0 0);
  --muted: oklch(0.97 0 0);
  --muted-foreground: oklch(0.556 0 0);
  --accent: oklch(0.88 0 0);
  --accent-foreground: oklch(0.205 0 0);
  --destructive: oklch(0.577 0.245 27.325);
  --border: oklch(0.922 0 0);
  --input: oklch(0.922 0 0);
  --ring: oklch(0.708 0 0);
  --chart-1: oklch(0.646 0.222 41.116);
  --chart-2: oklch(0.6 0.118 184.704);
  --chart-3: oklch(0.398 0.07 227.392);
  --chart-4: oklch(0.828 0.189 84.429);
  --chart-5: oklch(0.769 0.188 70.08);
  --sidebar: oklch(0.985 0 0);
  --sidebar-foreground: oklch(0.145 0 0);
  --sidebar-primary: oklch(0.205 0 0);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.97 0 0);
  --sidebar-accent-foreground: oklch(0.205 0 0);
  --sidebar-border: oklch(0.922 0 0);
  --sidebar-ring: oklch(0.708 0 0);
}

@media (max-width: 768px) {
  :root {
    --text-h1: 60px;
    --text-h1--line-height: 72px;
    --text-h2: 36px;
    --text-h2--line-height: 40px;
    --text-h3: 26px;
    --text-h3--line-height: 32px;
    --font-size-h1: 60px;
    --line-height-h1: 72px;
    --font-size-h2: 36px;
    --line-height-h2: 40px;
    --font-size-h3: 26px;
    --line-height-h3: 32px;
  }
}

@theme inline {

  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --radius-2xl: calc(var(--radius) + 8px);
  --radius-3xl: calc(var(--radius) + 12px);
  --radius-4xl: calc(var(--radius) + 16px);
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);
  /* AI/agent accent for full-width chat layouts (theme-aware via --icing-ai-sender). */
  --color-icing-ai-sender: var(--icing-ai-sender);
}

@media (max-width: 767px) {
  :root {
    --text-h2: 36px;
    --text-h2--line-height: 40px;
    --text-h3: 26px;
    --text-h3--line-height: 32px;
  }
}

@theme {

  /* ---- Quiet Sky colors (→ bg-ls-*, text-ls-*, border-ls-*) ---- */
  --color-ls-canvas: #fbfbfd;
  --color-ls-surface: #ffffff;
  --color-ls-ink: #0e0e14;
  --color-ls-muted: #5b5b66;
  --color-ls-faint: #8a8a94;

  --color-ls-night: #0a0d12;
  --color-ls-night-2: #0d1117;
  --color-ls-night-3: #12161f;
  --color-ls-night-ink: #edeef4;
  --color-ls-night-muted: #a7a9bc;
  --color-ls-night-faint: #7e8095;

  --color-ls-accent: #0fa8ce; /* the one brand color */
  --color-ls-accent-deep: #0b86a6; /* small text / pressed, on light */
  --color-ls-accent-night: #5fd4f2; /* the accent on the night sky */

  --color-ls-danger: #c24558;
  --color-ls-danger-night: #ff8a96;

  --color-ls-mint: #2bd9a9; /* verified / live only */
  --color-ls-mint-deep: #14795c;
  --color-ls-mint-night: #8fe0c4;

  /* ---- Quiet Sky radii (→ rounded-ls-*) ---- */
  --radius-ls-frame: 20px;
  --radius-ls-card: 16px;
  --radius-ls-inner: 14px;
  --radius-ls-ctrl: 12px;
  --radius-ls-tight: 8px;
  --radius-ls-pill: 99px;

  /* ---- Quiet Sky shadows (→ shadow-ls-*) ---- */
  --shadow-ls-card:
    0 1px 2px rgba(14, 14, 20, 0.04), 0 24px 64px rgba(14, 14, 20, 0.12);
  --shadow-ls-soft:
    0 1px 2px rgba(14, 14, 20, 0.04), 0 12px 32px rgba(14, 14, 20, 0.07);
}

@custom-variant light ([data-theme='light'] &);

@custom-variant dark (&:is(.dark *));

/* @theme tokens mirrored for plain-CSS var() resolution — see build-tokens.mjs. */
:root {
  --spacing-agenda-hour: 96px;
  --cal-hour: 96px;
  --cal-head-h: 3.25rem;
  --spacing-agenda-time-label: 56px;
  --spacing-agenda-event-inset: 2px;
  --spacing-cal-month-row-min: 7rem;
  --radius-pill: 99px;
  --radius-frame: 20px;
  --radius-card: 16px;
  --radius-inner: 14px;
  --radius-ctrl: 12px;
  --radius-tight: 8px;
  --text-title-1: 28px;
  --text-title-1--line-height: 34px;
  --text-title-2: 19px;
  --text-title-2--line-height: 25px;
  --text-title-3: 15px;
  --text-title-3--line-height: 21px;
  --text-body: 15px;
  --text-body--line-height: 20px;
  --text-small: 13px;
  --text-small--line-height: 19px;
  --text-caption: 12px;
  --text-caption--line-height: 17px;
  --text-micro: 10px;
  --text-micro--line-height: 14px;
  --text-qs-body: 14px;
  --text-qs-body--line-height: 21px;
  --text-qs-caption: 12px;
  --text-qs-caption--line-height: 17px;
  --text-qs-micro: 11px;
  --text-qs-micro--line-height: 15px;
  --font-display: inherit;
  --text-h1: 80px;
  --text-h1--line-height: 96px;
  --text-h2: 39px;
  --text-h2--line-height: 44px;
  --text-h3: 28px;
  --text-h3--line-height: 32px;
  --text-heading: 17px;
  --text-heading--line-height: 22px;
  --text-body2: 14px;
  --text-body2--line-height: 18px;
  --text-subtitle: 13px;
  --text-subtitle--line-height: 16px;
  --text-xs: 12px;
  --text-xs--line-height: 16px;
  --text-chat-body: 17px;
  --text-chat-body--line-height: 22px;
  --color-lavender: #b08cff;
  --color-warning: #ff6600;
  --color-error: #fca5a5;
  --color-system-blue: #0091ff;
  --color-system-red: #ff4245;
  --color-system-green: #34c759;
  --color-indicator-dot: rgb(140, 180, 220);
  --color-system-blue-12: rgba(0, 136, 255, 0.12);
  --color-system-blue-20: rgba(0, 136, 255, 0.2);
  --color-link: #3da9fc;
  --color-group-avatar-red-bg: #5d2222;
  --color-group-avatar-orange-bg: #5d3322;
  --color-group-avatar-yellow-bg: #5d4422;
  --color-group-avatar-lime-bg: #2d5d11;
  --color-group-avatar-teal-bg: #115d5d;
  --color-group-avatar-blue-bg: #113a5d;
  --color-group-avatar-violet-bg: #3d2d5d;
  --color-group-avatar-fuchsia-bg: #5d225d;
  --color-group-avatar-rose-bg: #5d2244;
  --color-group-avatar-red-from: #f87171;
  --color-group-avatar-red-to: #fb7185;
  --color-group-avatar-orange-from: #fb923c;
  --color-group-avatar-orange-to: #f59e0b;
  --color-group-avatar-yellow-from: #fbbf24;
  --color-group-avatar-yellow-to: #d97706;
  --color-group-avatar-lime-from: #84cc16;
  --color-group-avatar-lime-to: #16a34a;
  --color-group-avatar-teal-from: #2dd4bf;
  --color-group-avatar-teal-to: #06b6d4;
  --color-group-avatar-blue-from: #60a5fa;
  --color-group-avatar-blue-to: #6366f1;
  --color-group-avatar-violet-from: #a78bfa;
  --color-group-avatar-violet-to: #9333ea;
  --color-group-avatar-fuchsia-from: #e879f9;
  --color-group-avatar-fuchsia-to: #ec4899;
  --color-group-avatar-rose-from: #fb7185;
  --color-group-avatar-rose-to: #db2777;
  --color-bot-avatar-slate-bg: #334155;
  --color-bot-avatar-slate-text: #94a3b8;
  --color-bot-avatar-sky-bg: #0c4a6e;
  --color-bot-avatar-sky-text: #38bdf8;
  --color-bot-avatar-indigo-bg: #3730a3;
  --color-bot-avatar-indigo-text: #818cf8;
  --color-bot-avatar-cyan-bg: #155e75;
  --color-bot-avatar-cyan-text: #22d3ee;
  --color-bot-avatar-emerald-bg: #064e3b;
  --color-bot-avatar-emerald-text: #34d399;
  --color-bot-avatar-amber-bg: #78350f;
  --color-bot-avatar-amber-text: #fbbf24;
  --color-bot-avatar-stone-bg: #44403c;
  --color-bot-avatar-stone-text: #a8a29e;
  --color-bot-avatar-violet-bg: #4c1d95;
  --color-bot-avatar-violet-text: #a78bfa;
  --color-bot-avatar-teal-bg: #134e4a;
  --color-bot-avatar-teal-text: #2dd4bf;
  --shadow-token-sm: 0 1px 6px rgba(0, 0, 0, 0.16);
  --shadow-token-md: 0 2px 10px rgba(0, 0, 0, 0.16);
  --shadow-token-lg: 0 8px 32px rgba(0, 0, 0, 0.16);
  --shadow-token-modal: 0 24px 80px rgba(0, 0, 0, 0.16);
  --shadow-glass: 0px 0px 32px 0px rgba(0, 0, 0, 0.02);
  --radius-token-none: 0px;
  --radius-token-xs: 0.25px;
  --radius-token-sm: 6px;
  --radius-token-md: 10px;
  --radius-token-lg: 12px;
  --radius-token-xl: 16px;
  --spacing-token-half: 2px;
  --spacing-token-1: 4px;
  --spacing-token-2: 8px;
  --spacing-token-3: 12px;
  --spacing-token-4: 16px;
  --spacing-token-5: 20px;
  --spacing-scribe-panel: 28rem;
  --spacing-meet-presenter-strip: 160px;
  --spacing-meet-presenter-tile-height: 90px;
  --spacing-chat-media-max: 300px;
  --spacing-chat-media-min: 120px;
  --spacing-chat-media-gallery-stack: 800px;
  --spacing-chat-media-thread-stack: 480px;
  --spacing-surface-gutter: 2rem;
  --spacing-cc-sync-bar: 5px;
  --color-ls-canvas: #fbfbfd;
  --color-ls-surface: #ffffff;
  --color-ls-ink: #0e0e14;
  --color-ls-muted: #5b5b66;
  --color-ls-faint: #8a8a94;
  --color-ls-night: #0a0d12;
  --color-ls-night-2: #0d1117;
  --color-ls-night-3: #12161f;
  --color-ls-night-ink: #edeef4;
  --color-ls-night-muted: #a7a9bc;
  --color-ls-night-faint: #7e8095;
  --color-ls-accent: #0fa8ce;
  --color-ls-accent-deep: #0b86a6;
  --color-ls-accent-night: #5fd4f2;
  --color-ls-danger: #c24558;
  --color-ls-danger-night: #ff8a96;
  --color-ls-mint: #2bd9a9;
  --color-ls-mint-deep: #14795c;
  --color-ls-mint-night: #8fe0c4;
  --radius-ls-frame: 20px;
  --radius-ls-card: 16px;
  --radius-ls-inner: 14px;
  --radius-ls-ctrl: 12px;
  --radius-ls-tight: 8px;
  --radius-ls-pill: 99px;
  --shadow-ls-card: ;
  --shadow-ls-soft: ;
}