/* ============================================================
   Watchline — Colors & Type
   ============================================================
   Single source of truth for design tokens. Import this file
   in any HTML surface (UI kit, slides, mocks):

     <link rel="stylesheet" href="../colors_and_type.css">

   Default theme is dark. Add `data-theme="light"` to the root
   to flip. All semantic tokens (--bg, --fg-1, etc.) resolve
   correctly under both.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Source+Serif+4:opsz,wght@8..60,500;8..60,600;8..60,700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ---------- Base palette (raw, do not use directly in components) ---------- */
  --ink-950: #060A14;
  --ink-900: #0B1220;   /* surface-0 dark */
  --ink-850: #111A2E;   /* surface-1 dark */
  --ink-800: #1A2540;   /* surface-2 dark */
  --ink-700: #243150;
  --ink-600: #34405E;
  --ink-500: #4A5775;
  --ink-400: #6E7A91;
  --ink-300: #A6B0C3;
  --ink-200: #CFD5E1;
  --ink-100: #E7EBF1;
  --ink-50:  #F2F5FA;
  --ink-0:   #FFFFFF;

  /* Watchline teal — primary accent ramp */
  --teal-700: #167B7E;
  --teal-600: #1F9FA3;
  --teal-500: #30C5CA;   /* Watchline accent */
  --teal-400: #5AD7DB;
  --teal-300: #8FE5E8;
  --teal-100: #C8F1F2;
  --teal-50:  #E6F8F9;

  /* Watchline blue — secondary accent ramp */
  --blue-700: #1A3FA8;
  --blue-600: #2A5FE0;
  --blue-500: #3D7DFF;   /* secondary accent */
  --blue-400: #7FA6FF;
  --blue-300: #A8C2FF;
  --blue-100: #DDE8FF;
  --blue-50:  #EEF3FF;

  /* Secondary accent semantic alias */
  --accent-2:        var(--blue-500);
  --accent-2-hover:  var(--blue-400);
  --accent-2-press:  var(--blue-600);
  --accent-2-soft:   rgba(61,125,255,0.10);
  --accent-2-ring:   rgba(61,125,255,0.28);

  --red-600:  #C53B40;
  --red-500:  #E5484D;   /* sev-critical */
  --red-300:  #F5A8AB;
  --red-100:  #FDE6E7;

  --orange-600: #D75D0F;
  --orange-500: #F76B15;  /* sev-urgent */
  --orange-300: #FDBE8C;
  --orange-100: #FFEAD6;

  --green-600: #0E8866;
  --green-500: #11A37F;   /* sev-medical */
  --green-300: #8BD9C2;
  --green-100: #DCF4EA;

  --amber-600: #B98800;
  --amber-500: #E0A800;   /* sev-traffic */
  --amber-300: #F4D773;
  --amber-100: #FCF1CC;

  --slate-500: #6E7A91;   /* sev-info */

  /* ---------- Semantic — DARK theme defaults ---------- */
  --bg:           var(--ink-900);
  --surface-0:    var(--ink-900);
  --surface-1:    var(--ink-850);
  --surface-2:    var(--ink-800);
  --surface-3:    var(--ink-700);
  --hairline:     rgba(255,255,255,0.06);
  --hairline-strong: rgba(255,255,255,0.10);

  --fg-1:         #F2F5FA;
  --fg-2:         #A6B0C3;
  --fg-3:         #6E7A91;
  --fg-on-accent: #FFFFFF;

  --accent:        var(--teal-500);
  --accent-hover:  var(--teal-400);
  --accent-press:  var(--teal-600);
  --accent-soft:   rgba(48,197,202,0.12);
  --accent-ring:   rgba(48,197,202,0.32);

  --sev-critical:  var(--red-500);
  --sev-urgent:    var(--orange-500);
  --sev-medical:   var(--green-500);
  --sev-traffic:   var(--amber-500);
  --sev-info:      var(--slate-500);

  --sev-critical-bg: rgba(229,72,77,0.12);
  --sev-urgent-bg:   rgba(247,107,21,0.12);
  --sev-medical-bg:  rgba(17,163,127,0.12);
  --sev-traffic-bg:  rgba(224,168,0,0.14);
  --sev-info-bg:     rgba(110,122,145,0.16);

  --sev-critical-fg: #FFC1C3;
  --sev-urgent-fg:   #FFCBA0;
  --sev-medical-fg:  #97E2C7;
  --sev-traffic-fg:  #F4D773;
  --sev-info-fg:     #C0C8D8;

  /* ---------- Type ---------- */
  --font-sans:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-serif:   'Source Serif 4', Georgia, 'Times New Roman', serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* type scale */
  --fs-12: 0.75rem;   /* eyebrows, micro-labels */
  --fs-13: 0.8125rem; /* meta, timestamps */
  --fs-14: 0.875rem;  /* body small, secondary */
  --fs-16: 1rem;      /* body */
  --fs-18: 1.125rem;  /* lede / list headline */
  --fs-22: 1.375rem;  /* h3 / sheet title */
  --fs-28: 1.75rem;   /* h2 / detail headline (sans) */
  --fs-36: 2.25rem;   /* h1 / hero numeric (e.g. digest count) */

  --lh-tight:  1.15;
  --lh-snug:   1.30;
  --lh-normal: 1.50;
  --lh-loose:  1.65;

  --tracking-tight: -0.01em;
  --tracking-flat:  0;
  --tracking-eyebrow: 0.06em;

  /* ---------- Spacing (4px base) ---------- */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;

  /* ---------- Radii ---------- */
  --radius-xs:   6px;
  --radius-sm:   10px;
  --radius-md:   14px;
  --radius-lg:   20px;
  --radius-pill: 999px;

  /* ---------- Shadows ---------- */
  --shadow-card:    0 1px 0 rgba(255,255,255,0.04) inset, 0 1px 2px rgba(0,0,0,0.40);
  --shadow-pop:     0 8px 24px -8px rgba(0,0,0,0.45);
  --shadow-overlay: 0 24px 48px -16px rgba(0,0,0,0.60);

  /* ---------- Motion ---------- */
  --ease-standard: cubic-bezier(.2,.6,.2,1);
  --ease-emphasis: cubic-bezier(.2,.0,0,1);
  --dur-fast:    80ms;
  --dur-base:    180ms;
  --dur-slow:    280ms;
}

/* ============================================================
   Light theme
   ============================================================ */
:root[data-theme="light"] {
  --bg:           #F5F7FB;
  --surface-0:    #F5F7FB;
  --surface-1:    #FFFFFF;
  --surface-2:    #F0F3F8;
  --surface-3:    #E5E9F1;
  --hairline:     rgba(15,23,42,0.08);
  --hairline-strong: rgba(15,23,42,0.14);

  --fg-1:         #0B1220;
  --fg-2:         #4A5775;
  --fg-3:         #6E7A91;
  --fg-on-accent: #FFFFFF;

  --accent:        var(--teal-600);
  --accent-hover:  var(--teal-500);
  --accent-press:  var(--teal-700);
  --accent-soft:   rgba(31,159,163,0.10);
  --accent-ring:   rgba(31,159,163,0.26);

  --sev-critical-bg: rgba(229,72,77,0.10);
  --sev-urgent-bg:   rgba(247,107,21,0.10);
  --sev-medical-bg:  rgba(17,163,127,0.10);
  --sev-traffic-bg:  rgba(224,168,0,0.12);
  --sev-info-bg:     rgba(110,122,145,0.10);

  --sev-critical-fg: #9C2A2E;
  --sev-urgent-fg:   #B04509;
  --sev-medical-fg:  #0A6B50;
  --sev-traffic-fg:  #7E5F00;
  --sev-info-fg:     #495569;

  --shadow-card:    0 1px 2px rgba(15,23,42,0.06), 0 1px 0 rgba(15,23,42,0.02);
  --shadow-pop:     0 8px 24px -8px rgba(15,23,42,0.18);
  --shadow-overlay: 0 24px 48px -16px rgba(15,23,42,0.22);
}

/* ============================================================
   Element defaults — opt in via `class="watchline"` on body,
   or omit and use tokens directly.
   ============================================================ */
.watchline {
  background: var(--bg);
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-size: var(--fs-16);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.watchline h1, .watchline .h1 {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: var(--fs-28);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  margin: 0;
}
.watchline h2, .watchline .h2 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-22);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  margin: 0;
}
.watchline h3, .watchline .h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-18);
  line-height: var(--lh-snug);
  color: var(--fg-1);
  margin: 0;
}
.watchline p, .watchline .body {
  font-family: var(--font-sans);
  font-size: var(--fs-16);
  line-height: var(--lh-normal);
  color: var(--fg-1);
  margin: 0;
}
.watchline .body-sm {
  font-size: var(--fs-14);
  line-height: var(--lh-normal);
  color: var(--fg-2);
}
.watchline .meta {
  font-family: var(--font-mono);
  font-size: var(--fs-13);
  color: var(--fg-2);
  letter-spacing: 0;
}
.watchline .eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-12);
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-3);
}
.watchline .display {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: var(--fs-36);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
}
.watchline .num {
  font-family: var(--font-sans);
  font-feature-settings: "tnum" 1, "lnum" 1;
  font-variant-numeric: tabular-nums lining-nums;
}
.watchline code, .watchline .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
}