/*
 * lanobots-tokens.css
 * Global design token layer — CSS custom properties.
 * Loaded on every LanoBots standalone page template AFTER lanobots-homepage.css.
 * All subsequent CSS files reference these variables.
 *
 * DO NOT hard-code color values in component or page CSS —
 * use these variables instead.
 */

/* ============================================================
   GLOBAL TOKENS
   ============================================================ */
:root {
  /* ── Backgrounds ── */
  --lb-black:        #050505;
  --lb-black-soft:   #0a0a0c;
  --lb-panel:        #101013;
  --lb-panel-raised: #151519;
  --lb-panel-float:  #1a1a1f;

  /* ── Typography ── */
  --lb-white:        #f4f2ec;
  --lb-muted:        rgba(244, 242, 236, 0.66);
  --lb-subtle:       rgba(244, 242, 236, 0.38);
  --lb-dim:          rgba(244, 242, 236, 0.22);

  /* ── Borders ── */
  --lb-border:        rgba(255, 255, 255, 0.10);
  --lb-border-mid:    rgba(255, 255, 255, 0.16);
  --lb-border-strong: rgba(255, 255, 255, 0.24);

  /* ── Brand colors ── */
  --lb-yellow:        #ffd400;
  --lb-yellow-hover:  #ffe040;
  --lb-purple:        #7b4fd4;

  /* ── Button tokens ── */
  --lb-btn-primary-bg:      #F5C400;
  --lb-btn-primary-color:   #000000;
  --lb-btn-primary-border:  #F5C400;
  --lb-btn-secondary-bg:    transparent;
  --lb-btn-secondary-color: #F5F0E8;
  --lb-btn-secondary-border:#F5F0E8;

  /* ── Typography ── */
  --font-display: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif;
  --font-ui:      'Barlow Condensed', 'Arial Narrow', Arial, sans-serif;
  --font-body:    'Barlow', system-ui, -apple-system, sans-serif;
  --font-mono:    'IBM Plex Mono', 'Courier New', monospace;

  /* ── Spacing ── */
  --lb-section-y:    5.5rem;
  --lb-section-y-sm: 3.5rem;
  --lb-container:    1200px;
  --lb-container-lg: 1440px;
  --lb-gap:          1.5rem;

  /* ── Motion ── */
  --ease-out:     cubic-bezier(.2, .7, .2, 1);
  --ease-in-out:  cubic-bezier(.45, 0, .55, 1);
  --dur-fast:     180ms;
  --dur-base:     300ms;
  --dur-slow:     600ms;

  /* ── Nav shop CTA text (overridable per page for light-bg accents) ── */
  --lb-nav-shop-text: #000000;

  /* ── Header ── */
  --lb-header-h: 68px;

  /* ── Default page accent (overridden per body class) ── */
  --page-accent:     #7b4fd4;
  --page-accent-rgb: 123, 79, 212;
}

/* ============================================================
   PER-PAGE ACCENT OVERRIDES
   ============================================================ */
body.page-home       { --page-accent: #8b3dff; --page-accent-rgb: 139,  61, 255; --font-display: 'Orbitron', 'Barlow Condensed', sans-serif; }
body.page-characters { --page-accent: #ef3b45; --page-accent-rgb: 239,  59,  69; --font-display: 'Oswald', 'Barlow Condensed', Impact, sans-serif; }
body.page-comics     { --page-accent: #1040c8; --page-accent-rgb:  16,  64, 200; --font-display: 'Bowlby One SC', 'Barlow Condensed', Impact, sans-serif; }
body.page-media      { --page-accent: #ff7a18; --page-accent-rgb: 255, 122,  24; --font-display: 'Space Grotesk', 'Barlow Condensed', sans-serif; }
body.page-shop       { --page-accent: #18ff00; --page-accent-rgb:  24, 255,   0; --lb-nav-shop-text: #000000; --font-display: 'Montserrat', 'Barlow Condensed', sans-serif; }
body.page-blog       { --page-accent: #f4f2ec; --page-accent-rgb: 244, 242, 236; --lb-nav-shop-text: #000000; --font-display: 'Cormorant Garamond', Georgia, serif; }
body.page-contact    { --page-accent: #ffd400; --page-accent-rgb: 255, 212,   0; --lb-nav-shop-text: #000000; --font-display: 'Rajdhani', 'Barlow Condensed', sans-serif; }