:root {
  /* ── App shell (dashboard + editor) ───────────────────────────
     Sea-water teal theme. Light mode pulls from the pale end of the
     palette (#B6DDDD → #88C9CC) for surfaces, with the deep teal
     (#2E7273 / #134547) reserved for accents and active borders so
     selection + focus never get lost on near-white panels. */
  --c-page-bg:      #F4FAFA;
  --c-panel-bg:     #FFFFFF;
  --c-sidebar-bg:   #FFFFFF;
  --c-row-hover:    #EBF5F5;
  --c-row-active:   #D9EBEC;
  --c-active-border:#2E7273;
  --c-edit-bg:      #F8FCFC;
  --c-overdue:      #D94F3D;
  --c-muted:        #7B9295;
  --c-col-header:   #88A5A8;
  /* Telemetry stat labels: darker than --c-muted so the small 10px uppercase
     mono labels clear WCAG AA (4.5:1) on the white --c-panel-bg tile.
     #5C7072 on #FFFFFF ≈ 5.5:1. */
  --c-stat-label:   #5C7072;
  --c-text:         #0F2A2C;   /* general body text — adapts in dark mode */

  /* ── Brand colours ───────────────────────────────────────────── */
  --c-ink:          #0F2A2C;
  --c-surface:      #F0F7F7;
  --c-surface-2:    #E2EEEE;
  --c-border:       #C7DBDB;
  --c-accent:       #2E7273;
  --c-accent-soft:  #D9EBEC;
  --c-success:      #2A9D5C;
  --c-warning:      #E3A61D;
  --c-danger:       #D94F3D;
  --c-info:         #5BA0A6;

  /* ── Gamification ─────────────────────────────────────────────
     Intentionally distinct from the brand teal so XP / level / badge
     never visually collide with the rest of the interface. */
  --c-xp:           #F59E0B;
  --c-level:        #8B5CF6;
  --c-badge:        #EC4899;

  /* ── TM match colours ────────────────────────────────────────── */
  --c-tm-100:       #16A34A;
  --c-tm-95:        #4ADE80;
  --c-tm-75:        #F59E0B;
  --c-tm-60:        #F97316;
  --c-tm-0:         #9CA3AF;

  /* ── Segment status colours ──────────────────────────────────── */
  --c-seg-untranslated:  #9CA3AF;
  --c-seg-pre-trans:     #3B82F6;
  --c-seg-pre-trans-mt:  #D97706;
  --c-seg-fragment:      #7C3AED;
  --c-seg-draft:         #92400E;
  --c-seg-confirmed:     #16A34A;
  --c-seg-reviewed:      #15803D;
  --c-seg-proofread:     #0F766E;
  --c-seg-rejected:      #DC2626;

  /* ── Typography ──────────────────────────────────────────────── */
  --font-ui:    'Inter Variable', 'Inter', system-ui, sans-serif;
  --font-mono:  'JetBrains Mono', 'Fira Code', monospace;

  /* ── Spacing scale ───────────────────────────────────────────── */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-8:  32px;
  --s-10: 40px;

  /* ── Border radius ───────────────────────────────────────────── */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 20px;

  /* ── Shadows ─────────────────────────────────────────────────── */
  --shadow-sm: 0 1px 3px rgba(15, 42, 44, 0.08);
  --shadow-md: 0 4px 12px rgba(15, 42, 44, 0.10);
  --shadow-lg: 0 8px 24px rgba(15, 42, 44, 0.14);

  /* ── Motion ──────────────────────────────────────────────────── */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast:   120ms;
  --t-base:   200ms;
  --t-slow:   350ms;
}

/* ── Dark theme overrides ─────────────────────────────────────────
   Deep-sea variant: very dark teal-blacks for surfaces with the mid
   teal (#5BA0A6) as the active accent so it pops against the dark
   panels without becoming retina-burning bright. */
[data-theme="dark"] {
  /* App shell */
  --c-page-bg:      #04181a;
  --c-panel-bg:     #0a262a;
  --c-sidebar-bg:   #0a262a;
  --c-row-hover:    rgba(91,160,166,.08);
  --c-row-active:   rgba(91,160,166,.18);
  --c-active-border:#5BA0A6;
  --c-edit-bg:      #0c2428;
  --c-overdue:      #F87171;
  --c-muted:        #88a5a8;
  --c-col-header:   #5d8589;
  /* Brighter than --c-muted for AA on the dark --c-panel-bg (#0a262a):
     #A9C6C9 on #0a262a ≈ 8:1. */
  --c-stat-label:   #A9C6C9;
  --c-text:         #e6f4f5;

  /* Brand */
  --c-ink:          #e6f4f5;
  --c-surface:      #0d2c30;
  --c-surface-2:    #14383c;
  --c-border:       rgba(91,160,166,.20);
  --c-accent:       #5BA0A6;
  --c-accent-soft:  rgba(91,160,166,.14);
  --c-success:      #34d399;
  --c-warning:      #fbbf24;
  --c-danger:       #f87171;
  --c-info:         #88C9CC;

  /* Gamification */
  --c-xp:           #fbbf24;
  --c-level:        #a78bfa;
  --c-badge:        #f472b6;

  /* TM match colours */
  --c-tm-100:       #4ADE80;
  --c-tm-95:        #86EFAC;
  --c-tm-75:        #FCD34D;
  --c-tm-60:        #FB923C;
  --c-tm-0:         #6B7280;

  /* Segment status */
  --c-seg-untranslated:  #6B7280;
  --c-seg-pre-trans:     #60A5FA;
  --c-seg-pre-trans-mt:  #FBBF24;
  --c-seg-fragment:      #A78BFA;
  --c-seg-draft:         #FCD34D;
  --c-seg-confirmed:     #4ADE80;
  --c-seg-reviewed:      #86EFAC;
  --c-seg-proofread:     #2DD4BF;
  --c-seg-rejected:      #F87171;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0,0,0,.5);
  --shadow-md: 0 4px 16px rgba(0,0,0,.6);
  --shadow-lg: 0 8px 32px rgba(0,0,0,.7);
}