/* ============================================================
   Integriya Design System — Tokens
   Evolution of the existing indigo/slate product face.
   ============================================================ */

:root {
  /* ---------- Ink & paper ---------- */
  --ink-900: #0b1220;   /* deepest — display text, nav, hero bg */
  --ink-800: #0f172a;   /* primary text (= old --primary)      */
  --ink-700: #1e293b;   /* primary-hover, headers on paper     */
  --ink-600: #334155;   /* body text heavy                     */
  --ink-500: #475569;   /* body text default                   */
  --ink-400: #64748b;   /* secondary text (= old --text-secondary) */
  --ink-300: #94a3b8;   /* muted / placeholder                 */
  --ink-200: #cbd5e1;   /* disabled                            */
  --ink-100: #e2e8f0;   /* borders (= old --border)            */
  --ink-050: #f1f5f9;   /* soft hover                          */
  --ink-025: #f8fafc;   /* canvas (= old --bg)                 */
  --paper:   #ffffff;

  /* ---------- Brand indigo ---------- */
  --brand-900: #1e1b4b;
  --brand-800: #312e81;
  --brand-700: #3730a3;
  --brand-600: #4338ca;
  --brand-500: #4f46e5;   /* accent-hover */
  --brand-400: #6366f1;   /* accent       */
  --brand-300: #818cf8;
  --brand-200: #a5b4fc;
  --brand-100: #c7d2fe;
  --brand-050: #eef2ff;

  /* ---------- Signal (voice moment / live call) ---------- */
  /* Amber used ONLY for "live" / on-air states so it doesn't
     collide with warning. Spec pairs it with a pulse animation. */
  --signal-live: #f59e0b;
  --signal-live-soft: #fef3c7;
  --signal-live-ink:  #92400e;

  /* ---------- Runtime accents (subtle, not skins) ---------- */
  --runtime-shop:         #0ea5a4;   /* teal — orders                */
  --runtime-shop-soft:    #ccfbf1;
  --runtime-shop-ink:     #115e59;   /* on shop-soft, AA on .b       */
  --runtime-shop-ink-strong: #0f766e; /* on shop-soft, .runtime-chip */
  --runtime-medical:      #7c3aed;   /* violet — medical             */
  --runtime-medical-soft: #ede9fe;
  --runtime-medical-ink:  #5b21b6;
  --runtime-medical-ink-strong: #6d28d9;

  /* ---------- Semantic ---------- */
  --ok:       #10b981;
  --ok-soft:  #d1fae5;
  --ok-ink:   #065f46;

  --warn:     #f59e0b;
  --warn-soft:#fef3c7;
  --warn-line:#fcd34d;
  --warn-ink: #92400e;

  --err:      #ef4444;
  --err-soft: #fee2e2;
  --err-line: #fca5a5;
  --err-ink:  #991b1b;

  --info:     #2563eb;
  --info-soft:#dbeafe;
  --info-line:#bfdbfe;
  --info-ink: #1e40af;

  /* ---------- Transcript speaker colors ---------- */
  --speaker-customer:  #0284c7;
  --speaker-assistant: #16a34a;
  --speaker-system:    #64748b;

  /* ---------- Type ---------- */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "JetBrains Mono",
               Menlo, Consolas, monospace;

  /* Fluid-ish scale (rem). 1rem = 16px assumed.                 */
  --t-10: 0.625rem;     /* 10 — micro mono (rail counts, kbd)    */
  --t-11: 0.6875rem;    /* 11 — labels, meta                     */
  --t-12: 0.75rem;      /* 12 — small UI                         */
  --t-13: 0.8125rem;    /* 13 — compact body                     */
  --t-14: 0.875rem;     /* 14 — body / UI default                */
  --t-16: 1rem;         /* 16 — body large / lead                */
  --t-18: 1.125rem;
  --t-20: 1.25rem;      /* 20 — h4 / card title                  */
  --t-24: 1.5rem;       /* 24 — h3                               */
  --t-28: 1.75rem;      /* 28 — h2                               */
  --t-32: 2rem;
  --t-40: 2.5rem;       /* 40 — h1                               */
  --t-48: 3rem;
  --t-56: 3.5rem;       /* 56 — display                          */

  --w-400: 400;
  --w-500: 500;
  --w-600: 600;
  --w-700: 700;
  --w-800: 800;

  --tight:  -0.025em;   /* display                               */
  --snug:   -0.015em;   /* headings                              */
  --normal:  0;
  --wide:    0.04em;    /* ALL CAPS eyebrows                     */
  --widest:  0.08em;

  /* ---------- Space (4-base) ---------- */
  --s-1:  0.25rem;
  --s-2:  0.5rem;
  --s-3:  0.75rem;
  --s-4:  1rem;
  --s-5:  1.25rem;
  --s-6:  1.5rem;
  --s-8:  2rem;
  --s-10: 2.5rem;
  --s-12: 3rem;
  --s-16: 4rem;
  --s-20: 5rem;

  /* ---------- Radii (2-tier + pill) ---------- */
  --r-xs:  4px;    /* env-badge, kbd, micro chips                */
  --r-sm:  6px;    /* inputs, small badges                       */
  --r-md:  10px;   /* buttons, chips, inline pieces              */
  --r-lg:  14px;   /* cards, surfaces                            */
  --r-xl:  18px;   /* hero cards, dialogs                        */
  --r-pill: 999px;

  /* ---------- Elevation ---------- */
  /* Slightly cooler than the existing system: inspired by the
     voice/call domain — think "quiet room." */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.08),
               0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 6px 16px -4px rgba(15, 23, 42, 0.10),
               0 2px 4px rgba(15, 23, 42, 0.04);
  --shadow-lg: 0 18px 40px -12px rgba(15, 23, 42, 0.18),
               0 4px 8px rgba(15, 23, 42, 0.06);
  --shadow-ring: 0 0 0 3px rgba(99, 102, 241, 0.15);

  /* ---------- Motion ---------- */
  --ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 120ms;
  --dur-base: 180ms;
  --dur-slow: 280ms;
}

/* ============================================================
   Base reset + typographic defaults
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  font-family: var(--font-sans);
  font-size: var(--t-14);
  color: var(--ink-800);
  background: var(--ink-025);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5 {
  margin: 0;
  color: var(--ink-800);
  letter-spacing: var(--snug);
  font-weight: var(--w-700);
  line-height: 1.15;
}

h1 { font-size: var(--t-40); font-weight: var(--w-800); letter-spacing: var(--tight); }
h2 { font-size: var(--t-28); }
h3 { font-size: var(--t-20); }
h4 { font-size: var(--t-16); font-weight: var(--w-600); }

p { margin: 0; }

code, kbd, pre, samp { font-family: var(--font-mono); }

::selection { background: var(--brand-200); color: var(--ink-900); }

.brand-text {
  background: linear-gradient(to right, var(--brand-900), var(--brand-300));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--brand-900);
}

.brand-text--light {
  background: linear-gradient(to right, var(--brand-200), var(--brand-050));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--brand-200);
}