/* GENERATED for the Customers UX-port pilot — do not edit by hand.
   Source: design-system/tokens.css, scoped to .ds-view. See scratchpad/scope_kit.py */

/* ============================================================
   CSM 360 — Canonical Design Tokens
   Authority: docs/specs/2026-06-27-design-system-foundation-design.md §4
   All colors, type, space, radius, shadow, z, and motion live here.
   No hardcoded values anywhere else.
   ============================================================ */

.ds-view {
  /* surfaces */
  --bg-canvas: #0A0A0B;
  --bg-surface: #141416;
  --bg-raised: #1B1B1E;
  --bg-hover: #232326;
  --bg-active: #2A2A2E;

  /* text */
  --text-1: #EDEDEF;
  --text-2: #9A9AA2;
  --text-3: #6C6C72;

  /* borders */
  --border-1: rgba(255, 255, 255, .07);
  --border-2: rgba(255, 255, 255, .12);
  --border-3: rgba(255, 255, 255, .18);

  /* brand + utility */
  --accent: #2DD4A8;
  --accent-hover: #3BE0B6;
  --accent-muted: rgba(45, 212, 168, .14);
  --blue: #5B9CF6;
  --red: #EF5A5A;
  --on-solid: #FFFFFF;

  /* status (accent / tint) */
  --status-pending: #8B7CF6;
  --status-pending-tint: rgba(139, 124, 246, .16);
  --status-inproc: #E5A93D;
  --status-inproc-tint: rgba(229, 169, 61, .16);
  --status-done: #2DD4A8;
  --status-done-tint: rgba(45, 212, 168, .16);
  --status-solved: #2DD4A8;
  --status-solved-tint: rgba(45, 212, 168, .16);
  --status-closed: #64748B;
  --status-closed-tint: rgba(100, 116, 139, .18);
  --status-cancelled: #8A8A90;
  --status-cancelled-tint: rgba(138, 138, 144, .16);

  /* priority */
  --prio-high: #EF5A5A;
  --prio-med: #E5A93D;
  --prio-low: #8A8A90;
  --prio-high-tint: rgba(239, 90, 90, .14);
  --prio-med-tint: rgba(229, 169, 61, .14);
  --prio-low-tint: rgba(138, 138, 144, .14);

  /* source badges */
  --src-call: #8B7CF6;
  --src-zendesk: #3B7D6E;
  --src-slack: #4A154B;
  --src-email: #7D6A3B;
  --src-manual: #5C5C5F;
  --src-jira: #2684FF;
  --src-call-tint: rgba(139, 124, 246, .14);
  --src-zendesk-tint: rgba(59, 125, 110, .18);
  --src-slack-tint: rgba(74, 21, 75, .20);
  --src-email-tint: rgba(125, 106, 59, .18);
  --src-manual-tint: rgba(92, 92, 95, .18);
  --src-jira-tint: rgba(38, 132, 255, .16);

  /* red + blue utility tints */
  --red-tint: rgba(239, 90, 90, .14);
  --red-ring: rgba(239, 90, 90, .22);
  --blue-tint: rgba(91, 156, 246, .15);

  /* overlay scrim */
  --scrim-bg: rgba(0, 0, 0, .55);

  /* type */
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --fs-1: 11px;
  --fs-2: 12px;
  --fs-3: 13px;
  --fs-4: 15px;
  --fs-5: 18px;
  --fs-6: 22px;
  /* Hero metric step (SLA dashboard). This file is what index.html actually
     loads; tokens.css is the source of truth but is not linked, so a token
     added only there silently resolves to nothing and the element falls back
     to inherited size. Keep the two in sync. */
  --fs-7: 44px;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --lh-tight: 1.2;
  --lh-body: 1.5;

  /* spacing — 4px rhythm */
  --space-1: 2px;
  --space-2: 4px;
  --space-3: 8px;
  --space-4: 12px;
  --space-5: 16px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 48px;

  /* radius */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 999px;

  /* shadow */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .3);
  --shadow-2: 0 8px 24px rgba(0, 0, 0, .4);
  --shadow-3: 0 16px 48px rgba(0, 0, 0, .5);

  /* z-index layering scale */
  --z-sticky: 100;
  --z-popover: 200;
  --z-overlay: 300;
  --z-modal: 400;
  --z-toast: 500;
  --z-tooltip: 600;

  /* motion */
  --dur-fast: 100ms;
  --dur-base: 150ms;
  --dur-slow: 250ms;
  --ease: ease-out;

  /* today marker — shared by Timeline (vertical line) + Calendar (cell highlight)
     Intentionally aliases --accent so both views are visually consistent. */
  --today-marker: var(--accent);
  --today-marker-tint: var(--accent-muted);
}

:root[data-theme="light"] .ds-view {
  /* surfaces */
  --bg-canvas: #FAF9F7;
  --bg-surface: #FFFFFF;
  --bg-raised: #FFFFFF;
  --bg-hover: #F2F0EC;
  --bg-active: #E9E6E0;

  /* text */
  --text-1: #1A1A1E;
  --text-2: #55555A;
  --text-3: #8A8A90;

  /* borders */
  --border-1: rgba(0, 0, 0, .08);
  --border-2: rgba(0, 0, 0, .12);
  --border-3: rgba(0, 0, 0, .18);

  /* accent-muted in light (slightly more visible) */
  --accent-muted: rgba(45, 212, 168, .16);

  /* status text overrides for light legibility */
  --status-pending: #6D28D9;
  --status-inproc: #B45309;
  --status-done: #0F766E;
  --status-solved: #0F766E;
  --status-solved-tint: rgba(15, 118, 110, .14);
  --status-closed: #475569;
  --status-closed-tint: rgba(71, 85, 105, .14);
  --status-cancelled: #55555A;

  /* shadow overrides — lighter on white */
  --shadow-2: 0 8px 24px rgba(0, 0, 0, .12);
  --shadow-3: 0 16px 48px rgba(0, 0, 0, .18);
}