/* tokens.css — Sierra LMS design system
 *
 * One file, four axes:
 *   [data-theme="dark" | "light"]
 *   [data-ctx="academic" | "corporate" | "talentpulse"]
 *
 * Set both attributes on the *artboard wrapper* (the div inside the
 * design canvas, or the screen root in a standalone HTML). Variables
 * cascade — every component reads from the same names and never
 * hard-codes a color.
 */

/* ──────────────────────────── Dark (default) ──────────────────────── */
:root, [data-theme="dark"] {
  /* Surfaces — increasing elevation 0 → 4 */
  --bg-0: #0a0a0c;
  --bg-1: #101013;
  --bg-2: #16161a;
  --bg-3: #1d1d22;
  --bg-4: #26262d;

  /* Hairlines */
  --line-1: rgba(255,255,255,0.05);
  --line-2: rgba(255,255,255,0.08);
  --line-3: rgba(255,255,255,0.14);

  /* Text — descending contrast 1 → 4 */
  --text-1: rgba(255,255,255,0.93);
  --text-2: rgba(255,255,255,0.62);
  --text-3: rgba(255,255,255,0.40);
  --text-4: rgba(255,255,255,0.26);

  /* Translucent surfaces — flip with theme */
  --surf-1:      rgba(255,255,255,0.04);
  --surf-2:      rgba(255,255,255,0.06);
  --surf-3:      rgba(255,255,255,0.10);
  --surf-strong: rgba(255,255,255,0.18);

  /* Editor */
  --editor-bg:     #0b0b0d;
  --editor-tab:    #101013;
  --editor-gutter: rgba(255,255,255,0.40);

  /* Mobile artboard canvas (outside the phone frame) */
  --phone-canvas: #1d1f24;

  /* Status */
  --ok:   oklch(0.72 0.14 150);
  --warn: oklch(0.80 0.14 80);
  --err:  oklch(0.70 0.16 25);
  --ai:   oklch(0.72 0.14 295);

  /* Accent default — Academic (cyan/blue) */
  --accent:      oklch(0.72 0.14 235);
  --accent-soft: oklch(0.72 0.14 235 / 0.14);
  --accent-line: oklch(0.72 0.14 235 / 0.35);
  --accent-fg:   #0a0a0c;

  --radius-s: 4px;
  --radius-m: 6px;
  --radius-l: 10px;
  --shadow-1: 0 1px 2px rgba(0,0,0,.4);
  --shadow-2: 0 8px 30px rgba(0,0,0,.45);
}

/* Dark-mode context overrides */
[data-ctx="academic"] {
  --accent:      oklch(0.72 0.14 235);
  --accent-soft: oklch(0.72 0.14 235 / 0.14);
  --accent-line: oklch(0.72 0.14 235 / 0.35);
}
[data-ctx="corporate"] {
  --accent:      oklch(0.72 0.14 235);
  --accent-soft: oklch(0.72 0.14 235 / 0.14);
  --accent-line: oklch(0.72 0.14 235 / 0.35);
}
[data-ctx="talentpulse"] {
  --accent:      oklch(0.72 0.16 295);
  --accent-soft: oklch(0.72 0.16 295 / 0.14);
  --accent-line: oklch(0.72 0.16 295 / 0.35);
}

/* ──────────────────────────── Light ───────────────────────────────── */
[data-theme="light"] {
  --bg-0: #fafafa;
  --bg-1: #ffffff;
  --bg-2: #f4f4f5;
  --bg-3: #ebebee;
  --bg-4: #dcdce0;

  --line-1: rgba(0,0,0,0.05);
  --line-2: rgba(0,0,0,0.09);
  --line-3: rgba(0,0,0,0.18);

  --text-1: #0a0a0c;
  --text-2: rgba(0,0,0,0.62);
  --text-3: rgba(0,0,0,0.45);
  --text-4: rgba(0,0,0,0.30);

  --surf-1:      rgba(0,0,0,0.03);
  --surf-2:      rgba(0,0,0,0.05);
  --surf-3:      rgba(0,0,0,0.08);
  --surf-strong: rgba(0,0,0,0.15);

  --editor-bg:     #ffffff;
  --editor-tab:    #f4f4f5;
  --editor-gutter: rgba(0,0,0,0.32);

  --phone-canvas: #e5e5e7;

  /* Status: low-chroma oklch reads as washed-out on white — pull down lightness */
  --ok:   oklch(0.55 0.14 150);
  --warn: oklch(0.70 0.16 70);
  --err:  oklch(0.62 0.18 25);
  --ai:   oklch(0.62 0.18 295);

  /* Accent darkens so white text on buttons passes contrast */
  --accent:      oklch(0.55 0.16 235);
  --accent-soft: oklch(0.72 0.14 235 / 0.14);
  --accent-line: oklch(0.55 0.16 235 / 0.35);
  --accent-fg:   #ffffff;

  --shadow-1: 0 1px 2px rgba(0,0,0,.06);
  --shadow-2: 0 8px 24px rgba(0,0,0,.10);
}

/* Light-mode context overrides */
[data-theme="light"][data-ctx="academic"] {
  --accent:      oklch(0.55 0.16 235);
  --accent-soft: oklch(0.72 0.14 235 / 0.14);
  --accent-line: oklch(0.55 0.16 235 / 0.35);
}
[data-theme="light"][data-ctx="corporate"] {
  --accent:      oklch(0.55 0.16 235);
  --accent-soft: oklch(0.72 0.14 235 / 0.14);
  --accent-line: oklch(0.55 0.16 235 / 0.35);
}
[data-theme="light"][data-ctx="talentpulse"] {
  --accent:      oklch(0.52 0.20 295);
  --accent-soft: oklch(0.72 0.16 295 / 0.14);
  --accent-line: oklch(0.52 0.20 295 / 0.40);
}

/* ──────────────────────────── Reset + base type ───────────────────── */
* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg-0);
  color: var(--text-1);
  font: 14px/1.45 'Geist', 'IBM Plex Sans', ui-sans-serif, system-ui,
        -apple-system, 'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "ss02", "cv11";
}

.mono {
  font-family: 'Geist Mono', 'JetBrains Mono', 'IBM Plex Mono',
               ui-monospace, Menlo, monospace;
}

/* Scope of any screen render: kill default margins on headings/paragraphs
 * so layout is fully composition-driven. */
.sp h1, .sp h2, .sp h3, .sp h4, .sp h5, .sp p { margin: 0; }
.sp button { font-family: inherit; }
.sp a      { color: inherit; text-decoration: none; }

/* Subtle in-app scrollbars */
.sp ::-webkit-scrollbar         { width: 8px; height: 8px; }
.sp ::-webkit-scrollbar-thumb   { background: var(--surf-strong); border-radius: 8px; }
.sp ::-webkit-scrollbar-track   { background: transparent; }

/* ─── Corporate context: academic-only fields are hidden ───────────────
   Semester / Sem / Credits UI is tagged .acad-only at the call site.
   Purely declarative, so it flips the instant [data-ctx] changes. */
[data-ctx="corporate"] .acad-only{display:none!important}
[data-ctx="corporate"] .cat-grid{grid-template-columns:minmax(0,2.6fr) 92px!important}
.corp-only{display:none}
[data-ctx="corporate"] .corp-only{display:inline}