/* tokens-b.css — Style B "Street Smart Guide" palette (Student Sam)
 * Per docs/FRONTEND_TRD_v2.md §6.2 + §6.3 (v1.2).
 * Import order in /students HTML head: brand.css → tokens-b.css → base.css → components.css → glass.css → layout-b.css
 */

@import url('brand.css');
@import url('https://api.fontshare.com/v2/css?f[]=satoshi@400,500,700&display=swap');

:root, [data-theme="dark"] {
  /* Style B body font (Satoshi). Display font (Instrument Serif Italic) inherited from brand.css. */
  --font-body: 'Satoshi', 'Inter', sans-serif;

  /* Base surfaces — near-black deep space */
  --color-bg:             #0c0c18;   /* near-black base */
  --color-surface:        #131325;   /* card base */
  --color-surface-2:      #1a1a32;   /* elevated card */
  --color-surface-3:      #493267;   /* deep purple — glass card bg layer (worst-case backdrop) */
  --color-surface-offset: #373854;   /* navy slate — structural */

  /* Palette accents */
  --color-vivid-violet:   #9e379f;   /* decorative + large text only */
  --color-primary:        #e86af0;   /* electric pink — primary CTA, active states */
  --color-secondary:      #7bb3ff;   /* periwinkle — secondary CTA, info, done states (== --color-brand) */

  /* Typography */
  --color-text:           #f0ecff;   /* primary — 16.78:1 AAA on bg */
  --color-text-muted:     #b8b0d8;   /* secondary — 9.47:1 AAA on bg */
  --color-text-faint:     #6a6484;   /* decorative, large only */
  --color-text-inverse:   #0c0c18;

  /* CTAs */
  --color-cta:            #e86af0;   /* primary CTA fill (pink) */
  --color-cta-text:       #0c0c18;   /* dark text on pink — 7.17:1 AAA */
  --color-cta-hover:      #f090f8;
  --color-cta-glow:       rgba(232, 106, 240, 0.35);

  --color-cta-2:          #7bb3ff;   /* secondary CTA fill (periwinkle) */
  --color-cta-2-text:     #0c0c18;   /* dark text on blue — 9.0:1 AAA */
  --color-cta-2-glow:     rgba(123, 179, 255, 0.30);

  /* Semantic */
  --color-success:        #6daa45;
  --color-warning:        #fdab43;
  --color-error:          #ff6b6b;
  --color-info:           #7bb3ff;

  /* Glassmorphism tokens */
  --glass-bg:             rgba(55, 56, 84, 0.45);
  --glass-bg-hover:       rgba(55, 56, 84, 0.60);
  --glass-blur:           blur(12px);
  --glass-border:         1px solid rgba(232, 106, 240, 0.18);
  --glass-border-active:  1px solid rgba(232, 106, 240, 0.45);
  --glass-scrim:          linear-gradient(rgba(12, 12, 24, 0.35), rgba(12, 12, 24, 0.20));
  --glass-shadow:
    0 8px 32px rgba(0, 0, 0, 0.45),
    0 2px 8px rgba(232, 106, 240, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);

  /* Standard shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.25);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.40);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.55);
}

body {
  background: var(--color-bg);
  color: var(--color-text);
}

/* Body links */
a { color: var(--color-secondary); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--color-primary); }

/* Skip-link visual finish */
.skip-link {
  background: var(--color-cta);
  color: var(--color-cta-text);
}