/* ============================================================
   paulasilva-ms Design System tokens
   v1.7.0, multi-page playbook
   Microsoft 4-color identity (Blue, Green, Yellow, Red)
   ============================================================ */

:root {
  /* Microsoft logo palette */
  --c-red-50:    #FFF0EB;
  --c-red-100:   #FFD6C7;
  --c-red-500:   #F25022;
  --c-red-700:   #B33816;

  --c-green-50:  #F1F8E3;
  --c-green-100: #D8EDA5;
  --c-green-500: #7FBA00;
  --c-green-700: #5A8500;

  --c-blue-50:   #E5F6FD;
  --c-blue-100:  #B8E5FA;
  --c-blue-500:  #00A4EF;
  --c-blue-700:  #0076AC;

  --c-yellow-50: #FFF7E0;
  --c-yellow-100:#FFE79C;
  --c-yellow-500:#FFB900;
  --c-yellow-700:#B88500;

  /* Neutrals (light) */
  --ink:     #1A1A1A;
  --ink-2:   #3A3A3A;
  --ink-3:   #737373;
  --paper:   #FFFFFF;
  --bg:      #F7F7F5;
  --bg-alt:  #ECECE8;
  --rule:    #E5E5E0;
  --rule-2:  #CECEC7;

  /* Default chapter accent (overridden per chapter via .acc-*) */
  --accent:     var(--c-blue-500);
  --accent-ink: var(--c-blue-700);
  --accent-50:  var(--c-blue-50);

  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, Helvetica, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* Dark mode neutrals */
[data-theme="dark"] {
  --ink:     #F0F0F0;
  --ink-2:   #C7C7C2;
  --ink-3:   #A8A8A4;
  --paper:   #1C1C1A;
  --bg:      #141414;
  --bg-alt:  #242420;
  --rule:    #2E2E2A;
  --rule-2:  #3A3A36;

  /* Brighter accent ink for legibility on dark, low-opacity 50 for backgrounds */
  --accent-ink: var(--c-blue-500);
  --accent-50:  rgba(0, 164, 239, 0.12);
}

/* Chapter accent classes */
.acc-intro   { --accent: var(--ink-2); --accent-ink: var(--ink); --accent-50: var(--bg-alt); }
.acc-blue    { --accent: var(--c-blue-500);   --accent-ink: var(--c-blue-700);   --accent-50: var(--c-blue-50); }
.acc-green   { --accent: var(--c-green-500);  --accent-ink: var(--c-green-700);  --accent-50: var(--c-green-50); }
.acc-yellow  { --accent: var(--c-yellow-500); --accent-ink: var(--c-yellow-700); --accent-50: var(--c-yellow-50); }
.acc-red     { --accent: var(--c-red-500);    --accent-ink: var(--c-red-700);    --accent-50: var(--c-red-50); }
.acc-ink     { --accent: var(--ink-2); --accent-ink: var(--ink); --accent-50: var(--bg-alt); }

/* Per-accent dark overrides: brighter ink, translucent 50 */
[data-theme="dark"] .acc-intro,
[data-theme="dark"] .acc-ink     { --accent-ink: var(--ink); --accent-50: rgba(255,255,255,0.06); }
[data-theme="dark"] .acc-blue    { --accent-ink: var(--c-blue-500);   --accent-50: rgba(0, 164, 239, 0.12); }
[data-theme="dark"] .acc-green   { --accent-ink: var(--c-green-500);  --accent-50: rgba(127, 186, 0, 0.12); }
[data-theme="dark"] .acc-yellow  { --accent-ink: var(--c-yellow-500); --accent-50: rgba(255, 185, 0, 0.12); }
[data-theme="dark"] .acc-red     { --accent-ink: var(--c-red-500);    --accent-50: rgba(242, 80, 34, 0.12); }

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--bg);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  transition: background 0.2s ease, color 0.2s ease;
}