/* ----------------------------------------------------------------------
 * The Dev Labs — design tokens (CSS custom properties)
 *
 * Drop into any web project and reference via var(--td-bg), var(--td-text),
 * var(--td-color-accent), etc.
 *
 * Two layers:
 *   1. PRIMITIVES  — raw brand values (theme-independent). Backward-compatible
 *                    with the original `--td-color-*` names.
 *   2. SEMANTIC    — role-based tokens (`--td-bg`, `--td-text`, `--td-border`…)
 *                    that remap between dark and light themes.
 *
 * Theme selection:
 *   - default (`:root`)            → dark (the brand's home surface)
 *   - `[data-theme="light"]`       → light
 *   - `[data-theme="dark"]`        → dark (explicit)
 *   - no `data-theme` + OS = light → follows `prefers-color-scheme`
 *
 * Palette: near-black lab bench, one vivid flask orange, off-white wordmark,
 * graphite structure — now with a matching warm-paper light surface.
 * ---------------------------------------------------------------------- */

:root {
  /* ==================================================================
   * PRIMITIVES — raw brand values (do not change per theme)
   * ================================================================== */

  /* Brand / accent ramp */
  --td-color-accent: #f47c20;         /* flask orange — the brand mark */
  --td-color-accent-strong: #d9660c;  /* darker orange for text/links on light surfaces (AA) */
  --td-color-accent-soft: #fdebdc;    /* faint orange wash — light-theme accent surfaces */

  /* Dark surface ramp (ascending elevation) */
  --td-color-ink: #0e0e10;            /* near-black canvas */
  --td-color-panel: #161618;          /* alternating section bands */
  --td-color-surface: #1c1c1f;        /* cards on the canvas */

  /* Light surface ramp (warm paper) */
  --td-color-paper: #f4f3f1;          /* wordmark + off-white text on dark */
  --td-color-paper-panel: #eceae6;    /* light-theme alternating band */
  --td-color-paper-surface: #ffffff;  /* light-theme cards */

  /* Structure */
  --td-color-grey: #3c3c40;           /* structural motifs (hex frame, braces) */

  /* Typography — families */
  --td-font-display: 'Space Grotesk Variable', 'Space Grotesk', ui-sans-serif, sans-serif;
  --td-font-body: 'Space Grotesk Variable', 'Space Grotesk', ui-sans-serif, sans-serif;
  --td-font-mono: 'IBM Plex Mono', ui-monospace, monospace;

  /* Typography — display treatment */
  --td-display-weight: 600;
  --td-display-tracking: -0.02em;
  --td-mono-tracking: 0.02em;

  /* Fluid display sizes */
  --td-size-display-xl: clamp(3.5rem, 12vw, 10rem);
  --td-size-display-lg: clamp(3rem, 9vw, 7rem);

  /* Radius scale */
  --td-radius-none: 0px;
  --td-radius-sm: 4px;
  --td-radius-md: 8px;
  --td-radius-lg: 14px;
  --td-radius-full: 9999px;

  /* Spacing scale (4px base) */
  --td-space-xxs: 4px;
  --td-space-xs: 8px;
  --td-space-sm: 12px;
  --td-space-md: 16px;
  --td-space-lg: 24px;
  --td-space-xl: 40px;
  --td-space-xxl: 64px;
  --td-space-section: 96px;

  /* ==================================================================
   * SEMANTIC — role-based tokens. Default = DARK.
   * ================================================================== */

  --td-bg: var(--td-color-ink);           /* page canvas */
  --td-bg-panel: var(--td-color-panel);   /* alternating section band */
  --td-bg-surface: var(--td-color-surface);/* card surface */
  --td-bg-surface-2: #232327;             /* nested chips / hover on a surface */

  --td-text: var(--td-color-paper);       /* primary text */
  --td-text-muted: rgba(244, 243, 241, 0.74);
  --td-text-faint: rgba(244, 243, 241, 0.52);

  --td-border: rgba(244, 243, 241, 0.14);
  --td-border-soft: rgba(244, 243, 241, 0.10);

  --td-accent: var(--td-color-accent);        /* brand fills, marks, CTAs */
  --td-accent-text: var(--td-color-accent);   /* accent used as text/links (dark: bright orange is fine) */
  --td-on-accent: var(--td-color-ink);        /* text on an accent fill */
  --td-accent-surface: rgba(244, 124, 32, 0.14); /* faint accent-tinted surface */

  /* Status (success / info / danger) — text + tinted surface pairs */
  --td-success-text: #3fb950;
  --td-success-surface: rgba(63, 185, 80, 0.15);
  --td-info-text: #58a6ff;
  --td-info-surface: rgba(88, 166, 255, 0.15);
  --td-danger: #f85149;                  /* destructive fills (ban, delete) */
  --td-danger-text: #f85149;
  --td-danger-surface: rgba(248, 81, 73, 0.15);
  --td-on-danger: #ffffff;
  --td-mentor-text: #bc8cff;             /* instructor / mentor role accents */
  --td-mentor-surface: rgba(188, 140, 255, 0.15);

  /* Code blocks */
  --td-code-bg: #0a0a0c;
  --td-code-text: #d9d9dc;

  /* Elevation (shadows read as depth on dark, subtle on light) */
  --td-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --td-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.45);

  color-scheme: dark;
}

/* ====================================================================
 * LIGHT THEME
 * ==================================================================== */
:root[data-theme="light"] {
  --td-bg: var(--td-color-paper);
  --td-bg-panel: var(--td-color-paper-panel);
  --td-bg-surface: var(--td-color-paper-surface);
  --td-bg-surface-2: #f0efec;

  --td-text: var(--td-color-ink);
  --td-text-muted: rgba(14, 14, 16, 0.68);
  --td-text-faint: rgba(14, 14, 16, 0.46);

  --td-border: rgba(14, 14, 16, 0.12);
  --td-border-soft: rgba(14, 14, 16, 0.08);

  --td-accent: var(--td-color-accent);
  --td-accent-text: var(--td-color-accent-strong); /* darker orange for readable links/text */
  --td-on-accent: var(--td-color-ink);
  --td-accent-surface: var(--td-color-accent-soft);

  --td-success-text: #1a7f37;
  --td-success-surface: rgba(26, 127, 55, 0.12);
  --td-info-text: #0969da;
  --td-info-surface: rgba(9, 105, 218, 0.12);
  --td-danger: #cf222e;
  --td-danger-text: #cf222e;
  --td-danger-surface: rgba(207, 34, 46, 0.12);
  --td-on-danger: #ffffff;
  --td-mentor-text: #8250df;
  --td-mentor-surface: rgba(130, 80, 223, 0.12);

  --td-code-bg: #f6f8fa;
  --td-code-text: #24292f;

  --td-shadow-sm: 0 1px 2px rgba(14, 14, 16, 0.06);
  --td-shadow-md: 0 6px 24px rgba(14, 14, 16, 0.10);

  color-scheme: light;
}

/* Follow OS preference only when no explicit theme is set. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --td-bg: var(--td-color-paper);
    --td-bg-panel: var(--td-color-paper-panel);
    --td-bg-surface: var(--td-color-paper-surface);
    --td-bg-surface-2: #f0efec;

    --td-text: var(--td-color-ink);
    --td-text-muted: rgba(14, 14, 16, 0.68);
    --td-text-faint: rgba(14, 14, 16, 0.46);

    --td-border: rgba(14, 14, 16, 0.12);
    --td-border-soft: rgba(14, 14, 16, 0.08);

    --td-accent-text: var(--td-color-accent-strong);
    --td-accent-surface: var(--td-color-accent-soft);

    --td-success-text: #1a7f37;
    --td-success-surface: rgba(26, 127, 55, 0.12);
    --td-info-text: #0969da;
    --td-info-surface: rgba(9, 105, 218, 0.12);
    --td-danger: #cf222e;
    --td-danger-text: #cf222e;
    --td-danger-surface: rgba(207, 34, 46, 0.12);
    --td-on-danger: #ffffff;
    --td-mentor-text: #8250df;
    --td-mentor-surface: rgba(130, 80, 223, 0.12);

    --td-code-bg: #f6f8fa;
    --td-code-text: #24292f;

    --td-shadow-sm: 0 1px 2px rgba(14, 14, 16, 0.06);
    --td-shadow-md: 0 6px 24px rgba(14, 14, 16, 0.10);

    color-scheme: light;
  }
}