/* Design tokens for Arduino and ESP32 ("Neon Grid").
   Palette: near-black navy surfaces, neon green for action, cyan and magenta
   accents, electric yellow for focus. Dark theme throughout.
   Every text/background pair below meets WCAG AA (4.5:1) or better. */
:root {
  /* Colour: surfaces */
  --color-paper: #0b0f1a;        /* page background */
  --color-mist: #131a2b;         /* cards, panels, slides */
  --color-deep: #070a12;         /* header, footer, hero bands */
  /* Colour: text */
  --color-ink: #e6edf7;          /* body text: paper 16.2:1, mist 14.7:1 */
  --color-ink-soft: #9fb0c9;     /* secondary text: paper 8.7:1, mist 7.9:1 */
  --color-on-deep: #e6edf7;      /* text on deep 16.8:1 */
  --color-on-primary: #05070d;   /* text on neon green buttons 15.3:1 */
  /* Colour: neon accents (all text-safe on the dark surfaces) */
  --color-primary: #39ff9c;      /* links, buttons: paper 14.5:1, mist 13.2:1 */
  --color-highlight: #ff4dbd;    /* magenta eyebrows, tags: paper 6.4:1, mist 5.8:1 */
  --color-primary-light: #22d3ee; /* cyan links in footer/bands: deep 10.9:1 */
  --color-highlight-light: #ff4dbd; /* magenta on deep */
  --color-gold: #ffe14d;         /* current-page marker, sparks: paper 14.7:1 */
  --color-focus: #ffe14d;        /* focus ring: paper 14.7:1 */
  --color-line: #3a4a6b;         /* borders (decorative, not text) */

  /* Glows and gradients */
  --glow-green: 0 0 12px rgba(57, 255, 156, 0.55);
  --glow-cyan: 0 0 12px rgba(34, 211, 238, 0.55);
  --glow-magenta: 0 0 12px rgba(255, 77, 189, 0.55);
  --gradient-deep: linear-gradient(135deg, #070a12 0%, #0f1630 60%, #1a1040 100%);
  --gradient-spark: linear-gradient(90deg, #39ff9c, #22d3ee 50%, #ff4dbd);
  --grid-bg: url("../assets/grid.svg");

  /* Motion: any animation should use these so reduced-motion can switch it off */
  --motion-scale: 1;             /* 1 = motion on, 0 = off (set to 0 under reduced motion); multiply distances by it */
  --motion-fast: 150ms;          /* hover, press, focus changes */
  --motion-base: 350ms;          /* reveals, slide changes */
  --motion-slow: 600ms;
  --motion-ambient: 8s;          /* slow background loops ("calm motion") */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-inout: cubic-bezier(0.45, 0, 0.55, 1);
  --distance-reveal: 16px;       /* how far things travel when they appear */

  /* Type: system fonts only */
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: ui-monospace, "SFMono-Regular", "Cascadia Code", Menlo, Consolas, monospace;
  --font-mono: ui-monospace, "SFMono-Regular", "Cascadia Code", Menlo, Consolas, monospace;
  --weight-display: 700;

  /* Type scale (1.25 ratio, fluid at the top end) */
  --text-xs: 0.8rem;
  --text-sm: 0.9rem;
  --text-base: 1.0625rem;
  --text-lg: 1.3rem;
  --text-xl: clamp(1.5rem, 1.25rem + 1vw, 1.9rem);
  --text-2xl: clamp(1.9rem, 1.5rem + 2vw, 2.7rem);
  --text-3xl: clamp(2.4rem, 1.6rem + 4vw, 4.4rem);
  --leading-tight: 1.15;
  --leading-body: 1.7;
  --measure: 68ch;

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.75rem;
  --space-6: 3rem;
  --space-7: 5rem;

  /* Shape: crisp corners */
  --radius-sm: 2px;
  --radius-md: 6px;
  --radius-lg: 12px;
  --shadow-card: 0 0 0 1px #26324d, 0 8px 28px rgba(0, 0, 0, 0.5);
  --content-width: 72rem;

  /* Aliases kept so existing stylesheets keep working */
  --color-navy: var(--color-deep);
  --color-on-navy: var(--color-on-deep);
  --color-teal: var(--color-primary);
  --color-amber: var(--color-highlight);
  --color-teal-light: var(--color-primary-light);
  --color-amber-light: var(--color-highlight-light);
  --color-bg: var(--color-paper);
  --color-text: var(--color-ink);
  --color-accent: var(--color-primary);
  --space: var(--space-4);
}

/* Motion library. Rules: transform and opacity only (GPU friendly); ambient loops
   are slow (8s or more) and subtle; nothing flashes (no loop faster than 3s with
   a big brightness change); content is fully readable with all of it switched off.
   Use the classes as they are, or reuse the keyframes in your own rules. */
@keyframes fade-up { from { opacity: 0; transform: translateY(var(--distance-reveal)); } to { opacity: 1; transform: none; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes slide-from-right { from { opacity: 0; transform: translateX(calc(var(--distance-reveal) * 2)); } to { opacity: 1; transform: none; } }
@keyframes slide-from-left { from { opacity: 0; transform: translateX(calc(var(--distance-reveal) * -2)); } to { opacity: 1; transform: none; } }
@keyframes float-y { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes glow-breathe { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
@keyframes drift-x { from { transform: translateX(0); } to { transform: translateX(-48px); } }

.motion-fade-up { animation: fade-up var(--motion-slow) var(--ease-out) both; }
.motion-fade-in { animation: fade-in var(--motion-slow) var(--ease-out) both; }
.motion-slide-next { animation: slide-from-right var(--motion-base) var(--ease-out) both; }
.motion-slide-prev { animation: slide-from-left var(--motion-base) var(--ease-out) both; }
.motion-float { animation: float-y 8s var(--ease-inout) infinite; }
.motion-breathe { animation: glow-breathe 5s var(--ease-inout) infinite; }  /* on a glow overlay element, not on text */
.motion-drift { animation: drift-x 24s linear infinite; }                   /* for the grid backdrop (tile is 48px) */
/* Stagger children: add style="--i:0", "--i:1", ... or use the helper below */
.motion-stagger > * { animation: fade-up var(--motion-slow) var(--ease-out) both; animation-delay: calc(var(--i, 0) * 80ms); }
.motion-stagger > :nth-child(1) { --i: 0; } .motion-stagger > :nth-child(2) { --i: 1; } .motion-stagger > :nth-child(3) { --i: 2; }
.motion-stagger > :nth-child(4) { --i: 3; } .motion-stagger > :nth-child(5) { --i: 4; } .motion-stagger > :nth-child(6) { --i: 5; }

/* Respect the reader's motion setting: no animation or smooth effects */
@media (prefers-reduced-motion: reduce) {
  :root { --motion-scale: 0; --motion-fast: 0s; --motion-base: 0s; --motion-slow: 0s; --distance-reveal: 0px; }
  html { scroll-behavior: auto; }
  [class*="motion-"], .motion-stagger > * { animation: none !important; opacity: 1; transform: none; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}