/**
 * Terminal D&D Design Tokens — Colors & Spacing
 * ================================================
 * Color palette, background/text/accent colors, spacing scale,
 * border radius, and foundational visual variables.
 */

/* FOUC Prevention: Show body once CSS is loaded */
body.css-loading {
  visibility: visible;
}

:root {
  /* ========================================
   * COLOR PALETTE
   * ======================================== */

  /* Background Colors */
  --color-bg-primary: #1a1a1a;
  --color-bg-secondary: #2d2d2d;
  --color-bg-tertiary: #3d3d3d;
  --color-bg-elevated: #404040;
  --color-bg-hover: #4a4a4a;

  /* Text Colors - WCAG AA compliant (4.5:1 minimum contrast on #1a1a1a) */
  --color-text-primary: #e0e0e0;      /* 11.5:1 contrast */
  --color-text-secondary: #a0a0a0;    /* 6.6:1 contrast */
  --color-text-muted: #888888;        /* 5.9:1 contrast - bumped from #666 for AA compliance */
  --color-text-disabled: #666666;     /* 4.2:1 - use only for disabled/decorative elements */
  --color-text-inverse: #1a1a1a;

  /* Accent Colors - Slightly muted for easier viewing */
  /* Primary interactive accent — phosphor-terminal green (#8029). Reuses the
   * canonical success green (--color-success #4ade80) so the terminal identity
   * is a single phosphor palette, not One-Dark blue. Contrast ≈10:1 on
   * #1a1a1a (WCAG AAA). Blue-named semantics (info, xp) are preserved via
   * --color-accent-blue / --color-accent-info below, which stay #5a9fd8. */
  --color-accent-primary: #4ade80;    /* Phosphor green - interactive elements */
  --color-accent-secondary: #8ab56e;  /* Green - success, HP, nature */
  --color-accent-warning: #d4b06e;    /* Gold - warnings, items */
  --color-accent-error: #cf6068;      /* Red - errors, damage */
  --color-accent-purple: #b56cc8;     /* Purple - DM, magic */
  --color-accent-orange: #c08a58;     /* Orange - evocation, factions */
  --color-accent-cyan: #4da8b5;       /* Cyan - necromancy, water */

  /* Semantic status colors — base success token. Consumers already fall back
   * to #4ade80 (e.g. var(--color-success, #4ade80)); defining it here keeps
   * those panels green and fixes consumers WITHOUT a fallback (lobby_browser
   * DM-online dot rendered colorless before this). #4264 / #7752. */
  --color-success: #4ade80;           /* Green — success, online status */

  /* Debug-tier accent — saturated orange retained for the channel-tabs DEBUG
   * tier signal (admin-only filter). Kept distinct from the muted
   * --color-accent-orange so the tier banner stays visually loud. */
  --debug-tier-accent: #f97316;
  --debug-tier-accent-soft: rgba(249, 115, 22, 0.45);
  --debug-tier-accent-muted: rgba(249, 115, 22, 0.85);

  /* Channel accent colors — promoted from hardcoded hex in
   * _channel_tabs.css (#4266 / audit findings 5.4). Each channel has a
   * foreground (`--color-channel-*`) and a low-opacity background variant
   * (`--color-channel-*-bg`) for active-tab fill. Saturated greens/blues/
   * golds/purples are intentionally distinct from the muted
   * `--color-accent-*` palette so the channel filter stays a strong signal. */
  --color-channel-adventure: #4ade80;          /* Green — adventure / core gameplay */
  --color-channel-adventure-bg: #0d2a1a;
  --color-channel-ooc: #60a5fa;                /* Blue — out-of-character chat */
  --color-channel-ooc-bg: #0d1a2a;
  --color-channel-dm: #fbbf24;                 /* Gold — DM channel */
  --color-channel-dm-bg: #2a2a0d;
  --color-channel-creative: #c084fc;           /* Purple — creative spaces */
  --color-channel-creative-bg: #1a0d2a;

  /* Semantic Colors */
  --color-hp-full: #8ab56e;
  --color-hp-mid: #d4b06e;
  --color-hp-low: #cf6068;
  --color-xp: #5a9fd8;
  --color-gold: #e8c44a;
  --color-error: #cf6068;              /* Red - error states (matches accent-error) */
  --color-error-bg: rgba(207, 96, 104, 0.15);
  --color-error-muted: rgba(207, 96, 104, 0.3);

  /* Skip Link Colors - WCAG AA 4.5:1 guaranteed (12.4:1 actual) */
  --skip-link-bg: #ffd700;             /* Bright gold background */
  --skip-link-color: #1a1a1a;          /* Dark text — 12.4:1 on #ffd700 */

  /* Border Colors — WCAG AA non-text contrast (1.4.11, ≥3:1 on #1a1a1a).
   * default/primary #6a6a6a = 3.22:1 (raised from #404040 = 1.68:1, #8024). */
  --color-border-default: #6a6a6a;
  --color-border-primary: #6a6a6a;
  --color-border-subtle: #333333;
  --color-border-focus: #61afef;

  /* Entity Type Colors (for chips, tooltips, cards) */
  --color-entity-npc: #22d3ee;           /* Cyan - NPCs and characters */
  --color-entity-location: #98c379;      /* Green - Locations and places */
  --color-entity-item: #e5c07b;          /* Gold - Items and equipment */
  --color-entity-creature: #e06c75;      /* Red - Creatures and monsters */
  --color-entity-spell: #c678dd;         /* Purple - Spells and magic */
  --color-entity-quest: #61afef;         /* Blue - Quests and objectives */
  --color-entity-faction: #d19a66;       /* Orange - Factions and groups */
  --color-entity-lore: #abb2bf;          /* Gray - Lore and knowledge */

  /* Entity Background Variants (15% opacity for dark-theme card/chip backgrounds) */
  --color-entity-npc-bg: rgba(34, 211, 238, 0.15);
  --color-entity-item-bg: rgba(229, 192, 123, 0.15);
  --color-entity-creature-bg: rgba(224, 108, 117, 0.15);
  --color-entity-spell-bg: rgba(198, 120, 221, 0.15);
  --color-entity-quest-bg: rgba(97, 175, 239, 0.15);
  --color-entity-location-bg: rgba(152, 195, 121, 0.15);
  --color-entity-condition: #eab308;          /* Amber - Conditions and effects */
  --color-entity-condition-bg: rgba(234, 179, 8, 0.15);
  --color-entity-location-glow: 0 0 8px rgba(152, 195, 121, 0.3);

  /* D&D 5e Item Rarity Colors */
  --rarity-common: var(--color-text-primary);
  --rarity-uncommon: #1fc71f;         /* Green */
  --rarity-rare: #4d8be8;            /* Blue */
  --rarity-very-rare: #9b59d0;       /* Purple */
  --rarity-legendary: #ff8c00;       /* Orange */
  --rarity-artifact: #e74c3c;        /* Red */

  /* D&D 5e Damage Type Colors - PHB Accurate */
  --dmg-fire: #FF4500;           /* Orange-Red - flames and heat */
  --dmg-cold: #87CEEB;           /* Sky Blue - frost and ice */
  --dmg-lightning: #FFD700;      /* Gold - electrical energy */
  --dmg-acid: #9ACD32;           /* Yellow-Green - corrosive */
  --dmg-poison: #9370DB;         /* Medium Purple - toxic */
  --dmg-necrotic: #5a8a5a;       /* Raised from #2F4F2F — WCAG AA ≥4.5:1 on #1a1a1a */
  --dmg-radiant: #FFFACD;        /* Lemon Chiffon - holy light */
  --dmg-force: #DA70D6;          /* Orchid - pure magical energy */
  --dmg-psychic: #FF00FF;        /* Magenta - mental damage */
  --dmg-thunder: #4682B4;        /* Steel Blue - sonic boom */
  --dmg-bludgeoning: #8B4513;    /* Saddle Brown - blunt force */
  --dmg-piercing: #C0C0C0;       /* Silver - stabbing/piercing */
  --dmg-slashing: #DC143C;       /* Crimson - cutting/slicing */

  /* D&D 5e Spell School Colors - PHB Accurate */
  --spell-abjuration: #4682B4;    /* Steel Blue - protective magic */
  --spell-conjuration: #9370DB;   /* Medium Purple - summoning */
  --spell-divination: #87CEEB;    /* Sky Blue - knowledge and foresight */
  --spell-enchantment: #FFB6C1;   /* Light Pink - charm and mind control */
  --spell-evocation: #FF4500;     /* Orange Red - raw elemental power */
  --spell-illusion: #DA70D6;      /* Orchid - deception and trickery */
  --spell-necromancy: #5a8a5a;    /* Raised from #2F4F2F — WCAG AA ≥4.5:1 on #1a1a1a */
  --spell-transmutation: #32CD32; /* Lime Green - transformation */

  /* DM Narrative Text */
  --color-dm-text: #e8dcc4;             /* Warm parchment tone for DM narration */

  /* Speech Bubble Colors */
  --bubble-player-bg: rgba(152, 195, 121, 0.12);
  --bubble-player-border: rgba(152, 195, 121, 0.35);
  --bubble-dm-bg: rgba(139, 69, 19, 0.08);
  --bubble-dm-border: rgba(198, 120, 221, 0.4);
  --bubble-system-bg: rgba(171, 178, 191, 0.08);
  --bubble-tail-size: 10px;
  --bubble-radius: 12px;
  --bubble-max-width: 85%;

  /* Screenplay Mode Colors */
  --screenplay-bg: #FFFEF5;           /* Warm off-white (script paper) */
  --screenplay-text: #1a1a1a;         /* Near black for dialogue */
  --screenplay-action: #2a2a2a;       /* Dark gray for action lines */
  --screenplay-muted: #555555;        /* Gray for stage directions */
  --screenplay-player: #004488;       /* Dark blue for player input */
  --screenplay-font: 'Courier New', Courier, 'Liberation Mono', monospace;

  /* Paper Surface (warm note/card backgrounds) */
  --paper-bg: #FFFEF5;              /* Warm off-white */
  --paper-bg-dark: #ede9df;         /* Darker warm paper for contrast areas */
  --paper-text: #2a2a2a;            /* Near-black for readability */
  --paper-border: rgba(0, 0, 0, 0.12);
  --paper-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
  --paper-font: var(--font-body);

  /* Post-it Note Colors */
  --postit-yellow: #fff9c4;
  --postit-yellow-text: #3e3a00;
  --postit-blue: #bbdefb;
  --postit-blue-text: #0d2744;
  --postit-green: #c8e6c9;
  --postit-green-text: #1b3a1c;
  --postit-pink: #f8bbd0;
  --postit-pink-text: #3e1929;
  --postit-text: #1c1917;           /* Universal dark text for post-it bodies */
  --postit-font: 'Segoe Print', 'Comic Sans MS', 'Marker Felt', cursive;
  --postit-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  --postit-radius: 2px;

  /* Progressive Reveal Stagger Timings */
  --progressive-delay-1: 0ms;
  --progressive-delay-2: 120ms;
  --progressive-delay-3: 240ms;
  --progressive-delay-4: 360ms;
  --progressive-delay-5: 480ms;

  /* Script Room (Full-page screenplay view) */
  --script-bg: #2a2a2e;              /* Dark background behind page */
  --script-page-bg: #FFFEF5;         /* Same warm off-white as screenplay */
  --script-page-shadow: 0 2px 20px rgba(0, 0, 0, 0.25);
  --script-page-width: 8.5in;        /* US Letter width */
  --script-margin-bg: transparent;    /* Margin area background */
  --script-margin-width: 240px;       /* Margin sidebar width */
  --script-margin-note-bg: rgba(255, 255, 255, 0.06);
  --script-margin-note-border: rgba(255, 255, 255, 0.12);
  --script-cursor-color: var(--screenplay-player);

  /* Legacy aliases (for backwards compatibility during migration) */
  --bg-primary: var(--color-bg-primary);
  --bg-secondary: var(--color-bg-secondary);
  --bg-tertiary: var(--color-bg-tertiary);
  --text-primary: var(--color-text-primary);
  --text-secondary: var(--color-text-secondary);
  --text-muted: var(--color-text-muted);
  /* WCAG-AA-tuned muted text for the ~#1a1a1a sign-in surface (6.19:1);
   * extracted from sessions/new.html.erb inline #9a9a9a literals (#8247). */
  --text-muted-aa: #9a9a9a;
  --accent-primary: var(--color-accent-primary);
  --accent-secondary: var(--color-accent-secondary);
  --accent-warning: var(--color-accent-warning);
  --accent-error: var(--color-accent-error);
  --accent-purple: var(--color-accent-purple);
  --border-color: var(--color-border-default);
  --radius-pill: var(--radius-full);
  --color-primary: var(--color-accent-primary);
  --border-subtle: var(--color-border-subtle);

  /* Semantic aliases (used by creation_mode, world_selector, etc.) */
  --color-bg: var(--color-bg-primary);
  --color-text: var(--color-text-primary);
  --color-surface: var(--color-bg-secondary);
  --color-surface-hover: var(--color-bg-hover);
  --color-surface-elevated: var(--color-bg-elevated);

  /* Bare-name aliases (#4382/#4380/#4328 — consumers reference these
   * unsuffixed names but they were undefined in :root, causing widespread
   * invisible-on-dark rendering: status bar, world-select cards, concept
   * builder, creation preview, character sheet borders, sound settings). */
  --color-accent: var(--color-accent-primary);
  --color-fg: var(--color-text-primary);
  --border-default: var(--color-border-default);
  --surface-bg: var(--color-bg-secondary);

  /* Surface Colors (for DM panels and unified renderer) */
  --surface-primary: var(--color-bg-primary);
  --surface-secondary: var(--color-bg-secondary);
  --surface-elevated: var(--color-surface-elevated);
  --surface-dark: var(--color-bg-primary);
  --surface-darker: #141414;
  --surface-hover: var(--color-bg-hover);
  --color-border: var(--color-border-default);
  /* Blue-named alias pinned to the literal One-Dark blue so blue-specific
   * consumers (info chips, xp) stay blue after the primary accent went
   * phosphor-green (#8029). Was var(--color-accent-primary). */
  --color-accent-blue: #5a9fd8;
  --color-accent-green: var(--color-accent-secondary);
  --color-accent-success: var(--color-accent-secondary);  /* Semantic alias for success states */
  --color-accent-yellow: var(--color-accent-warning);
  --color-accent-red: var(--color-accent-error);

  /* Status/Semantic Background Colors (for badges, alerts, etc.) */
  --color-success-bg: rgba(138, 181, 110, 0.15);
  --color-success-text: #8ab56e;
  --color-warning-bg: rgba(212, 176, 110, 0.15);
  --color-warning-text: #d4b06e;
  --color-info-bg: rgba(90, 159, 216, 0.15);
  --color-info-text: #5a9fd8;
  --color-accent-bg: rgba(90, 159, 216, 0.1);

  /* Primer-style Semantic State Colors
   * Used by turn rhythm, autopilot, inline panels, and other newer components.
   * Maps to project palette for terminal aesthetic consistency. */

  /* Text: tertiary level (between muted and disabled) */
  --color-text-tertiary: #777777;

  /* Border: strong emphasis — #7a7a7a = 4.06:1 on #1a1a1a, kept above
   * --color-border-default (#6a6a6a) to preserve strong>default hierarchy (#8024). */
  --color-border-strong: #7a7a7a;

  /* Accent (blue) semantic scale — interactive elements, autopilot */
  --color-accent-subtle: rgba(90, 159, 216, 0.1);
  --color-accent-muted: rgba(90, 159, 216, 0.3);
  --color-accent-emphasis: #5a9fd8;
  --color-accent-fg: #7ab8ea;
  --color-accent-info: #5a9fd8;

  /* Success (green) semantic scale — ready states */
  --color-success-subtle: rgba(138, 181, 110, 0.12);
  --color-success-emphasis: #8ab56e;
  --color-success-fg: #a0cc84;

  /* Warning (gold) semantic scale — DM bump, caution */
  --color-warning-subtle: rgba(212, 176, 110, 0.12);
  --color-warning-muted: rgba(212, 176, 110, 0.3);
  --color-warning-emphasis: #d4b06e;
  --color-warning-fg: #e0c488;

  /* Danger (red) semantic scale — telegraphs, errors */
  --color-danger-subtle: rgba(207, 96, 104, 0.12);
  --color-danger-muted: rgba(207, 96, 104, 0.3);
  --color-danger-emphasis: #cf6068;
  --color-danger-fg: #e07880;

  /* Severe (orange-red) semantic scale — high threat */
  --color-severe-emphasis: #c08a58;

  /* Foreground on emphasis backgrounds (dark text on vivid bg) */
  --color-fg-on-emphasis: #1a1a1a;

  /* Palette scale colors (Tailwind-style, used by turn rhythm scoped vars) */
  --color-green-500: #8ab56e;
  --color-orange-500: #c08a58;
  --color-gray-500: #777777;
  --color-yellow-500: #d4b06e;
  --color-red-500: #cf6068;

  /* Overlay Colors (for backdrops, shadows, transparency) */
  --overlay-light: rgba(0, 0, 0, 0.2);
  --overlay-light-plus: rgba(0, 0, 0, 0.3);
  --overlay-medium: rgba(0, 0, 0, 0.4);
  --overlay-medium-plus: rgba(0, 0, 0, 0.5);
  --overlay-heavy: rgba(0, 0, 0, 0.6);
  --overlay-dark: rgba(0, 0, 0, 0.8);
  --overlay-darker: rgba(0, 0, 0, 0.85);
  --overlay-white-subtle: rgba(255, 255, 255, 0.05);
  --overlay-white-light: rgba(255, 255, 255, 0.1);
  --overlay-white-medium: rgba(255, 255, 255, 0.2);
  --overlay-gold-subtle: rgba(255, 215, 0, 0.1);
  --overlay-gold-light: rgba(255, 215, 0, 0.2);
  --overlay-gold-medium: rgba(255, 215, 0, 0.3);
  /* Tinted accent overlays — subtle backgrounds for success/error surfaces.
   * Extracted from sessions/new.html.erb inline styles (#8247) so views
   * reference the token layer instead of re-declaring the rgba literal. */
  --overlay-success-subtle: rgba(152, 195, 121, 0.1);   /* accent-secondary @ 10% */
  --overlay-error-subtle: rgba(224, 108, 117, 0.1);     /* accent-error @ 10% */

  /* Spacing aliases (semantic names) */
  --space-xs: var(--space-1);
  --space-sm: var(--space-2);
  --space-md: var(--space-4);
  --space-lg: var(--space-6);
  --space-xl: var(--space-8);

}
/**
 * Terminal D&D Design Tokens — Typography, Animation, Z-Index
 * ============================================================
 * Font families/sizes/weights, animation timings, shadows,
 * elevation system, transitions, and z-index scale.
 */

:root {
  /* ========================================
   * TYPOGRAPHY
   * ======================================== */

  /* Font Families */
  --font-mono: 'SF Mono', 'Fira Code', 'Consolas', 'Monaco', monospace;
  --font-family-mono: var(--font-mono);
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-script: 'Courier New', Courier, 'Liberation Mono', monospace;

  /* Fantasy Typography - D&D themed fonts */
  --font-heading: 'Cinzel', 'Palatino Linotype', 'Book Antiqua', Palatino, Georgia, serif;
  --font-body: 'Spectral', Georgia, 'Times New Roman', Times, serif;
  --font-fantasy-fallback: Georgia, 'Times New Roman', serif;

  /* Font Sizes - Phase 1: Enhanced scale for readability */
  --font-size-2xs: 10px;
  --font-size-xs: 11px;
  --font-size-sm: 12px;
  --font-size-base: 14px;     /* 13px → 14px: Reduces eye strain */
  --font-size-md: 15px;       /* 14px → 15px: Better hierarchy */
  --font-size-lg: 17px;       /* 16px → 17px: Enhanced readability */
  --font-size-xl: 18px;
  --font-size-2xl: 20px;
  --font-size-3xl: 24px;
  --font-size-4xl: 32px;
  --font-size-5xl: 48px;

  /* Heading sizes - Typographic scale (1.25 ratio for classical proportions) */
  --font-size-h1: 2rem;       /* 32px - Page titles, major section headers */
  --font-size-h2: 1.625rem;   /* 26px - Section headers */
  --font-size-h3: 1.3rem;     /* ~21px - Subsection headers */
  --font-size-h4: 1.125rem;   /* 18px - Card/panel headers */
  --font-size-h5: 1rem;       /* 16px - Minor headers */
  --font-size-h6: 0.875rem;   /* 14px - Smallest headers */

  /* Line Heights */
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-narrative: 1.75;  /* Phase 2: Generous line-height for calm reading */
  --line-height-relaxed: 1.75;

  /* Font Weights */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* ========================================
   * SPACING SCALE (4px base unit, harmonized)
   * ======================================== */

  --space-half: 2px;   /* Alias for 0.5 units (used by turn rhythm) */
  --space-0-5: 2px;   /* 0.5 units */
  --space-1: 4px;     /* 1 unit - base */
  --space-1-5: 6px;   /* 1.5 units */
  --space-2: 8px;     /* 2 units */
  --space-2-5: 10px;  /* 2.5 units */
  --space-3: 12px;    /* 3 units */
  --space-3-5: 14px;  /* 3.5 units */
  --space-4: 16px;    /* 4 units */
  --space-5: 20px;    /* 5 units */
  --space-6: 24px;    /* 6 units */
  --space-8: 32px;    /* 8 units */
  --space-10: 40px;   /* 10 units */
  --space-12: 48px;   /* 12 units */
  --space-16: 64px;   /* 16 units */
  --space-20: 80px;   /* 20 units */

  /* ========================================
   * BORDER RADIUS (sharper for flat UI)
   * ======================================== */

  --radius-sm: 2px;
  --radius-md: 2px;
  --radius-lg: 2px;
  --radius-xl: 4px;
  --radius-full: 9999px;

  /* ========================================
   * ANIMATION & TRANSITION TIMING
   * ======================================== */

  /* Base animation speeds (controlled by data-animation-speed attribute) */
  --animation-speed-multiplier: 1;  /* Default: normal speed */

  /* Duration tokens */
  --duration-instant: calc(50ms * var(--animation-speed-multiplier));
  --duration-fast: calc(150ms * var(--animation-speed-multiplier));
  --duration-normal: calc(300ms * var(--animation-speed-multiplier));
  --duration-slow: calc(500ms * var(--animation-speed-multiplier));
  --duration-slower: calc(800ms * var(--animation-speed-multiplier));
  --duration-dramatic: calc(1000ms * var(--animation-speed-multiplier));

  /* Timing aliases (semantic names for component authors)
   * Map to --duration-* tokens above. Use these in component CSS. */
  --timing-instant: var(--duration-instant);    /* 50ms  - Hover states, toggles */
  --timing-fast: var(--duration-fast);          /* 150ms - Button transitions, small state changes */
  --timing-normal: var(--duration-normal);      /* 300ms - Panel open/close, card transitions */
  --timing-slow: var(--duration-slow);          /* 500ms - Page transitions, complex animations */
  --timing-dramatic: var(--duration-dramatic);  /* 1000ms - Boot sequence, celebrations */

  /* Easing functions */
  --ease-default: ease;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ========================================
   * SHADOWS (removed for flat UI, keep glow for effects)
   * ======================================== */

  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;
  --shadow-xl: none;
  --shadow-glow: 0 0 6px rgba(90, 159, 216, 0.2);
  --shadow-glow-success: 0 0 6px rgba(138, 181, 110, 0.2);
  --shadow-glow-warning: 0 0 6px rgba(212, 176, 110, 0.2);
  --shadow-glow-error: 0 0 6px rgba(207, 96, 104, 0.2);
  --shadow-glow-gold: 0 0 6px rgba(232, 196, 74, 0.2);
  --shadow-glow-purple: 0 0 6px rgba(181, 108, 200, 0.2);

  /* Subtle glow variants (6px, lower intensity) */
  --shadow-glow-sm: 0 0 6px rgba(90, 159, 216, 0.2);
  --shadow-glow-sm-gold: 0 0 6px rgba(232, 196, 74, 0.15);

  /* ========================================
   * ELEVATION SYSTEM (Phase 2 P1-6)
   * Subtle elevation with flat borders + shadows for depth
   * ======================================== */

  --elevation-base: 0 0 0 1px var(--color-border-subtle);
  --elevation-raised: 0 0 0 1px var(--color-border-subtle);
  --elevation-floating: 0 2px 8px rgba(0, 0, 0, 0.15),
                        0 0 0 1px var(--color-border-default);
  --elevation-modal: 0 4px 16px rgba(0, 0, 0, 0.2),
                     0 0 0 1px var(--color-border-default);

  /* Focus Ring (for accessibility - WCAG 2.1 AAA compliance with dual ring)
   * Canonical focus color is gold (#ffd700) to match terminal theme.
   * --focus-ring-color is the single token all focus indicators should reference. */
  --focus-ring-color: #ffd700;
  --focus-ring: 0 0 0 3px var(--focus-ring-color), 0 0 0 6px rgba(255, 215, 0, 0.25);
  --focus-ring-gold: 0 0 0 3px var(--focus-ring-color), 0 0 0 6px rgba(255, 215, 0, 0.2);
  --focus-ring-offset: 2px;

  /* ========================================
   * TRANSITIONS
   * ======================================== */

  --transition-fast: 100ms ease;
  --transition-normal: 200ms ease;
  --transition-slow: 300ms ease;
  --transition-resize: 150ms ease-out;
  --transition-bounce: 400ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --transition-panel-slide: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out-back: var(--ease-spring);

  /* ========================================
   * Z-INDEX SCALE
   *
   * Single source of truth for all z-index values.
   * Merged from _elevation.css (#2186). Keep in sync with
   * app/javascript/lib/elevation.ts.
   *
   * Usage:  .my-modal { z-index: var(--z-modal); }
   *
   * The pre-commit ratchet (z_index_literals in .ratchet.yml) blocks new
   * raw z-index numbers. Existing literals are grandfathered via the
   * baseline and the count can only decrease.
   * ======================================== */

  /* --- Layer below: behind the parent's content (requires isolation: isolate
   *     on the parent stacking context to avoid escaping). Use sparingly —
   *     intended for true background layers like the hologram viewport (#4220). */
  --z-behind: -1;

  /* --- Layer 0: Document flow — no special stacking --- */
  --z-base: 0;
  --z-raised: 1;            /* Just above siblings (card faces, image layers) */
  --z-above: 2;             /* Second layer in a local stack (badges, overlays within cards) */
  --z-float: 5;             /* Floating within a component (badges, decorative elements) */

  /* --- Layer 1: Sticky / pinned — headers, nav bars, scroll controls --- */
  --z-sticky: 10;           /* Sticky headers, focus rings, narrative entries */
  --z-sticky-above: 15;     /* Above sticky (channel panes, canvas overlays) */
  --z-docked: 20;           /* Docked elements (tab headers, loot modal layers) */
  --z-note: 30;             /* Sticky notes above narrative content */
  --z-note-active: 40;      /* Active/dragged sticky note */
  --z-scroll-anchor: 45;    /* Scroll anchor indicators */
  --z-narrative-loading: 45; /* Narrative loading bar (above panels, below modals/toasts) */
  --z-scroll-btn: 50;       /* Scroll-to-latest buttons */

  /* --- Layer 2: Panels — sidebars, side panels, the main grid layout --- */
  --z-panel: 100;
  --z-panel-active: 110;
  --z-panel-chrome: 150;    /* Panel chrome, VTT token overlays */

  /* --- Layer 3: Overlays — semi-transparent dimmers, focus traps --- */
  --z-overlay: 200;
  --z-fixed: 250;           /* Fixed-position elements (legacy, retained for compat) */

  /* --- Layer 4: Postit / sheets — float over panels, under modals --- */
  --z-sheet: 300;           /* Bottom sheets, slide-up panels */
  --z-modal-backdrop: 300;  /* Modal backdrop dimmer */
  --z-postit: 300;          /* Postit notes above panels */

  /* --- Layer 5: Modals — dialog boxes, confirmation prompts --- */
  --z-modal: 400;
  --z-modal-overlay: 410;

  /* --- Layer 6: Toasts / tooltips --- */
  --z-toast: 500;
  --z-tooltip: 500;         /* Tooltips (same layer as toasts) */

  /* --- Layer 7: Loading — full-screen loading overlays --- */
  --z-loading: 600;

  /* --- Layer 8: Popover / floating UI — dropdowns, floating panels --- */
  --z-dropdown: 900;           /* Token spawner dropdowns */
  --z-popover: 999;            /* Popovers below floating panels */
  --z-floating: 1000;          /* Floating panels, tooltips, modals */
  --z-floating-above: 1001;    /* Controls above floating panels */
  --z-floating-controls: 1010; /* Floating panel resize handles */
  --z-notification: 1100;      /* DM control notifications, form overlays */
  --z-warning: 1200;           /* DM warnings, toast overlays */

  /* --- Layer 9: Dev tools / debug / full-screen effects --- */
  --z-devtools: 9000;
  --z-fx: 9990;                /* CRT / cyberpunk visual effects */
  --z-fx-glass: 9995;          /* Glass fracture overlay */
  --z-curtain: 9997;           /* Curtain behind top-level UI (dice backdrop) */
  --z-ceiling: 9999;           /* Top-level overlays (panel palette, death saves) */
  --z-sky: 10000;              /* Above everything (boot sequence, command palette) */
  --z-sky-above: 10001;        /* Controls on top of sky-level overlays */
  --z-boot: 10000;             /* Boot sequence (alias for --z-sky) */

  /* --- Layer 10: Combat / roll overlays — absolute topmost --- */
  --z-combat-overlay: 99998;   /* Combat target picker backdrop */
  --z-combat-top: 99999;       /* Roll overlays, combat target picker */
  --z-skip-link: 99999;        /* Skip links — must be above everything when focused */

}
/**
 * Terminal D&D Design Tokens — Components & Media
 * ================================================
 * Layout split system, narrative components, theming, chips,
 * scrollbars, animations, skeleton loading, SVG icons,
 * dark mode overrides, and reduced motion preferences.
 */

:root {
  /* ========================================
   * LAYOUT - SPLIT SYSTEM
   * ======================================== */

  /* Split Container */
  --split-divider-size: 8px;
  --split-divider-hover-color: var(--color-accent-primary);
  --panel-min-width: 200px;
  --panel-min-height: 150px;

  /* Responsive Breakpoints (documentation anchors — CSS can't use vars in @media)
   * Authoritative values live in app/javascript/lib/breakpoints.js
   * Keep these in sync when changing breakpoint thresholds. */
  --bp-mobile: 768px;   /* 0–767 = mobile (1 col) */
  --bp-tablet: 1024px;  /* 768–1023 = tablet (8 cols) */
  --bp-desktop: 1440px; /* 1024–1439 = desktop (12 cols), 1440+ = wide (12 cols) */

  /* Grid Container */
  --grid-columns: 12;
  --grid-gap: 4px;
  --grid-resize-handle-size: 16px;

  /* Status Bar */
  --status-bar-height: 38px;
  --status-bar-padding: var(--space-1-5) var(--space-4);

  /* DM Responding Bar — compact height used to displace narrative header rows
   * so channel-tabs and narrative-filters are never occluded when bar is active.
   * Formula: host-padding(8) + bar-pad-top(12) + icon-row(24) + bar-pad-bottom(12) = 56px.
   * See _loading.css §"DM Bar Displacement" and organisms/narrative/_layout.css. */
  --dm-bar-compact-height: 56px;

  /* Side Panel */
  --panel-width-default: 380px;
  --panel-width-min: 280px;
  --panel-width-max: 600px;

  /* Input Area */
  --input-height: 40px;
  --input-padding: var(--space-2) var(--space-3);
  /* Total visual height of the input-area chrome: top-pad(8) + input-line(40) + bottom-pad(8).
   * Used to anchor dm-responding-bar-host above the input row (#5076). */
  --input-area-height: 56px;

  /* ========================================
   * COMPONENTS - NARRATIVE (tightened for flat UI)
   * ======================================== */

  /* Phase 2 (Rick Rubin): Generous spacing for readability and calm */
  --narrative-entry-spacing: var(--space-6);  /* 16px → 24px: Breathing room between entries */
  --narrative-border-width: 0;
  --narrative-padding: var(--space-5);        /* 12px → 20px: More padding around narrative */

  /* Phase 1: Semantic spacing tokens for consistent application */
  --panel-padding: var(--space-4);           /* 16px: Standard panel internal padding */
  --section-spacing: var(--space-8);         /* 32px: Between major sections */

  /* Entry Type Colors */
  --color-entry-dm: var(--color-accent-purple);
  --color-entry-player: var(--color-accent-primary);
  --color-entry-system: var(--color-accent-warning);
  --color-entry-error: var(--color-accent-error);
  --color-entry-roll: var(--color-accent-primary);
  --color-entry-combat: var(--color-accent-error);
  --color-entry-npc: var(--color-accent-purple);
  --color-entry-item: var(--color-accent-warning);
  --color-entry-location: var(--color-accent-secondary);

  /* ========================================
   * CONTEXT-AWARE THEMING (Phase 4 P2-14)
   * Theme shifts based on game context
   * ======================================== */

  /* Default context colors (overridden by data-context attributes) */
  --context-accent: var(--color-accent-primary);
  --context-glow: var(--shadow-glow);
  --context-border: var(--color-border-default);

  /* ========================================
   * COMPONENTS - CHIPS & BADGES
   * ======================================== */

  --chip-height: 28px;
  --chip-padding: var(--space-1) var(--space-3);
  --chip-gap: var(--space-2);
  --chip-border-radius: var(--radius-md);

  --badge-height: 20px;
  --badge-padding: var(--space-1) var(--space-2);
  --badge-font-size: var(--font-size-xs);

  /* ========================================
   * COMPONENTS - TRAYS
   * ======================================== */

  --tray-padding: var(--space-3);
  --tray-gap: var(--space-2);
  --tray-border-radius: var(--radius-lg);

  /* ========================================
   * CANVAS EFFECTS
   * ======================================== */

  --effect-ambient-opacity: 0.3;
  --effect-feedback-opacity: 0.8;
  --effect-particle-count: 100;

  /* ========================================
   * SCROLLBAR
   * ======================================== */

  --scrollbar-width: 8px;
  --scrollbar-width-thin: 6px;
  --scrollbar-track-color: var(--color-bg-primary);
  --scrollbar-thumb-color: var(--color-bg-tertiary);
  --scrollbar-thumb-hover-color: var(--color-bg-elevated);
  --scrollbar-thumb-radius: 4px;

  /* ========================================
   * MICRO-INTERACTIONS
   * ======================================== */

  --interaction-scale-hover: 1.01;
  --interaction-scale-active: 0.99;
  --interaction-glow-focus: 0 0 0 2px rgba(90, 159, 216, 0.25);
  --interaction-glow-success: 0 0 0 2px rgba(138, 181, 110, 0.25);
  --interaction-glow-error: 0 0 0 2px rgba(207, 96, 104, 0.25);

  /* ========================================
   * SKELETON LOADING
   * ======================================== */

  --skeleton-base-color: var(--color-bg-tertiary);
  --skeleton-shine-color: var(--color-bg-elevated);
  --skeleton-animation-duration: 1.5s;

  /* ========================================
   * GHOST/TRANSPARENT PANEL SYSTEM
   * Variable opacity with hover substantiation
   * ======================================== */

  /* Ghost opacity levels (ethereal → phantom) */
  --ghost-opacity-ethereal: 0.15;   /* Most transparent - barely visible */
  --ghost-opacity-wisp: 0.35;       /* Slightly visible */
  --ghost-opacity-shade: 0.55;      /* Default - balanced visibility */
  --ghost-opacity-phantom: 0.75;    /* Nearly solid */

  /* Numbered aliases for 4-level cycle (Phase 1 ghost toggle) */
  --ghost-opacity-0: 1.0;           /* Level 0: fully opaque (off) */
  --ghost-opacity-1: 0.7;           /* Level 1: light ghost */
  --ghost-opacity-2: 0.4;           /* Level 2: medium ghost */
  --ghost-opacity-3: 0.15;          /* Level 3: heavy ghost */

  /* Hover substantiation boost */
  --ghost-hover-opacity-boost: 0.4;

  /* Ghost visual effects */
  --ghost-blur-subtle: 4px;
  --ghost-blur-strong: 8px;
  --ghost-transition: 250ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Ghost text shadow for readability */
  --ghost-text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);

  /* ========================================
   * SVG ICON MASKS (for CSS pseudo-element icons)
   * Use with: mask-image: var(--icon-NAME);
   * ======================================== */

  /* Status/Feedback Icons */
  --icon-check: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='20,6 9,17 4,12'/%3E%3C/svg%3E");
  --icon-x: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E");
  --icon-alert-triangle: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z'/%3E%3Cline x1='12' y1='9' x2='12' y2='13'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E");
  --icon-info: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='16' x2='12' y2='12'/%3E%3Cline x1='12' y1='8' x2='12.01' y2='8'/%3E%3C/svg%3E");

  /* D&D/Game Icons */
  --icon-dice: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='2' y='2' width='20' height='20' rx='2'/%3E%3Ccircle cx='8' cy='8' r='1.5' fill='currentColor'/%3E%3Ccircle cx='16' cy='8' r='1.5' fill='currentColor'/%3E%3Ccircle cx='8' cy='16' r='1.5' fill='currentColor'/%3E%3Ccircle cx='16' cy='16' r='1.5' fill='currentColor'/%3E%3Ccircle cx='12' cy='12' r='1.5' fill='currentColor'/%3E%3C/svg%3E");
  --icon-sword: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.5 17.5L3 6V3h3l11.5 11.5'/%3E%3Cpath d='M13 19l6-6'/%3E%3Cpath d='M16 16l4 4'/%3E%3Cpath d='M19 21l2-2'/%3E%3C/svg%3E");
  --icon-shield: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3C/svg%3E");
  --icon-crown: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 4l3 12h14l3-12-6 7-4-7-4 7-6-7z'/%3E%3Cpath d='M3 20h18'/%3E%3C/svg%3E");

  /* Navigation Icons */
  --icon-chevron-right: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='9,18 15,12 9,6'/%3E%3C/svg%3E");
  --icon-chevron-down: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='6,9 12,15 18,9'/%3E%3C/svg%3E");
  --icon-arrow-right: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12,5 19,12 12,19'/%3E%3C/svg%3E");
  --icon-arrow-left: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='19' y1='12' x2='5' y2='12'/%3E%3Cpolyline points='12,19 5,12 12,5'/%3E%3C/svg%3E");
  --icon-play: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='currentColor' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='5,3 19,12 5,21 5,3'/%3E%3C/svg%3E");
  --icon-zap: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='13,2 3,14 12,14 11,22 21,10 12,10 13,2'/%3E%3C/svg%3E");

  /* UI Icons */
  --icon-eye: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
  --icon-timer: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='13' r='8'/%3E%3Cpath d='M12 9v4l2 2'/%3E%3Cpath d='M5 3l2 2'/%3E%3Cpath d='M19 3l-2 2'/%3E%3Cpath d='M12 5V3'/%3E%3Cpath d='M10 2h4'/%3E%3C/svg%3E");
  --icon-map-pin: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
  --icon-trophy: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 9H4.5a2.5 2.5 0 010-5H6'/%3E%3Cpath d='M18 9h1.5a2.5 2.5 0 000-5H18'/%3E%3Cpath d='M4 22h16'/%3E%3Cpath d='M10 14.66V17c0 .55-.47.98-.97 1.21C7.85 18.75 7 20.24 7 22'/%3E%3Cpath d='M14 14.66V17c0 .55.47.98.97 1.21C16.15 18.75 17 20.24 17 22'/%3E%3Cpath d='M18 2H6v7a6 6 0 0012 0V2z'/%3E%3C/svg%3E");
  --icon-sparkles: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 3l1.5 4.5L18 9l-4.5 1.5L12 15l-1.5-4.5L6 9l4.5-1.5L12 3z'/%3E%3Cpath d='M5 19l.5 1.5L7 21l-1.5.5L5 23l-.5-1.5L3 21l1.5-.5L5 19z'/%3E%3Cpath d='M19 5l.5 1.5L21 7l-1.5.5L19 9l-.5-1.5L17 7l1.5-.5L19 5z'/%3E%3C/svg%3E");
  --icon-lightbulb: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 18h6'/%3E%3Cpath d='M10 22h4'/%3E%3Cpath d='M12 2a7 7 0 017 7c0 2.38-1.19 4.47-3 5.74V17a1 1 0 01-1 1H9a1 1 0 01-1-1v-2.26C6.19 13.47 5 11.38 5 9a7 7 0 017-7z'/%3E%3C/svg%3E");

  /* Dot/Bullet icon */
  --icon-dot: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='currentColor' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3C/svg%3E");

  /* Dice icon (d20) */
  --icon-dice: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2L2 7l10 5 10-5-10-5z'/%3E%3Cpath d='M2 17l10 5 10-5'/%3E%3Cpath d='M2 12l10 5 10-5'/%3E%3C/svg%3E");

  /* Additional SVG icons for CSS pseudo-element replacement */
  --icon-globe: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='2' y1='12' x2='22' y2='12'/%3E%3Cpath d='M12 2a15.3 15.3 0 014 10 15.3 15.3 0 01-4 10 15.3 15.3 0 01-4-10 15.3 15.3 0 014-10z'/%3E%3C/svg%3E");
  --icon-user: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3Cpath d='M5.5 21a8.38 8.38 0 0113 0'/%3E%3C/svg%3E");
  --icon-users: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M23 21v-2a4 4 0 00-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 010 7.75'/%3E%3C/svg%3E");
  --icon-chat: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z'/%3E%3C/svg%3E");
  --icon-clipboard: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16 4h2a2 2 0 012 2v14a2 2 0 01-2 2H6a2 2 0 01-2-2V6a2 2 0 012-2h2'/%3E%3Crect x='8' y='2' width='8' height='4' rx='1' ry='1'/%3E%3C/svg%3E");
  --icon-scroll: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 21h12a2 2 0 002-2v-2H10v2a2 2 0 11-4 0V5a2 2 0 10-4 0v2h12a2 2 0 012 2v10'/%3E%3C/svg%3E");
  --icon-eye: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
  --icon-search: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
  --icon-lock: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='3' y='11' width='18' height='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0110 0v4'/%3E%3C/svg%3E");
  --icon-gem: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 3h12l4 6-10 13L2 9z'/%3E%3Cpath d='M2 9h20'/%3E%3Cpath d='M12 22L6 9l3-6'/%3E%3Cpath d='M12 22l6-13-3-6'/%3E%3C/svg%3E");
  --icon-swords: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.5 17.5L3 6V3h3l11.5 11.5M13 19l6-6M16 16l4 4M19 21l2-2M9.5 17.5L21 6V3h-3L6.5 14.5M11 19l-6-6M8 16l-4 4M5 21l-2-2'/%3E%3C/svg%3E");
  --icon-gear: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 010 2.83 2 2 0 01-2.83 0l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-4 0v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83-2.83l.06-.06A1.65 1.65 0 004.68 15a1.65 1.65 0 00-1.51-1H3a2 2 0 010-4h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 012.83-2.83l.06.06A1.65 1.65 0 009 4.68a1.65 1.65 0 001-1.51V3a2 2 0 014 0v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 2.83l-.06.06A1.65 1.65 0 0019.4 9a1.65 1.65 0 001.51 1H21a2 2 0 010 4h-.09a1.65 1.65 0 00-1.51 1z'/%3E%3C/svg%3E");
  --icon-heart: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z'/%3E%3C/svg%3E");
  --icon-warning: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z'/%3E%3Cline x1='12' y1='9' x2='12' y2='13'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E");
  --icon-leaf: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 20A7 7 0 019.8 6.9C15.5 4.9 17 3.5 20 2c0 3-1.5 6-3 8 1 1 2 3 2 5a7 7 0 01-7 7z'/%3E%3Cpath d='M5 20c2-2 5-3.5 8-4'/%3E%3C/svg%3E");
  --icon-cloud: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18 10h-1.26A8 8 0 109 20h9a5 5 0 000-10z'/%3E%3C/svg%3E");
  --icon-musical-note: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 18V5l12-2v13'/%3E%3Ccircle cx='6' cy='18' r='3'/%3E%3Ccircle cx='18' cy='16' r='3'/%3E%3C/svg%3E");
  --icon-books: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 19.5A2.5 2.5 0 016.5 17H20'/%3E%3Cpath d='M6.5 2H20v20H6.5A2.5 2.5 0 014 19.5v-15A2.5 2.5 0 016.5 2z'/%3E%3Cline x1='8' y1='6' x2='16' y2='6'/%3E%3Cline x1='8' y1='10' x2='14' y2='10'/%3E%3C/svg%3E");
}

/* ========================================
 * DARK MODE OVERRIDES (if ever needed)
 * ======================================== */

@media (prefers-color-scheme: dark) {
  :root {
    /* Already dark by default */
  }
}

/* ========================================
 * REDUCED MOTION
 * ======================================== */

@media (prefers-reduced-motion: reduce) {
  :root {
    --animation-speed-multiplier: 0;
    --transition-fast: 0ms;
    --transition-normal: 0ms;
    --transition-slow: 0ms;
    --transition-resize: 0ms;
    --transition-bounce: 0ms;
    --ease-out-back: ease;
    --effect-ambient-opacity: 0;
    --effect-particle-count: 0;
  }

  /* Covered by accessibility.css @media (prefers-reduced-motion: reduce) * rule */
}
/**
 * Terminal D&D Design Tokens — Import Hub
 * ==========================================
 * Single source of truth for all design variables.
 * Import this file first in any terminal-related stylesheet.
 *
 * Decomposed into focused files under tokens/ for maintainability.



 */