/**
 * Agent Fleet design tokens — fleet-core layer.
 * Single source of truth for every app that `extends` fleet-core.
 * Docs: Projects/CustomerCareAgent/_doc/design-system/tokens.md
 *
 * Three tiers — components only read tier 2 (and tier 3 for themselves):
 *   1. Foundation   theme-independent scales: type, space, radius, motion, z-index
 *   2. Palette      per theme (dark / light): Apple system colors, edit these to re-skin
 *      Semantic     roles derived from the palette: --bg, --fg, --muted, --line, --accent…
 *   3. Component    local to one component, declared in that component (e.g. --sidebar-w)
 *
 * Theme:  html[data-theme="dark|light"]  ·  useTheme()
 * Brand:  html[data-brand="<name>"] overrides accent (see bottom of file)
 *
 * Loaded as a static stylesheet on purpose: it must work even when Vite SFC
 * style injection / hydration fails (ngrok + iPhone).
 */

/* ======================================================================
   1. Foundation
   ====================================================================== */

:root {
  /* Type families — Apple system type, platform UI font elsewhere. */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Reading scale (Apple HIG names) — articles, page titles, body copy. */
  --text-large-title: 2.125rem;
  --text-title-1: 1.75rem;
  --text-title-2: 1.375rem;
  --text-title-3: 1.25rem;
  --text-headline: 1.0625rem;
  --text-body: 1.0625rem;
  --text-callout: 1rem;
  --text-subhead: 0.9375rem;
  --text-footnote: 0.8125rem;
  --text-caption: 0.75rem;

  /* UI scale — dense app chrome: nav, tables, tags, buttons. */
  --text-ui-2xs: 0.68rem;  /* tags, overlines */
  --text-ui-xs: 0.75rem;   /* meta, hints */
  --text-ui-sm: 0.82rem;   /* secondary controls */
  --text-ui-md: 0.92rem;   /* nav items, buttons */
  --text-ui-lg: 1.05rem;   /* section headers */

  --tracking-title: -0.022em;
  --tracking-body: -0.016em;
  --tracking-ui: -0.01em;
  --tracking-overline: 0.1em;
  --leading-title: 1.15;
  --leading-body: 1.47;
  --leading-tight: 1.25;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* Space — 4px grid. */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;

  /* Radius. */
  --radius-xs: 0.375rem;
  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.25rem;
  --radius-pill: 999px;

  /* Control heights — buttons, inputs, nav items. */
  --control-sm: 2rem;
  --control-md: 2.5rem;
  --control-lg: 2.75rem;

  /* Icon sizes. */
  --icon-sm: 1rem;
  --icon-md: 1.2rem;
  --icon-lg: 1.4rem;

  /* Motion. */
  --duration-fast: 0.15s;
  --duration-base: 0.22s;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);

  /* Half steps, for tight inline rhythm (chips, meta rows). */
  --space-0-5: 0.125rem;
  --space-1-5: 0.375rem;

  /* Layering — one scale for the whole app; components never invent a z-index.
     header < sidebar < dropdown (menus, selects, date pickers) < overlay layers (dialog, drawer,
     popover opened from them) < toast. Native <dialog> and [popover] sit in the top layer anyway. */
  --z-sticky: 20;
  --z-header: 20;
  --z-sidebar: 30;
  --z-dropdown: 35;
  --z-dialog: 40;
  --z-drawer: 90;
  --z-popover: 100;
  --z-toast: 120;

  /* Writing direction as a number: 1 in LTR, -1 in RTL (html[dir] is set by i18n). For the rare
     physical offset that must mirror with the language — e.g. the drawer shadow below. */
  --dir: 1;

  /* Text and marks on a solid fill (accent, AI, danger…) and the base of every shade: the only raw
     colours components may reach, through these names (color-mix(in srgb, var(--shade) 30%, transparent)). */
  --on-fill: #fff;
  --shade: #000;
  /* Apple Contacts' grey monogram (UiAvatar), the same in both themes. */
  --monogram-from: #A5A5AA;
  --monogram-to: #86868B;

  /* Elevation — hairlines by default; a shadow only on floating layers. */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 8px 28px rgba(0, 0, 0, 0.18);
  --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.3);
  /* A panel on the inline-end edge casts toward the start (flips with --dir); -start is the mirror for a panel on the inline-start edge. */
  --shadow-drawer: calc(-24px * var(--dir)) 0 60px rgba(0, 0, 0, 0.3);
  --shadow-drawer-start: calc(24px * var(--dir)) 0 60px rgba(0, 0, 0, 0.3);
  --scrim: rgba(0, 0, 0, 0.4);
  --focus-ring: 0 0 0 3px var(--accent-soft), inset 0 0 0 1px var(--accent-ring);

  /* Layout — the shell's measures, so pages and sticky bars align with the header. */
  --header-h: 3.35rem;
  --page-pad-x: max(1.25rem, calc(env(safe-area-inset-right) + 1rem));
  --page-pad-top: 1.1rem;
  --page-pad-bottom: max(1.5rem, calc(env(safe-area-inset-bottom) + 1rem));
  --page-gap: 1rem;
  --content-max-narrow: 40rem;
  --content-max-wide: 56rem;

  /* Layout. */
  --content-max: 40rem;
}

[dir='rtl'] {
  --dir: -1;
}

/* ======================================================================
   2a. Palette — dark (default)
   Apple system colors (dark variants) on iOS grouped backgrounds.
   Text colors on tinted fills use Apple's accessible variants.
   ====================================================================== */

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

  /* Backgrounds — systemGroupedBackground ladder. */
  --bg: #000000;
  --surface-1: #1C1C1E;
  --surface-2: #2C2C2E;
  --surface-3: #3A3A3C;

  /* Separators. */
  --border: rgba(255, 255, 255, 0.12);
  --border-subtle: rgba(255, 255, 255, 0.07);
  --border-strong: rgba(255, 255, 255, 0.2);

  /* Labels. */
  --text-primary: #F5F5F7;
  --text-secondary: #AEAEB2;
  --text-muted: #8E8E93;

  /* System colors. */
  /* --accent: text, icons, rings.  --accent-fill: solid backgrounds with --accent-fg on top. */
  --accent: #2997FF;
  --accent-fill: #0071E3;
  --accent-muted: rgba(10, 132, 255, 0.16);
  --success: #30D158;
  --warning: #FF9F0A;
  --danger: #FF453A;
  --info: #A09EFF;

  --accent-fg: #FFFFFF;
  --accent-soft: rgba(10, 132, 255, 0.16);
  --accent-soft-strong: rgba(10, 132, 255, 0.26);
  --accent-ring: rgba(10, 132, 255, 0.5);

  /* Selection (interest picks, Save) — system yellow. */
  --select: #FFD60A;
  --select-fg: #1C1600;
  --select-fill: #FFD60A;
  --select-soft: rgba(255, 214, 10, 0.16);
  --select-ring: rgba(255, 214, 10, 0.5);

  --success-soft: rgba(48, 209, 88, 0.16);
  --danger-text: #FF6961;
  --danger-bg: rgba(255, 69, 58, 0.16);
  --danger-border: rgba(255, 69, 58, 0.4);
  --danger-glow: rgba(255, 69, 58, 0.24);
  --warning-fg: #1C1200;
  --warning-soft: rgba(255, 159, 10, 0.16);
  --info-soft: rgba(125, 122, 255, 0.18);

  /* AI-generated content (summaries, insights, "Powered by AI") — system purple. */
  --ai: #DA8FFF;
  --ai-soft: rgba(191, 90, 242, 0.16);
  --ai-line: rgba(191, 90, 242, 0.4);

  --sun: #FFD60A;
  --presence: #30D158;

  /* Materials. */
  --overlay: rgba(0, 0, 0, 0.6);
  --shadow: rgba(0, 0, 0, 0.5);
  --header-bg: rgba(22, 22, 23, 0.8);
  --nav-bg: rgba(22, 22, 23, 0.84);
  --input-bg: rgba(118, 118, 128, 0.24);

  --chip-bg: rgba(118, 118, 128, 0.24);
  --chip-fg: var(--text-primary);
  --chip-line: transparent;
  --chip-topic-bg: rgba(10, 132, 255, 0.16);
  --chip-topic-fg: #64B5FF;
  --chip-topic-line: rgba(10, 132, 255, 0.35);

  --on-media-fg: rgba(255, 255, 255, 0.96);
  --on-media-muted: rgba(255, 255, 255, 0.74);
  --on-media-faint: rgba(255, 255, 255, 0.5);
  --on-media-scrim: linear-gradient(180deg, rgba(0, 0, 0, 0.08) 0%, rgba(0, 0, 0, 0.78) 100%);

  --corr-fg: #7EE29A;
  --corr-bg: rgba(48, 209, 88, 0.16);
  --corr-line: rgba(48, 209, 88, 0.35);
  --corr-badge-fg: #00290E;
  --corr-badge-bg: #30D158;

  /* Data viz — system colors, full strength. */
  --care-blue: #0A84FF;
  --care-blue-ink: #9CCBFF;
  --care-good: #30D158;
  --care-warn: #FF9F0A;
  --care-bad: #FF453A;
  --viz-1: #0A84FF;
  --viz-2: #30D158;
  --viz-3: #FF9F0A;
  --viz-4: #BF5AF2;
  --viz-5: #64D2FF;
  --viz-6: #FF375F;
  --viz-grid: rgba(255, 255, 255, 0.08);
  --viz-axis: #8E8E93;

  /* Audio waveforms: upcoming = translucent, played = solid. */
  --wave-customer: rgba(48, 209, 88, 0.45);
  --wave-customer-played: #30D158;
  --wave-agent: rgba(10, 132, 255, 0.5);
  --wave-agent-played: #0A84FF;
  --wave-cursor: #F5F5F7;
}

/* ======================================================================
   2b. Palette — light
   ====================================================================== */

[data-theme='light'] {
  color-scheme: light;

  --bg: #F2F2F7;
  --surface-1: #FFFFFF;
  --surface-2: #F5F5F7;
  --surface-3: #E8E8ED;

  --border: rgba(0, 0, 0, 0.1);
  --border-subtle: rgba(0, 0, 0, 0.06);
  --border-strong: rgba(0, 0, 0, 0.18);

  --text-primary: #1D1D1F;
  --text-secondary: #636366;
  --text-muted: #76767B;

  --accent: #0066CC;
  --accent-fill: #0066CC;
  --accent-muted: rgba(0, 113, 227, 0.1);
  --success: #1E7A34;
  --warning: #C93400;
  --danger: #D70015;
  --info: #5856D6;

  --accent-fg: #FFFFFF;
  --accent-soft: rgba(0, 113, 227, 0.1);
  --accent-soft-strong: rgba(0, 113, 227, 0.18);
  --accent-ring: rgba(0, 113, 227, 0.4);

  /* Selection — system orange, readable brown text on peach. */
  --select: #B25000;
  --select-fg: #FFFFFF;
  --select-fill: #FF9500;
  --select-soft: rgba(255, 149, 0, 0.14);
  --select-ring: rgba(255, 149, 0, 0.5);

  --success-soft: rgba(52, 199, 89, 0.14);
  --danger-text: #D70015;
  --danger-bg: rgba(255, 59, 48, 0.1);
  --danger-border: rgba(255, 59, 48, 0.35);
  --danger-glow: rgba(255, 59, 48, 0.18);
  --warning-fg: #FFFFFF;
  --warning-soft: rgba(255, 149, 0, 0.14);
  --info-soft: rgba(88, 86, 214, 0.1);

  --ai: #8944AB;
  --ai-soft: rgba(175, 82, 222, 0.1);
  --ai-line: rgba(175, 82, 222, 0.35);

  --sun: #FF9F0A;
  --presence: #34C759;

  --overlay: rgba(0, 0, 0, 0.3);
  --shadow: rgba(0, 0, 0, 0.08);
  --header-bg: rgba(255, 255, 255, 0.8);
  --nav-bg: rgba(255, 255, 255, 0.84);
  --input-bg: rgba(118, 118, 128, 0.12);

  --chip-bg: rgba(118, 118, 128, 0.12);
  --chip-fg: var(--text-primary);
  --chip-line: transparent;
  --chip-topic-bg: rgba(0, 113, 227, 0.1);
  --chip-topic-fg: #0058B0;
  --chip-topic-line: rgba(0, 113, 227, 0.3);

  --on-media-fg: rgba(255, 255, 255, 0.96);
  --on-media-muted: rgba(255, 255, 255, 0.8);
  --on-media-faint: rgba(255, 255, 255, 0.55);
  --on-media-scrim: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.7) 100%);

  --corr-fg: #1B6B32;
  --corr-bg: rgba(52, 199, 89, 0.14);
  --corr-line: rgba(52, 199, 89, 0.45);
  --corr-badge-fg: #FFFFFF;
  --corr-badge-bg: #248A3D;

  --care-blue: #007AFF;
  --care-blue-ink: #004C9E;
  --care-good: #34C759;
  --care-warn: #FF9500;
  --care-bad: #FF3B30;
  --viz-1: #007AFF;
  --viz-2: #34C759;
  --viz-3: #FF9500;
  --viz-4: #AF52DE;
  --viz-5: #32ADE6;
  --viz-6: #FF2D55;
  --viz-grid: rgba(0, 0, 0, 0.06);
  --viz-axis: #76767B;

  --wave-customer: rgba(52, 199, 89, 0.5);
  --wave-customer-played: #248A3D;
  --wave-agent: rgba(0, 122, 255, 0.45);
  --wave-agent-played: #0066CC;
  --wave-cursor: #1D1D1F;
}

/* ======================================================================
   2c. Semantic roles — same mapping for every theme.
   Declared on the same element as the palette, so they follow the theme.
   ====================================================================== */

:root,
[data-theme] {
  --fg: var(--text-primary);
  --muted: var(--text-secondary);
  --faint: var(--text-muted);
  --line: var(--border);
  --surface: var(--surface-1);
  --danger-soft: var(--danger-bg);
  /* Names used by components before the tokens had them (kept so nothing breaks silently). */
  --warning-text: var(--warning);
  --text-xs: var(--text-ui-xs);
  --text-sm: var(--text-ui-sm);
  --text-lg: var(--text-ui-lg);
  --line-strong: var(--border-strong);
  --surface-elevated: var(--surface-2);
  --field-bg: var(--input-bg);
  --font-text: var(--font-sans);
  --ink-2: var(--muted);

  --drawer-bg: var(--surface-1);
  --sheet-bg: var(--surface-1);
  --card-chrome: var(--surface-1);
  --card-chrome-top: var(--surface-2);
  --icon-well: var(--surface-3);

  /* Neutral interaction fills. */
  --hover-fill: color-mix(in srgb, var(--fg) 5%, transparent);
  --press-fill: color-mix(in srgb, var(--fg) 9%, transparent);

  --theme-color: var(--bg);
}

/* ======================================================================
   Theme switch — one smooth cross-fade of the whole page (see useTheme).
   ====================================================================== */

/* While the theme flips, components don't animate their own colors. */
.theme-switching,
.theme-switching *,
.theme-switching *::before,
.theme-switching *::after {
  transition: none !important;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 320ms;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none;
  }
}

/* ======================================================================
   Brands — per-product accent. Set html[data-brand] in the app.
   Add a block here when a product needs its own accent; keep everything
   else shared.
   ====================================================================== */

/* [data-brand='example'][data-theme='dark'] { --accent: #…; --accent-muted: …; --accent-ring: …; } */
/* [data-brand='example'][data-theme='light'] { --accent: #…; --accent-soft: …; --accent-ring: …; } */

/* Reading direction as a number, for what CSS has no logical form of (an x-offset in a shadow, a slide):
   calc(-24px * var(--dir)) points away from the inline end in both directions. */
:root { --dir: 1; }
[dir='rtl'] { --dir: -1; }

/* Right-to-left languages (Arabic): arrows and chevrons that mean "forward / back" point the other way. */
[dir='rtl'] :is(
  .i-f7\:chevron-right, .i-f7\:chevron-left, .i-f7\:arrow-right, .i-f7\:arrow-left,
  .i-f7\:arrow-up-right, .i-f7\:arrow-turn-down-right, .i-f7\:square-arrow-left, .i-f7\:square-arrow-right,
  .i-f7\:arrow-uturn-left, .i-f7\:arrow-uturn-right, .i-f7\:sidebar-left, .i-f7\:sidebar-right, .i-f7\:paperplane
) {
  transform: scaleX(-1);
}