/* POS Pulse design tokens. Copied from outbound_calling (The Voice), apps/web/src/styles.css lines 44-269,
   spec in ~/dev/projects/outbound_calling/docs/design-the-voice.md. Shared by capture and dashboard; edit here only.
   Dark is default; set data-theme='light' on <html> for the Primer-based light theme. */
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/poppins-latin-ext-400.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/poppins-latin-400.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/poppins-latin-ext-500.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/poppins-latin-500.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/poppins-latin-ext-600.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/poppins-latin-600.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/poppins-latin-ext-700.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/poppins-latin-700.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Noto Sans Arabic';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/noto-arabic-400.woff2') format('woff2');unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;}

:root {
  color-scheme: dark;

  /* surfaces — v2: elevation by tint, not only by shadow (Apple HIG dark mode,
     Material dark elevation). Each step up is a touch lighter and bluer. */
  --bg: #06080c;
  --bg-glow: rgba(240, 72, 62, 0.07);
  --bg-glow-2: rgba(57, 135, 229, 0.07);
  --surface: #0e131b;
  --surface-2: #141a24;
  --surface-3: #1b2330;
  --chart-surface: #10161f;
  /* line = decorative dividers; line-strong = card outlines; control-line =
     boundaries a control needs to be seen (inputs, buttons, switches), ≥3:1.
     Measured in docs/design-the-voice.md § Contrast. */
  --line: rgba(214, 226, 242, 0.1);
  --line-strong: rgba(214, 226, 242, 0.18);
  --control-line: rgba(214, 226, 242, 0.42);
  --hairline-hi: rgba(255, 255, 255, 0.06);
  --overlay: rgba(3, 5, 8, 0.66);

  /* glass for floating chrome only (sidebar, top bar, palette, sheets) —
     never over content, where it would cost legibility */
  --glass: rgba(14, 19, 27, 0.62);
  --glass-strong: rgba(18, 24, 34, 0.82);
  --glass-blur: blur(22px) saturate(165%);

  /* ink */
  --ink: #e9eef5;
  --ink-2: #bac4d0;
  --ink-3: #97a3b3;
  --ink-inverse: #0b1017;

  /* brand + roles */
  /* The Voice signal red: the logo's highlight, a warm vermilion. */
  --accent: #f0483e;
  /* Filled red behind white text: #d8362b keeps 4.7:1; hover darkens to 5.3:1. */
  --accent-fill: #d8362b;
  --accent-hover: #c9302a;
  --accent-ink: #ff7b6b;
  --accent-wash: rgba(240, 72, 62, 0.13);
  --info: #6aa4e0;
  --info-wash: rgba(106, 164, 224, 0.12);
  --agent: #6aa4e0;
  --customer: #e8edf4;

  /* status — validated on #10161f (docs/dashboard-v2.md) */
  --good: #23a57a;
  --watch: #c2870f;
  --risk: #e03a64;
  --neutral: #7d8896;
  --good-wash: rgba(35, 165, 122, 0.14);
  --watch-wash: rgba(194, 135, 15, 0.16);
  --risk-wash: rgba(224, 58, 100, 0.14);
  --optout: #8f7fd1;
  /* status as TEXT: lighter steps that clear 4.5:1 on the surfaces */
  --good-ink: #4fd1a3;
  --watch-ink: #f0b44a;
  --risk-ink: #ff7d9d;
  /* how much status colour a chip's outline carries */
  --status-edge: 45%;

  /* categorical — dataviz reference dark steps, validated on #10161f */
  --cat-1: #3987e5;
  --cat-2: #d95926;
  --cat-3: #199e70;
  --cat-4: #c98500;
  --cat-5: #d55181;
  --cat-6: #9085e9;
  --cat-neutral: #4a5568;
  --series-a: #4f95ea;

  /* type */
  --font: 'Poppins', 'Noto Sans Arabic', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace;
  /* --mono sets figures, ids and times; --code is for text that must stay
     column-aligned (plain-text email bodies), so it never leaves monospace. */
  --code: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace;
  --t-2xs: 0.68rem;
  --t-xs: 0.74rem;
  --t-sm: 0.84rem;
  --t-md: 1rem;
  --t-lg: 1.14rem;
  --t-xl: 1.45rem;
  --t-2xl: 2rem;
  --t-3xl: 2.9rem;

  /* space, shape, depth */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.35rem;
  --s-6: 1.9rem;
  --pad: 1.35rem;
  --gap: 1rem;
  --r-sm: 7px;
  --r-md: 11px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-pill: 999px;
  /* layered shadows: contact + ambient + long soft fall-off, plus a 1px top highlight */
  --shadow-1: inset 0 1px 0 var(--hairline-hi), 0 1px 1px rgba(0, 0, 0, 0.35), 0 10px 28px -14px rgba(0, 0, 0, 0.6);
  --shadow-2: inset 0 1px 0 var(--hairline-hi), 0 2px 4px rgba(0, 0, 0, 0.3), 0 24px 64px -20px rgba(0, 0, 0, 0.75);
  /* a small raised control (active nav item, selected segment): dark glass
     gets a top highlight and a contact shadow */
  --lift: inset 0 1px 0 var(--hairline-hi), 0 1px 2px rgba(0, 0, 0, 0.3);
  --nav-lift: var(--lift);
  --nav-on-ink: var(--ink);
  --nav-on-icon: var(--accent-ink);
  --nav-on: linear-gradient(180deg, color-mix(in srgb, var(--surface-3) 95%, transparent), color-mix(in srgb, var(--surface-2) 95%, transparent));
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur: 160ms;
}

/* Light theme, second pass (Oct 2026). The first pass was harder on the eyes
   than the dark one for three reasons, all fixed here as token values:
   1. Glare: ink #0f1217 on #fff measured 18.8:1, past the ~16:1 the dark
      theme uses; ink is now #1c222b (16:1, GitHub/Radix territory) and the
      grey canvas no longer frames every card as a bright white box.
   2. Flat hierarchy: secondary and tertiary ink were near-black too, so names,
      meta and labels all spoke at once; they now step down (7.9:1, 5.4:1,
      both still AA on every surface).
   3. Edge noise: every chip and control carried a dark or saturated outline;
      lines and status edges are quieter (--status-edge), controls stay ≥3:1.
   Plus text rendering: see body below. */
[data-theme='light'] {
  color-scheme: light;
  /* Fifth pass: anchored on GitHub's Primer light theme (values from
     @primer/primitives functional/themes/light.css): a white page, white
     cards separated by 1px borders rather than a grey canvas (bgColor-default
     #fff, bgColor-muted #f6f8fa, borderColor-default #d1d9e0, borderColor-muted
     at 70%, borderColor-emphasis #818b98 for control edges ≥3:1, fgColor-default
     #1f2328, fgColor-muted #59636e, shadow-resting-small). */
  /* Third pass: the system UI typeface (Facebook, GitHub, Stripe, Cloudflare's
     Inter-class stack) instead of Poppins, whose wide geometric letters are
     the main reason dense light screens feel loud. Nothing to download; the
     script fonts and Poppins stay as fallbacks for Urdu/Malayalam/Hindi. */
  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI Variable Text', 'Segoe UI', Inter, Roboto, 'Helvetica Neue', Arial, 'Noto Sans Arabic', sans-serif;
  --bg: #ffffff;
  --bg-glow: rgba(240, 72, 62, 0);
  --bg-glow-2: rgba(30, 63, 106, 0);
  --surface: #ffffff;
  --surface-2: #f6f8fa;
  --surface-3: #eff2f5;
  --chart-surface: #ffffff;
  --line: rgba(209, 217, 224, 0.7);
  --line-strong: #d1d9e0;
  --control-line: #818b98;
  --overlay: rgba(20, 24, 30, 0.35);
  --glass: rgba(255, 255, 255, 0.94);
  --glass-strong: rgba(255, 255, 255, 0.96);

  --ink: #1f2328;
  --ink-2: #47505d;
  --ink-3: #59636e;
  --ink-inverse: #ffffff;

  --accent-ink: #b02d1b;
  --accent-wash: rgba(240, 72, 62, 0.09);
  --info: #1e3f6a;
  --info-wash: rgba(30, 63, 106, 0.08);
  --agent: #1e3f6a;
  --customer: #1f2328;

  --good: #1f8a70;
  --watch: #d4a017;
  --risk: #b3141a;
  --neutral: #8a9199;
  --good-wash: rgba(31, 138, 112, 0.14);
  --watch-wash: rgba(212, 160, 23, 0.2);
  --risk-wash: rgba(179, 20, 26, 0.1);
  --optout: #6a5aa8;
  --good-ink: #136b55;
  --watch-ink: #7d5800;
  --risk-ink: #a8121a;
  --status-edge: 0%; /* filled soft chips, no outline (GitHub labels, Stripe badges) */

  --cat-1: #2a78d6;
  --cat-2: #eb6834;
  --cat-3: #1baf7a;
  --cat-4: #eda100;
  --cat-5: #e87ba4;
  --cat-6: #4a3aa7;
  --cat-neutral: #c3c8d0;
  --series-a: #2a78d6;

  --shadow-1: 0 1px 1px 0 rgba(31, 35, 40, 0.04), 0 1px 2px 0 rgba(31, 35, 40, 0.03);
  --shadow-2: 0 1px 1px 0 rgba(37, 41, 46, 0.1), 0 3px 6px 0 rgba(37, 41, 46, 0.12), 0 24px 48px -24px rgba(37, 41, 46, 0.25);
  /* Flat, not glossy (fourth pass): no white top highlight or black contact
     shadow on raised controls; the active nav item is a plain tint (GitHub,
     Cloudflare); figures and ids use the UI font's tabular numerals instead of
     a monospace face, so a row reads in one typeface. */
  --hairline-hi: transparent;
  --lift: 0 1px 2px rgba(15, 20, 30, 0.1);
  --nav-on: rgba(129, 139, 152, 0.12);
  --nav-lift: none;

  /* Sixth pass, colour and readability after Confluence and Facebook (the
     owner's references): selection and links in Atlassian blue (text.selected
     #0c66e4 on background.selected #e9f2ff, 4.6:1; Facebook #0866ff) and a
     larger type floor, since neither product sets running text under ~12px.
     Control edges stay #818b98 (Atlassian's input border #8590a2 is the same
     weight; ≥3:1). */
  --nav-on: #e9f2ff;
  --nav-on-ink: #0c66e4;
  --nav-on-icon: #0c66e4;
  --info: #0c66e4;
  --info-wash: rgba(12, 102, 228, 0.08);
  --t-2xs: 0.76rem;
  --t-xs: 0.82rem;
  --t-sm: 0.92rem;
  --mono: var(--font);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* 15px at 1600 wide, 17px at 1920 — see note 6. */
html {
  font-size: clamp(13.5px, 0.52vw + 7px, 19px);
}

:root { --ar: "Noto Sans Arabic", "Geeza Pro", "Segoe UI", sans-serif; }
*, *::before, *::after { box-sizing: border-box; }
[lang="ar"], .ar { font-family: var(--ar); line-height: 1.7; }
:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }