/* Skill.Sea Design Tokens — Inherited directly from ExamForge Design Reference
   Neutral warm-gray surfaces + teal accents + hairline borders.
   Light and Dark themes with full system-preference synchronization. */

:root,
[data-theme="light"] {
  --surface-0: #f9f9f7;            /* Page background */
  --surface-1: #fcfcfb;            /* Header, metric tiles, rail, table header */
  --surface-2: #ffffff;            /* App container, cards, modals, slide drawer */
  --surface-hover: #f3f3f0;        /* Hover row highlight */

  --text-primary: #0b0b0b;
  --text-secondary: #52514e;
  --text-muted: #898781;

  --border: rgba(11, 11, 11, 0.10);          /* Hairline dividers (0.5px) */
  --border-strong: rgba(11, 11, 11, 0.20);   /* Pills, panels, control borders */
  --border-stronger: rgba(11, 11, 11, 0.40); /* Focus rings, search borders */

  --bg-danger: #fad6d6;   --text-danger: #8e2626;    /* Red chip */
  --bg-warning: #f9dca4;  --text-warning: #734500;   /* Amber chip */
  --bg-accent: #cde2fb;   --text-accent: #184f95;    /* Blue chip */
  --bg-success: #d1f2e2;  --text-success: #006300;   /* Green chip */
  --bg-neutral: #f4f4f2;  --text-neutral: #52514e;   /* Neutral category chip */

  --teal: #1d9e75;                    /* Progress fill, active tab icon, status dot */
  --teal-strong: #0f6e56;             /* Brand badge, checkmarks */
  --teal-nav-active: rgba(29, 158, 117, 0.16);  /* Active category / nav pill background */
  --teal-partial: rgba(29, 158, 117, 0.35);     /* Indeterminate state */
  --teal-track: rgba(29, 158, 117, 0.18);       /* Track ring */
  --heat-0: rgba(29, 158, 117, 0.10);
  --on-teal: #ffffff;

  --radius: 8px;       /* Controls, tiles, pills, nav items */
  --radius-card: 12px; /* Containers, app frame */
  --radius-chip: 6px;  /* Small badges */
  --radius-check: 4px;
  --radius-bar: 3px;

  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans", "Apple SD Gothic Neo", sans-serif;
  --font-mono: "SF Mono", ui-monospace, Menlo, Consolas, monospace;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06);
  --shadow-drawer: -6px 0 24px rgba(0, 0, 0, 0.08);
}

[data-theme="dark"] {
  --surface-0: #0b0b0b;
  --surface-1: #151515;
  --surface-2: #1a1a19;
  --surface-hover: #222221;

  --text-primary: #f0efec;
  --text-secondary: #c3c2b7;
  --text-muted: #898781;

  --border: rgba(255, 255, 255, 0.10);
  --border-strong: rgba(255, 255, 255, 0.20);
  --border-stronger: rgba(255, 255, 255, 0.40);

  --bg-danger: #3c0e0e;   --text-danger: #ec7e7e;
  --bg-warning: #311a00;  --text-warning: #db9300;
  --bg-accent: #032042;   --text-accent: #6da7ec;
  --bg-success: #0e3524;  --text-success: #41d996;
  --bg-neutral: #242422;  --text-neutral: #c3c2b7;

  /* Teal accents retain vibrance in dark mode */
  --teal: #1d9e75;
  --teal-strong: #0f6e56;
  --teal-nav-active: rgba(29, 158, 117, 0.22);
  --teal-partial: rgba(29, 158, 117, 0.45);
  --teal-track: rgba(29, 158, 117, 0.22);
  --on-teal: #ffffff;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35);
  --shadow-drawer: -6px 0 24px rgba(0, 0, 0, 0.5);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface-0: #0b0b0b;
    --surface-1: #151515;
    --surface-2: #1a1a19;
    --surface-hover: #222221;

    --text-primary: #f0efec;
    --text-secondary: #c3c2b7;
    --text-muted: #898781;

    --border: rgba(255, 255, 255, 0.10);
    --border-strong: rgba(255, 255, 255, 0.20);
    --border-stronger: rgba(255, 255, 255, 0.40);

    --bg-danger: #3c0e0e;   --text-danger: #ec7e7e;
    --bg-warning: #311a00;  --text-warning: #db9300;
    --bg-accent: #032042;   --text-accent: #6da7ec;
    --bg-success: #0e3524;  --text-success: #41d996;
    --bg-neutral: #242422;  --text-neutral: #c3c2b7;

    --teal: #1d9e75;
    --teal-strong: #0f6e56;
    --teal-nav-active: rgba(29, 158, 117, 0.22);
    --on-teal: #ffffff;
  }
}