/* ============================================================
   OpsAgents Design System — vendored TOKENS for the Leads dashboard
   ------------------------------------------------------------
   Source of truth: OpsAgents Design System ("Sea · Sand · Claude"),
   colors_and_type.css. This is a tokens-only vendor (no component rules)
   so the dashboard's own component CSS is never clobbered — index.html
   maps its runtime vars (--bg/--card/--primary/…) onto these tokens.

   VOICE → calm, warm. Sand neutrals lead the ground; SEA teal is the
   functional primary (links, buttons, focus); SAGE is the calm middle;
   CLAUDE terracotta is the one expressive accent used once per view.
   Type = Rubik (Latin) + Heebo (Hebrew/RTL) + JetBrains Mono. Ink is a
   deep teal-charcoal, never pure black. Fonts are loaded from index.html.
   ============================================================ */

:root {
  /* Single-theme light system — opt OUT of UA dark rendering so a phone in
     dark mode keeps the normal Sand·Sea·Claude palette (no dark controls/canvas). */
  color-scheme: light;

  /* ── Sand · the ground (lead) ── */
  --sand-50:   #FCFAF4;
  --sand-100:  #FBF8F1;
  --sand-200:  #F4EFE6;
  --sand-300:  #ECE6D9;
  --sand-400:  #E2DAC8;
  --sand-500:  #D5CAB3;
  --cream:     #F0EEE6;
  --sand:        #F4EFE6;
  --sand-raised: #FBF8F1;
  --sand-deep:   #ECE6D9;
  --sand-ink:    #16303A;
  --sand-hairline:#E2DAC8;

  /* ── Sea · the functional primary ── */
  --sea:        #0E7C96;
  --sea-deep:   #0A5A6E;
  --sea-bright: #2FAFC4;
  --sea-soft:   #DCEDF0;
  --sea-ink:    #0A5567;
  --foam:       #E3F4F7;

  /* ── Sage · the calm middle ── */
  --sage:       #6F9C76;
  --sage-deep:  #4E7A56;
  --sage-soft:  #E6EFE3;
  --sage-wash:  #EEF4EA;
  --sage-ink:   #3C6644;

  /* ── Claude · the one expressive warm accent (terracotta) ── */
  --claude:      #D97757;
  --claude-deep: #B65C3F;
  --claude-hover:#C8694A;
  --claude-soft: #F6E4DA;
  --claude-ink:  #A6502F;
  --claude-ring: rgba(217, 119, 87, 0.30);
  --gradient-claude: linear-gradient(135deg, #D97757 0%, #B65C3F 100%);

  /* ── Brand · maps to SEA (functional primary) ── */
  --brand:         var(--sea);
  --brand-hover:   #0C6E85;
  --brand-pressed: var(--sea-deep);
  --brand-soft:    var(--sea-soft);
  --brand-ring:    rgba(14, 124, 150, 0.30);
  --brand-gradient:linear-gradient(135deg, #0E7C96 0%, #2FAFC4 100%);
  --brand-700: #073D4A;
  --brand-600: #0A5A6E;
  --brand-500: #0E7C96;
  --brand-400: #2FAFC4;
  --brand-300: #7FCAD9;
  --brand-200: #BFE4EC;
  --brand-100: #DCEDF0;

  /* ── Logo / wordmark mark · violet + cyan (LOGO-ONLY, never a general accent) ── */
  --logo-violet:       #6C3AED;
  --logo-violet-light: #9171F8;
  --logo-cyan:         #5AD6E6;
  --logo-ink:          #16303A;
  --logo-gradient:     linear-gradient(90deg, #6C3AED 0%, #9171F8 100%);

  /* ── Surfaces · sand board (light, warm) ── */
  --canvas:        #F4EFE6;
  --canvas-tint:   #ECE6D9;
  --surface:       #FBF8F1;
  --surface-raised:#FCFAF4;
  --surface-hover: #FCFAF4;
  --surface-sunken:#ECE6D9;
  --scrim:         rgba(22, 48, 58, 0.42);

  /* ── Ink · text on sand (teal-charcoal, never pure black) ── */
  --ink:           #16303A;
  --ink-2:         #3C555F;
  --ink-3:         #6B7E85;
  --ink-4:         #97A4A8;
  --ink-on-color:  #FFFFFF;

  /* ── Lines & dividers (warm sand hairlines) ── */
  --border:        #E2DAC8;
  --border-strong: #D5CAB3;
  --border-faint:  #ECE6D9;

  /* ── Rainbow STATUS system — desaturated (the signature, mellowed) ── */
  --status-healthy:      #5DA17C;  --status-healthy-soft: #E4EFE7;  --status-healthy-ink:  #3C7355;
  --status-working:      #D8A24A;  --status-working-soft: #F6EBD6;  --status-working-ink:  #93661B;
  --status-stuck:        #C56A5A;  --status-stuck-soft:   #F4E0D9;  --status-stuck-ink:    #A0493A;
  --status-idle:         #B5AC9B;  --status-idle-soft:    #ECE6DB;  --status-idle-ink:     #7A7263;

  /* ── Accent · links / info / selection → SEA ── */
  --accent-blue:       #0E7C96;
  --accent-blue-soft:  #DCEDF0;
  --accent-blue-ink:   #0A5567;

  /* ── Semantic (mapped to the mellow status rainbow) ── */
  --success: #5DA17C;
  --warning: #D8A24A;
  --danger:  #C56A5A;
  --info:    #0E7C96;

  /* ── Partner accents (use ONLY in partner contexts; never re-skinned) ── */
  --shopify-green: #96bf48;  --shopify-green-dark: #5a8a00;
  --monday-red: #e44258;  --monday-yellow: #fdab3d;  --monday-green: #00c875;  --monday-blue: #0086c0;

  /* ── Type · families ── */
  --font-display: 'Rubik', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:    'Rubik', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-hebrew:  'Heebo', 'Rubik', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* ── Type · weights ── */
  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-extrabold: 800;

  /* ── Radii ── */
  --radius-xs: 6px; --radius-sm: 10px; --radius-md: 13px; --radius-lg: 16px;
  --radius-xl: 18px; --radius-2xl: 24px; --radius-pill: 999px; --r-card: 16px;

  /* ── Shadows (soft, warm teal-ink) ── */
  --shadow-xs:   0 1px 2px rgba(22, 48, 58, 0.05);
  --shadow-sm:   0 2px 6px rgba(22, 48, 58, 0.06);
  --shadow-card: 0 4px 16px rgba(22, 48, 58, 0.07);
  --shadow-lift: 0 12px 30px rgba(22, 48, 58, 0.12);
  --shadow-pop:  0 18px 44px rgba(22, 48, 58, 0.18);
  --shadow-focus:0 0 0 3px var(--brand-ring);

  /* ── Motion ── */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 120ms; --dur-base: 180ms; --dur-slow: 260ms;

  /* ── Sizing ── */
  --tap: 44px;
}

/* RTL / Hebrew surfaces swap Rubik → Heebo automatically; mono stays LTR. */
[lang="he"], [dir="rtl"] {
  --font-display: 'Heebo', 'Rubik', system-ui, sans-serif;
  --font-body:    'Heebo', 'Rubik', system-ui, sans-serif;
}