/* NitroJen Learning — color tokens.
   Base palette = NitroJen Studio Brand Guide v1 (Oct 2026).
   Semantic status values = the accessible values already shipping in NitroJen Course Studio. */
:root {
  /* Base palette */
  --nj-ink: #171821;            /* Nitro Ink */
  --nj-ink-soft: #262733;
  --nj-canvas: #faf9f6;         /* Canvas */
  --nj-white: #ffffff;
  --nj-violet-800: #3d26a8;
  --nj-violet-700: #4c31c8;     /* Deep Violet */
  --nj-violet-600: #6d4aff;     /* Electric Violet */
  --nj-violet-200: #d8ceff;
  --nj-violet-100: #eee9ff;     /* Soft Lilac */
  --nj-violet-50: #f6f3ff;
  --nj-sky: #43b9ff;            /* Sky */
  --nj-sky-100: #e5f6ff;
  --nj-mint: #2dd4bf;           /* Fresh Mint */
  --nj-mint-100: #e1faf5;
  --nj-coral: #ff6b5f;          /* Happy Coral */
  --nj-coral-100: #fff0ee;
  --nj-sun: #ffc857;            /* Sunbeam */
  --nj-sun-100: #fff5d8;
  --nj-slate-700: #475467;
  --nj-slate-500: #667085;      /* Slate */
  --nj-slate-400: #858da0;
  --nj-slate-300: #d0d5dd;
  --nj-slate-200: #e4e7ec;
  --nj-slate-100: #f2f4f7;

  /* Brand */
  --nj-primary: var(--nj-violet-600);
  --nj-primary-hover: var(--nj-violet-700);
  --nj-primary-pressed: var(--nj-violet-800);
  --nj-on-primary: var(--nj-white);
  --nj-secondary: var(--nj-ink);
  --nj-on-secondary: var(--nj-white);
  --nj-accent: var(--nj-coral);
  --nj-highlight: var(--nj-sun);
  --nj-gradient-brand: linear-gradient(135deg, var(--nj-violet-700) 0%, var(--nj-violet-600) 48%, var(--nj-sky) 100%);

  /* Status — text-safe (>=4.5:1 on white and canvas) + tints */
  --nj-success: #0e7c6a;
  --nj-success-tint: #e6f8f5;
  --nj-warning: #9a5b00;
  --nj-warning-tint: #fff5d8;
  --nj-error: #d92d20;
  --nj-error-tint: #fdecea;
  --nj-info: #0f6f9f;
  --nj-info-tint: #e5f6ff;

  /* Surfaces */
  --nj-bg: var(--nj-canvas);
  --nj-surface: var(--nj-white);
  --nj-surface-sunken: var(--nj-slate-100);
  --nj-surface-elevated: var(--nj-white);
  --nj-surface-selected: var(--nj-violet-100);
  --nj-surface-inverse: var(--nj-ink);
  --nj-scrim: rgba(23, 24, 33, 0.48);

  /* Text */
  --nj-text: var(--nj-ink);
  --nj-text-secondary: var(--nj-slate-700);
  --nj-text-muted: var(--nj-slate-500);
  --nj-text-inverse: var(--nj-white);
  --nj-text-link: var(--nj-violet-700);
  --nj-text-brand: var(--nj-violet-700);   /* eyebrows, selected labels */

  /* Lines */
  --nj-border: var(--nj-slate-200);         /* cards, containers */
  --nj-border-strong: var(--nj-slate-300);
  --nj-border-field: var(--nj-slate-400);   /* inputs: >=3:1 */
  --nj-divider: var(--nj-slate-200);

  /* Interactive */
  --nj-interactive: var(--nj-violet-600);
  --nj-interactive-hover: var(--nj-violet-100);
  --nj-interactive-selected: var(--nj-violet-100);
  --nj-interactive-selected-text: var(--nj-violet-700);
  --nj-focus: var(--nj-violet-700);
  --nj-focus-halo: rgba(109, 74, 255, 0.18);

  /* Content category colors (Studio block types) */
  --nj-cat-content: var(--nj-violet-600);
  --nj-cat-media: var(--nj-sky);
  --nj-cat-interaction: var(--nj-coral);
  --nj-cat-check: var(--nj-sun);
  --nj-cat-layout: var(--nj-mint);
  --nj-cat-advanced: var(--nj-ink);
}

[data-theme="dark"] {
  --nj-primary: #9d87ff;
  --nj-primary-hover: #c3b6ff;
  --nj-primary-pressed: #d8ceff;
  --nj-on-primary: var(--nj-ink);
  --nj-secondary: var(--nj-violet-100);
  --nj-on-secondary: var(--nj-ink);
  --nj-success: #5ee0c9;
  --nj-success-tint: rgba(45, 212, 191, 0.12);
  --nj-warning: #ffc857;
  --nj-warning-tint: rgba(255, 200, 87, 0.12);
  --nj-error: #ff9a90;
  --nj-error-tint: rgba(255, 107, 95, 0.12);
  --nj-info: #8fd3ff;
  --nj-info-tint: rgba(67, 185, 255, 0.12);
  --nj-bg: var(--nj-ink);
  --nj-surface: #1f2030;
  --nj-surface-sunken: #13141c;
  --nj-surface-elevated: #272939;
  --nj-surface-selected: rgba(157, 135, 255, 0.18);
  --nj-surface-inverse: var(--nj-white);
  --nj-scrim: rgba(0, 0, 0, 0.6);
  --nj-text: var(--nj-white);
  --nj-text-secondary: #c9cad3;
  --nj-text-muted: #a3a6b4;
  --nj-text-inverse: var(--nj-ink);
  --nj-text-link: #8fd3ff;
  --nj-text-brand: #bdb4ff;
  --nj-border: rgba(255, 255, 255, 0.12);
  --nj-border-strong: rgba(255, 255, 255, 0.2);
  --nj-border-field: #7d859a;
  --nj-divider: rgba(255, 255, 255, 0.12);
  --nj-interactive: #9d87ff;
  --nj-interactive-hover: rgba(157, 135, 255, 0.14);
  --nj-interactive-selected: rgba(157, 135, 255, 0.2);
  --nj-interactive-selected-text: #c3b6ff;
  --nj-focus: #c3b6ff;
}