@import url('https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,100..900;1,100..900&display=swap');

/**
 * Mythril Design System - CSS Tokens
 *
 * This file provides:
 * 1. CSS custom properties (design tokens) for colors, typography, spacing
 * 2. Base styles and accessibility utilities
 * 3. Animation keyframes for Radix components
 *
 * =============================================================================
 * ACCESSIBILITY REQUIREMENTS (WCAG 2.1 AA)
 * =============================================================================
 *
 * All text MUST meet minimum contrast ratios:
 * - Normal text (< 18px or < 14px bold): 4.5:1 minimum
 * - Large text (>= 18px or >= 14px bold): 3:1 minimum
 * - UI components and graphics: 3:1 minimum
 *
 * TEXT COLOR GUIDELINES:
 *
 * Dark Mode (stone-950 background #14131a):
 * | Use Case          | Token                    | Color      | Ratio  |
 * |-------------------|--------------------------|------------|--------|
 * | Primary text      | --myth-text-primary      | stone-50   | ~15:1  |
 * | Secondary text    | --myth-text-secondary    | stone-200  | ~10:1  |
 * | Muted text        | --myth-text-muted        | stone-400  | ~5.5:1 |
 * | Subtle/decorative | --myth-text-subtle       | stone-500  | ~3.5:1 |
 * | Disabled text     | stone-600                | #504c58    | ~2.5:1 | (intentionally low)
 *
 * Light Mode (stone-50 background #fdfcfd):
 * | Use Case          | Token                    | Color      | Ratio  |
 * |-------------------|--------------------------|------------|--------|
 * | Primary text      | --myth-text-primary      | stone-950  | ~15:1  |
 * | Secondary text    | --myth-text-secondary    | stone-900  | ~10:1  |
 * | Muted text        | --myth-text-muted        | stone-800  | ~7:1   |
 * | Subtle/decorative | --myth-text-subtle       | stone-700  | ~5:1   |
 * | Disabled text     | stone-400                | #dcd9e2    | ~2:1   | (intentionally low)
 *
 * UI Element Colors (icons, nav links, interactive controls):
 * | Use Case          | Token                    | Dark       | Light    | Ratio  |
 * |-------------------|--------------------------|------------|----------|--------|
 * | Active/hover      | --myth-ui-primary        | stone-100  | stone-900| high   |
 * | Default           | --myth-ui-muted          | stone-400  | stone-700| ~5:1   |
 * | Inactive/disabled | --myth-ui-subtle         | stone-500  | stone-600| ~3.5:1 |
 *
 * IMPORTANT: In light mode, use stone-800 (#504c58) or darker for all readable text.
 * Stone-600 and lighter DO NOT meet accessibility requirements in light mode.
 *
 * When writing theme-conditional styles:
 *   CORRECT:   theme === 'dark' ? 'text-stone-400' : 'text-stone-800'
 *   INCORRECT: theme === 'dark' ? 'text-stone-400' : 'text-stone-600'  // Fails WCAG AA
 *
 * For interactive elements (chips, tags, badges):
 * - Use inline chipStyle() function which returns accessible colors per theme
 * - Light mode chip text uses 800-level colors for adequate contrast
 *
 * =============================================================================
 *
 * Color System: Editorial Palette built around Warm Mauve
 * - Neutrals: Warm Mauve (purple-tinted neutral with warm character)
 * - Primary/Accent: Plum (saturated mauve for interactive elements)
 * - Success: Sage (dusty gray-green)
 * - Warning: Ochre (dusty gold/mustard)
 * - Error: Clay (dusty terracotta)
 * - Data Viz: Dusk, Teal, Bronze, Rose, Moss
 *
 * Shade Strategy:
 * - Dark mode: 600 for primary, accent, and data viz
 * - Light mode: 500 for primary/accent, 700 for data viz
 *
 * Usage:
 * - Import in your project: import '@mythril/ui/styles.css'
 * - Or link directly for static HTML projects
 * - For React projects, prefer importing the component library
 */

/* ===================================
   LOGO

   The Mythril logo is ◈ (U+25C8, WHITE DIAMOND CONTAINING SMALL BLACK DIAMOND).

   Usage:
   - Header: "◈ Mythril" (logo + space + wordmark)
   - Favicon: SVG with ◈ character
   - Standalone: ◈ can be used alone as an icon

   Favicon implementation:
   <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>◈</text></svg>">
   =================================== */


/* ===================================
   ICONS

   Mythril uses Phosphor Icons (https://phosphoricons.com)
   A flexible icon family with 6 weights and consistent design.

   Installation:

   Static HTML (web components):
   <script type="module" src="https://unpkg.com/@phosphor-icons/webcomponents@2.1"></script>

   React/Vite:
   npm install @phosphor-icons/react
   import { Sun, Moon, X } from '@phosphor-icons/react'

   Standard properties:
   - size="18" for toolbar/nav icons
   - size="20" for buttons
   - size="24" for larger UI elements
   - weight="duotone" (default) - two-tone style with depth
   - weight="bold" for emphasis
   - weight="regular" for subtle icons

   Usage (web components):
   <ph-sun size="18" weight="duotone"></ph-sun>
   <ph-moon size="18" weight="duotone"></ph-moon>
   <ph-x size="18" weight="duotone"></ph-x>

   Usage (React):
   <Sun size={18} weight="duotone" />
   <Moon size={18} weight="duotone" />
   <X size={18} weight="duotone" />

   Common icons:
   | Icon                      | Use case                    |
   |---------------------------|-----------------------------|
   | ph-sun / ph-moon          | Theme toggle                |
   | ph-x                      | Close, dismiss              |
   | ph-plus / ph-minus        | Zoom, add/remove            |
   | ph-arrow-left / right     | Navigation                  |
   | ph-arrow-counter-clockwise| Reset, undo                 |
   | ph-line-segments          | Connections, relationships  |
   | ph-question               | Help, info                  |
   | ph-caret-left / right     | Pagination, collapse        |
   | ph-list                   | Menu                        |
   | ph-magnifying-glass       | Search                      |

   Icons inherit currentColor, so they match text color automatically.
   =================================== */


/* ===================================
   CSS Custom Properties (Theme)
   =================================== */

:root {
  /* ==========================================================================
   * WARM MAUVE NEUTRALS (Stone)
   * Purple-tinted neutral with warm character
   * Use for backgrounds, borders, text
   * ========================================================================== */
  --myth-stone-50:  #fdfcfd;
  --myth-stone-100: #faf9fb;
  --myth-stone-200: #f4f2f5;
  --myth-stone-300: #edebf0;
  --myth-stone-400: #dcd9e2;
  --myth-stone-500: #c2bfca;
  --myth-stone-600: #a9a5b2;
  --myth-stone-700: #8a8694;
  --myth-stone-800: #504c58;
  --myth-stone-900: #3d3a42;
  --myth-stone-950: #1e1c22;

  /* ==========================================================================
   * PLUM - Primary / Accent
   * Slightly more saturated mauve for interactive elements and emphasis
   * ========================================================================== */
  --myth-plum-50:  #fdfcfe;
  --myth-plum-100: #faf8fc;
  --myth-plum-200: #f3eff7;
  --myth-plum-300: #ebe5f0;
  --myth-plum-400: #ddd5e6;
  --myth-plum-500: #c7bdd6;
  --myth-plum-600: #ae9fc2;
  --myth-plum-700: #9080a8;
  --myth-plum-800: #6b5a80;
  --myth-plum-900: #504462;
  --myth-plum-950: #2d2638;

  /* ==========================================================================
   * SAGE - Success
   * Dusty gray-green - sophisticated alternative to bright green
   * ========================================================================== */
  --myth-sage-50:  #fbfdfb;
  --myth-sage-100: #f6faf6;
  --myth-sage-200: #ecf3ec;
  --myth-sage-300: #e0ebe0;
  --myth-sage-400: #cfddd0;
  --myth-sage-500: #b3c7b5;
  --myth-sage-600: #96ad98;
  --myth-sage-700: #78907a;
  --myth-sage-800: #5a6d5c;
  --myth-sage-900: #445346;
  --myth-sage-950: #262e27;

  /* ==========================================================================
   * OCHRE - Warning
   * Dusty gold/mustard - earthy alternative to bright yellow
   * ========================================================================== */
  --myth-ochre-50:  #fdfcfa;
  --myth-ochre-100: #fbf8f0;
  --myth-ochre-200: #f5efdd;
  --myth-ochre-300: #ede4c8;
  --myth-ochre-400: #e2d4ad;
  --myth-ochre-500: #d1c08e;
  --myth-ochre-600: #bba56e;
  --myth-ochre-700: #9f874e;
  --myth-ochre-800: #7a6638;
  --myth-ochre-900: #5a4c2a;
  --myth-ochre-950: #332b18;

  /* ==========================================================================
   * CLAY - Error
   * Dusty terracotta - earthy alternative to bright red
   * ========================================================================== */
  --myth-clay-50:  #fdfcfb;
  --myth-clay-100: #faf6f4;
  --myth-clay-200: #f5ebe6;
  --myth-clay-300: #edddd5;
  --myth-clay-400: #e2cbc0;
  --myth-clay-500: #d1b0a2;
  --myth-clay-600: #bb9282;
  --myth-clay-700: #9f7466;
  --myth-clay-800: #7a574c;
  --myth-clay-900: #5a423a;
  --myth-clay-950: #332622;

  /* ==========================================================================
   * DUSK - Data Viz 1
   * Dusty blue-purple - harmonizes with plum
   * ========================================================================== */
  --myth-dusk-50:  #fcfcfe;
  --myth-dusk-100: #f8f9fc;
  --myth-dusk-200: #f0f1f7;
  --myth-dusk-300: #e5e7f0;
  --myth-dusk-400: #d5d8e6;
  --myth-dusk-500: #bcc0d4;
  --myth-dusk-600: #9fa5be;
  --myth-dusk-700: #8086a4;
  --myth-dusk-800: #5e6380;
  --myth-dusk-900: #474b62;
  --myth-dusk-950: #292c3a;

  /* ==========================================================================
   * TEAL - Data Viz 2
   * Dusty cyan-green
   * ========================================================================== */
  --myth-teal-50:  #fbfdfd;
  --myth-teal-100: #f5fafa;
  --myth-teal-200: #e9f3f2;
  --myth-teal-300: #daeae8;
  --myth-teal-400: #c6dcda;
  --myth-teal-500: #a9c7c4;
  --myth-teal-600: #8aadaa;
  --myth-teal-700: #6b908c;
  --myth-teal-800: #516d6a;
  --myth-teal-900: #3d5250;
  --myth-teal-950: #252f2e;

  /* ==========================================================================
   * BRONZE - Data Viz 3
   * Warm brown - naturally harmonious with mauve
   * ========================================================================== */
  --myth-bronze-50:  #fdfcfb;
  --myth-bronze-100: #faf7f5;
  --myth-bronze-200: #f4edea;
  --myth-bronze-300: #ebe2dc;
  --myth-bronze-400: #dfd2ca;
  --myth-bronze-500: #ccbcb0;
  --myth-bronze-600: #b5a090;
  --myth-bronze-700: #988272;
  --myth-bronze-800: #746256;
  --myth-bronze-900: #574a42;
  --myth-bronze-950: #322a26;

  /* ==========================================================================
   * ROSE - Data Viz 4
   * Dusty pink - shares mauve's warmth
   * ========================================================================== */
  --myth-rose-50:  #fdfcfc;
  --myth-rose-100: #fbf7f8;
  --myth-rose-200: #f6edee;
  --myth-rose-300: #efe2e4;
  --myth-rose-400: #e4d2d6;
  --myth-rose-500: #d4bac0;
  --myth-rose-600: #c09fa7;
  --myth-rose-700: #a6828c;
  --myth-rose-800: #7e616a;
  --myth-rose-900: #5e4950;
  --myth-rose-950: #362c30;

  /* ==========================================================================
   * MOSS - Data Viz 5
   * Olive/yellow-green - earthy complement
   * ========================================================================== */
  --myth-moss-50:  #fcfdfb;
  --myth-moss-100: #f8faf5;
  --myth-moss-200: #f0f3ea;
  --myth-moss-300: #e6ebdc;
  --myth-moss-400: #d6dfca;
  --myth-moss-500: #bcc9ae;
  --myth-moss-600: #9fae90;
  --myth-moss-700: #809072;
  --myth-moss-800: #616d56;
  --myth-moss-900: #495242;
  --myth-moss-950: #2a2f26;

  /* ==========================================================================
   * ALPHA OVERLAYS
   * Use for shadows, layered surfaces, hover states, backdrops
   * These blend with any base color for cohesive depth
   * ========================================================================== */

  /* Black alpha - shadows, overlays on light surfaces */
  --myth-black-a1:  rgba(0, 0, 0, 0.01);
  --myth-black-a2:  rgba(0, 0, 0, 0.02);
  --myth-black-a3:  rgba(0, 0, 0, 0.04);
  --myth-black-a4:  rgba(0, 0, 0, 0.06);
  --myth-black-a5:  rgba(0, 0, 0, 0.09);
  --myth-black-a6:  rgba(0, 0, 0, 0.12);
  --myth-black-a7:  rgba(0, 0, 0, 0.18);
  --myth-black-a8:  rgba(0, 0, 0, 0.27);
  --myth-black-a9:  rgba(0, 0, 0, 0.45);
  --myth-black-a10: rgba(0, 0, 0, 0.56);
  --myth-black-a11: rgba(0, 0, 0, 0.70);
  --myth-black-a12: rgba(0, 0, 0, 0.90);

  /* White alpha - highlights, overlays on dark surfaces */
  --myth-white-a1:  rgba(255, 255, 255, 0.01);
  --myth-white-a2:  rgba(255, 255, 255, 0.02);
  --myth-white-a3:  rgba(255, 255, 255, 0.04);
  --myth-white-a4:  rgba(255, 255, 255, 0.06);
  --myth-white-a5:  rgba(255, 255, 255, 0.09);
  --myth-white-a6:  rgba(255, 255, 255, 0.12);
  --myth-white-a7:  rgba(255, 255, 255, 0.18);
  --myth-white-a8:  rgba(255, 255, 255, 0.27);
  --myth-white-a9:  rgba(255, 255, 255, 0.45);
  --myth-white-a10: rgba(255, 255, 255, 0.56);
  --myth-white-a11: rgba(255, 255, 255, 0.70);
  --myth-white-a12: rgba(255, 255, 255, 0.90);

  /* --------------------------------------------------------------------------
   * HOVER BACKGROUNDS
   * Transparent buttons need theme-aware hover backgrounds:
   *   Dark mode:  background: var(--myth-white-a5)  (white overlay)
   *   Light mode: background: var(--myth-black-a5)  (black overlay)
   *
   * For opaque surfaces (panels, cards), use panel-*-hover tokens instead.
   * -------------------------------------------------------------------------- */

  /* --------------------------------------------------------------------------
   * RELATIVE CONTRAST (Dark vs Light Mode)
   *
   * The stone scale is REDEFINED in dark mode — stone-400 dark != stone-400 light.
   * Even raw --myth-stone-* values don't produce matching contrast across themes.
   * Always use semantic tokens for text and UI colors:
   *
   * TEXT:
   *   --myth-text-primary    stone-100 / stone-950  (~15:1 both)
   *   --myth-text-secondary  stone-200 / stone-900  (~10:1 both)
   *   --myth-text-muted      stone-300 / stone-800  (~7:1 both)
   *   --myth-text-subtle     stone-400 / stone-700  (~5:1 both)
   *
   * UI (icons, nav links):
   *   --myth-ui-primary      stone-100 / stone-900  (high contrast)
   *   --myth-ui-muted        stone-400 / stone-700  (~5:1 both)
   *   --myth-ui-subtle       stone-500 / stone-600  (~3.5:1 both)
   *
   * SURFACES — three systems, pick the right one:
   *   --myth-bg-*       Opaque page regions (body, sections, content cards)
   *   --myth-panel-*    Translucent floating elements (tooltips, popovers, sticky headers)
   *   --myth-surface-*  Alpha overlays for states/nesting (hover, selected, raised)
   *
   * BORDERS — use alpha-based tokens:
   *   --myth-border-subtle   Very faint (dividers, passive borders)
   *   --myth-border-muted    Medium (panel/card/tooltip borders)
   *   --myth-border-strong   Pronounced (hover/selected emphasis)
   *
   * LEGACY (do not use in new code):
   *   --myth-bg-primary, --myth-bg-secondary, --myth-bg-tertiary
   *   --myth-border-primary, --myth-border-secondary
   *   These are aliases kept for backward compatibility only.
   *
   * DON'T use var(--myth-stone-*) for text/UI colors.
   * DON'T use Tailwind color classes without [data-theme="light"] overrides.
   * DO use semantic tokens that auto-adapt to both themes.
   * -------------------------------------------------------------------------- */

  /* ==========================================================================
   * SEMANTIC COLOR MAPPINGS (Light Mode)
   * Light mode: 500 for primary/accent, 700 for data viz
   * ========================================================================== */
  --myth-color-primary: var(--myth-plum-500);
  --myth-color-accent: var(--myth-plum-500);
  --myth-color-success: var(--myth-sage-500);
  --myth-color-warning: var(--myth-ochre-500);
  --myth-color-error: var(--myth-clay-500);
  --myth-color-info: var(--myth-dusk-500);

  /* Interactive states */
  --myth-accent: var(--myth-plum-500);
  --myth-accent-hover: var(--myth-plum-600);
  --myth-accent-text: var(--myth-plum-800);

  /* Semantic state backgrounds and text */
  --myth-success-bg: var(--myth-sage-100);
  --myth-success-text: var(--myth-sage-900);
  --myth-warning-bg: var(--myth-ochre-100);
  --myth-warning-text: var(--myth-ochre-900);
  --myth-error-bg: var(--myth-clay-100);
  --myth-error-text: var(--myth-clay-900);

  /* Data Viz Palette — vivid saturated tones (shared across both themes) */
  --myth-data-1: #9aa2d4;  /* dusk — bright slate-blue */
  --myth-data-2: #48a8a0;  /* teal — vivid teal */
  --myth-data-3: #bb8c58;  /* bronze — warm gold */
  --myth-data-4: #d4788a;  /* rose — bright rose */
  --myth-data-5: #72a858;  /* moss — vivid green */
  --myth-data-6: #be90d8;  /* plum — vivid purple */
  --myth-data-7: #cc7a58;  /* clay — vivid terracotta */

  /* Legacy viz palette aliases */
  --myth-viz-1: var(--myth-data-1);
  --myth-viz-2: var(--myth-data-2);
  --myth-viz-3: var(--myth-data-3);
  --myth-viz-4: var(--myth-data-4);
  --myth-viz-5: var(--myth-data-5);
  --myth-viz-6: var(--myth-data-6);
  --myth-viz-7: var(--myth-data-7);

  /* Named viz palette — vivid saturated tones (same as dark mode) */
  --myth-viz-amber:      #bb8c58;  /* ochre hue, vivid */
  --myth-viz-terracotta: #cc7a58;  /* clay hue, vivid */
  --myth-viz-coral:      #d4788a;  /* rose hue, vivid */
  --myth-viz-slate:      #9aa2d4;  /* dusk hue, vivid */
  --myth-viz-teal:       #48a8a0;  /* teal hue, vivid */
  --myth-viz-sage:       #72a858;  /* sage hue, vivid */
  --myth-viz-mauve:      #be90d8;  /* plum hue, vivid */
  --myth-viz-steel:      #8a9ad0;  /* dusk hue, steel variant */
  --myth-viz-sand:       #bb8c58;  /* bronze hue, vivid */
  --myth-viz-plum:       #be90d8;  /* plum hue, vivid */
  --myth-viz-moss:       #72a858;  /* moss hue, vivid */
  --myth-viz-sky:        #48a8a0;  /* teal hue, sky variant */

  /* ==========================================================================
   * LAYERED SURFACES (Light Mode)
   * Base + alpha overlays for cohesive depth
   * ========================================================================== */
  --myth-bg-base: var(--myth-stone-50);
  --myth-bg-subtle: var(--myth-stone-100);
  --myth-bg-muted: var(--myth-stone-200);

  /* Interactive surface states (layer on top of bg) */
  --myth-surface-hover: var(--myth-black-a2);
  --myth-surface-active: var(--myth-black-a3);
  --myth-surface-selected: var(--myth-black-a4);

  /* ==========================================================================
   * SURFACE ELEVATION SYSTEM (Light Mode)
   * Two approaches depending on context:
   * 1. Alpha overlays - for layered UI that stacks (menus, nested panels)
   * 2. Semi-opaque + blur - for floating elements over content (cards, popovers)
   * ========================================================================== */

  /* Level 0: Solid page background */
  --myth-surface-canvas: var(--myth-stone-50);

  /* Alpha overlay surfaces - layer on parent, don't obscure */
  --myth-surface-raised: var(--myth-black-a2);       /* Level 1: subtle layering */
  --myth-surface-overlay: var(--myth-black-a4);      /* Level 2: stronger layering */

  /* ==========================================================================
   * FLOATING SURFACE SYSTEM (Light Mode)
   * Semi-opaque backgrounds + blur + shadow for floating UI elements.
   * Each level includes: panel, blur, shadow, and border tokens.
   *
   * LEVEL 1 — Cards, panels, toolbar buttons, nodes
   *   background: var(--myth-panel-1)
   *   backdrop-filter: blur(var(--myth-blur-1))
   *   box-shadow: var(--myth-shadow-1)
   *   border: 1px solid var(--myth-border-primary)
   *   Hover: panel-1-hover, shadow-1-hover, border-secondary
   *
   * LEVEL 2 — Tooltips, popovers, dropdowns
   *   background: var(--myth-panel-2)
   *   backdrop-filter: blur(var(--myth-blur-2))
   *   box-shadow: var(--myth-shadow-2)
   *   border: 1px solid var(--myth-border-primary)
   *   Hover: panel-2-hover, shadow-2-hover
   *
   * LEVEL 3 — Modals, dialogs, galleries
   *   background: var(--myth-panel-3)
   *   backdrop-filter: blur(var(--myth-blur-3))
   *   box-shadow: var(--myth-shadow-3)
   *   border: 1px solid var(--myth-border-primary)
   *   Overlay backdrop: var(--myth-backdrop)
   * ========================================================================== */

  /* Panel backgrounds */
  --myth-panel-1: rgba(255, 255, 255, 0.92);
  --myth-panel-1-hover: rgba(255, 255, 255, 0.97);
  --myth-panel-2: rgba(255, 255, 255, 0.95);
  --myth-panel-2-hover: rgba(255, 255, 255, 1);
  --myth-panel-3: rgba(255, 255, 255, 0.97);

  /* Blur scale */
  --myth-blur-1: 12px;
  --myth-blur-2: 16px;
  --myth-blur-3: 24px;

  /* Shadow scale */
  --myth-shadow-1: 0 1px 3px var(--myth-black-a3), 0 2px 8px var(--myth-black-a2);
  --myth-shadow-1-hover: 0 2px 6px var(--myth-black-a4), 0 4px 12px var(--myth-black-a3);
  --myth-shadow-2: 0 2px 4px var(--myth-black-a4), 0 4px 12px var(--myth-black-a3);
  --myth-shadow-2-hover: 0 4px 8px var(--myth-black-a5), 0 8px 20px var(--myth-black-a4);
  --myth-shadow-3: 0 4px 8px var(--myth-black-a4), 0 8px 24px var(--myth-black-a3), 0 16px 48px var(--myth-black-a2);

  /* Modal/dialog backdrop overlay */
  --myth-backdrop: var(--myth-black-a8);

  /* Legacy shadow aliases */
  --myth-shadow-sm: var(--myth-shadow-1);
  --myth-shadow-md: var(--myth-shadow-2);
  --myth-shadow-lg: var(--myth-shadow-3);
  --myth-shadow-xl: 0 8px 16px var(--myth-black-a5), 0 16px 32px var(--myth-black-a4), 0 32px 64px var(--myth-black-a3);

  /* ==========================================================================
   * INLINE SURFACE SYSTEM (Light Mode)
   * Alpha-blend overlays for nested/inline UI that layers on parent.
   * Use for buttons, chips, badges within panels.
   * ========================================================================== */
  --myth-surface-button: var(--myth-black-a3);
  --myth-surface-button-hover: var(--myth-black-a5);
  --myth-surface-button-raised: var(--myth-black-a4);
  --myth-surface-button-raised-hover: var(--myth-black-a6);
  --myth-surface-border: var(--myth-black-a6);
  --myth-surface-border-hover: var(--myth-black-a8);

  /* Borders */
  --myth-border-subtle: var(--myth-black-a3);
  --myth-border-muted: var(--myth-black-a5);
  --myth-border-strong: var(--myth-black-a8);

  /* LEGACY — do not use in new code. Use --myth-bg-base/subtle/muted and --myth-border-subtle/muted/strong instead. */
  --myth-bg-primary: var(--myth-bg-base);
  --myth-bg-secondary: var(--myth-bg-subtle);
  --myth-bg-tertiary: var(--myth-bg-muted);
  --myth-bg-hover: var(--myth-stone-300);
  --myth-border-primary: var(--myth-stone-300);
  --myth-border-secondary: var(--myth-stone-400);
  --myth-text-primary: var(--myth-stone-950);   /* ~12:1 - emphasized, hover state */
  --myth-text-secondary: var(--myth-stone-900); /* ~10:1 - body text hover state */
  --myth-text-muted: var(--myth-stone-800);     /* ~7:1 - default body/title text */
  --myth-text-subtle: var(--myth-stone-700);    /* ~5:1 - secondary labels, use on bold/large text */
  --myth-focus-ring: var(--myth-plum-600);

  /* UI element colors (icons, nav links) - 3:1 contrast minimum */
  --myth-ui-primary: var(--myth-stone-900);    /* Active/hover icons */
  --myth-ui-muted: var(--myth-stone-700);      /* Default icons ~5:1 */
  --myth-ui-subtle: var(--myth-stone-600);     /* Inactive/disabled ~3.5:1 */

  /* Typography */
  --myth-font-sans: 'Public Sans', -apple-system, sans-serif;
  --myth-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* ==========================================================================
   * LEGACY ALIASES (for backward compatibility)
   * Map old Radix color names to new editorial palette
   * ========================================================================== */
  --myth-jade-500: var(--myth-sage-500);
  --myth-jade-600: var(--myth-sage-600);
  --myth-jade-700: var(--myth-sage-700);
  --myth-jade-800: var(--myth-sage-800);

  --myth-amber-400: var(--myth-ochre-400);
  --myth-amber-500: var(--myth-ochre-500);
  --myth-amber-600: var(--myth-ochre-600);
  --myth-amber-700: var(--myth-ochre-700);

  --myth-tomato-500: var(--myth-clay-500);
  --myth-tomato-600: var(--myth-clay-600);
  --myth-tomato-700: var(--myth-clay-700);
  --myth-tomato-800: var(--myth-clay-800);

  --myth-slate-500: var(--myth-dusk-500);
  --myth-slate-600: var(--myth-dusk-600);
  --myth-slate-700: var(--myth-dusk-700);
  --myth-slate-800: var(--myth-dusk-800);

  --myth-indigo-600: var(--myth-dusk-600);
  --myth-indigo-700: var(--myth-dusk-700);
  --myth-indigo-800: var(--myth-dusk-800);

  --myth-cyan-600: var(--myth-teal-600);
  --myth-cyan-700: var(--myth-teal-700);
  --myth-cyan-800: var(--myth-teal-800);

  /* Legacy semantic colors */
  --myth-red-400: var(--myth-clay-600);
  --myth-red-500: var(--myth-clay-700);
  --myth-emerald-400: var(--myth-sage-600);
  --myth-emerald-500: var(--myth-sage-700);
}

/* ==========================================================================
 * DARK MODE
 * Dark mode: 600 for primary, accent, and data viz
 * ========================================================================== */
[data-theme="dark"] {
  /* Warm Mauve Neutrals - Dark (inverted for dark backgrounds) */
  --myth-stone-50:  #fdfcfd;
  --myth-stone-100: #e8e6eb;
  --myth-stone-200: #c2bfca;
  --myth-stone-300: #a9a5b2;
  --myth-stone-400: #8a8694;
  --myth-stone-500: #6b6873;
  --myth-stone-600: #504c58;
  --myth-stone-700: #3d3a42;
  --myth-stone-800: #2a2830;
  --myth-stone-900: #1e1c22;
  --myth-stone-950: #14131a;

  /* Semantic mappings - Dark (use 600 shade) */
  --myth-color-primary: var(--myth-plum-600);
  --myth-color-accent: var(--myth-plum-600);
  --myth-color-success: var(--myth-sage-600);
  --myth-color-warning: var(--myth-ochre-600);
  --myth-color-error: var(--myth-clay-600);
  --myth-color-info: var(--myth-dusk-600);

  /* Interactive states */
  --myth-accent: var(--myth-plum-600);
  --myth-accent-hover: var(--myth-plum-500);
  --myth-accent-text: var(--myth-plum-300);

  /* Semantic state backgrounds and text */
  --myth-success-bg: var(--myth-sage-950);
  --myth-success-text: var(--myth-sage-300);
  --myth-warning-bg: var(--myth-ochre-950);
  --myth-warning-text: var(--myth-ochre-300);
  --myth-error-bg: var(--myth-clay-950);
  --myth-error-text: var(--myth-clay-300);

  /* Data Viz Palette — Dark: vivid, saturated tones that pop on dark backgrounds */
  --myth-data-1: #9aa2d4;  /* dusk — bright slate-blue */
  --myth-data-2: #48a8a0;  /* teal — vivid teal */
  --myth-data-3: #bb8c58;  /* bronze — warm gold */
  --myth-data-4: #d4788a;  /* rose — bright rose */
  --myth-data-5: #72a858;  /* moss — vivid green */
  --myth-data-6: #be90d8;  /* plum — vivid purple */
  --myth-data-7: #cc7a58;  /* clay — vivid terracotta */

  /* Legacy viz palette aliases */
  --myth-viz-1: var(--myth-data-1);
  --myth-viz-2: var(--myth-data-2);
  --myth-viz-3: var(--myth-data-3);
  --myth-viz-4: var(--myth-data-4);
  --myth-viz-5: var(--myth-data-5);
  --myth-viz-6: var(--myth-data-6);
  --myth-viz-7: var(--myth-data-7);

  /* Named viz palette — vivid versions for dark backgrounds */
  --myth-viz-amber:      #bb8c58;  /* ochre hue, vivid */
  --myth-viz-terracotta: #cc7a58;  /* clay hue, vivid */
  --myth-viz-coral:      #d4788a;  /* rose hue, vivid */
  --myth-viz-slate:      #9aa2d4;  /* dusk hue, vivid */
  --myth-viz-teal:       #48a8a0;  /* teal hue, vivid */
  --myth-viz-sage:       #72a858;  /* sage hue, vivid */
  --myth-viz-mauve:      #be90d8;  /* plum hue, vivid */
  --myth-viz-steel:      #8a9ad0;  /* dusk hue, steel variant */
  --myth-viz-sand:       #bb8c58;  /* bronze hue, vivid */
  --myth-viz-plum:       #be90d8;  /* plum hue, vivid */
  --myth-viz-moss:       #72a858;  /* moss hue, vivid */
  --myth-viz-sky:        #48a8a0;  /* teal hue, sky variant */

  /* ==========================================================================
   * LAYERED SURFACES (Dark Mode)
   * Use white alpha overlays for elevation on dark backgrounds
   * ========================================================================== */
  --myth-bg-base: var(--myth-stone-950);
  --myth-bg-subtle: var(--myth-stone-900);
  --myth-bg-muted: var(--myth-stone-800);

  /* Interactive surface states - use white for dark mode */
  --myth-surface-hover: var(--myth-white-a2);
  --myth-surface-active: var(--myth-white-a3);
  --myth-surface-selected: var(--myth-white-a4);

  /* ==========================================================================
   * SURFACE ELEVATION SYSTEM (Dark Mode)
   * Uses white alpha overlays - lighter = more elevated
   * ========================================================================== */

  /* Level 0: Solid page background */
  --myth-surface-canvas: var(--myth-stone-950);

  /* Alpha overlay surfaces - layer on parent, don't obscure */
  --myth-surface-raised: var(--myth-white-a2);       /* Level 1: subtle layering */
  --myth-surface-overlay: var(--myth-white-a4);      /* Level 2: stronger layering */

  /* ==========================================================================
   * FLOATING SURFACE SYSTEM (Dark Mode)
   * Same structure as light mode. Panels are slightly lighter than canvas.
   * ========================================================================== */

  /* Panel backgrounds */
  --myth-panel-1: rgba(38, 35, 42, 0.95);
  --myth-panel-1-hover: rgba(45, 42, 50, 0.98);
  --myth-panel-2: rgba(42, 39, 47, 0.97);
  --myth-panel-2-hover: rgba(50, 47, 55, 1);
  --myth-panel-3: rgba(45, 42, 50, 0.98);

  /* Blur scale */
  --myth-blur-1: 12px;
  --myth-blur-2: 16px;
  --myth-blur-3: 24px;

  /* Shadow scale - stronger in dark mode */
  --myth-shadow-1: 0 1px 3px var(--myth-black-a5), 0 2px 8px var(--myth-black-a4);
  --myth-shadow-1-hover: 0 2px 6px var(--myth-black-a6), 0 4px 12px var(--myth-black-a5);
  --myth-shadow-2: 0 2px 4px var(--myth-black-a6), 0 4px 12px var(--myth-black-a5);
  --myth-shadow-2-hover: 0 4px 8px var(--myth-black-a7), 0 8px 20px var(--myth-black-a6);
  --myth-shadow-3: 0 4px 8px var(--myth-black-a6), 0 8px 24px var(--myth-black-a5), 0 16px 48px var(--myth-black-a4);

  /* Modal/dialog backdrop overlay */
  --myth-backdrop: var(--myth-black-a10);

  /* Legacy shadow aliases */
  --myth-shadow-sm: var(--myth-shadow-1);
  --myth-shadow-md: var(--myth-shadow-2);
  --myth-shadow-lg: var(--myth-shadow-3);
  --myth-shadow-xl: 0 8px 16px var(--myth-black-a7), 0 16px 32px var(--myth-black-a6), 0 32px 64px var(--myth-black-a5);

  /* ==========================================================================
   * INLINE SURFACE SYSTEM (Dark Mode)
   * ========================================================================== */
  --myth-surface-button: var(--myth-white-a3);
  --myth-surface-button-hover: var(--myth-white-a5);
  --myth-surface-button-raised: var(--myth-white-a4);
  --myth-surface-button-raised-hover: var(--myth-white-a6);
  --myth-surface-border: var(--myth-white-a6);
  --myth-surface-border-hover: var(--myth-white-a8);

  /* Borders - use white alpha for subtle borders on dark */
  --myth-border-subtle: var(--myth-white-a3);
  --myth-border-muted: var(--myth-white-a5);
  --myth-border-strong: var(--myth-white-a8);

  /* LEGACY — do not use in new code. Use --myth-bg-base/subtle/muted and --myth-border-subtle/muted/strong instead. */
  --myth-bg-primary: var(--myth-bg-base);
  --myth-bg-secondary: var(--myth-bg-subtle);
  --myth-bg-tertiary: var(--myth-bg-muted);
  --myth-bg-hover: var(--myth-stone-700);
  --myth-border-primary: var(--myth-stone-800);
  --myth-border-secondary: var(--myth-stone-700);
  --myth-text-primary: var(--myth-stone-100);   /* Hover state for titles */
  --myth-text-secondary: var(--myth-stone-200);  /* Hover state for body */
  --myth-text-muted: var(--myth-stone-300);      /* Default titles/body */
  --myth-text-subtle: var(--myth-stone-400);     /* Secondary labels */
  --myth-focus-ring: var(--myth-plum-400);

  /* UI element colors (icons, nav links) */
  --myth-ui-primary: var(--myth-stone-100);
  --myth-ui-muted: var(--myth-stone-400);
  --myth-ui-subtle: var(--myth-stone-500);
}


/* ===================================
   Base Styles
   =================================== */

body {
  font-family: var(--myth-font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.myth-base {
  font-family: var(--myth-font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: var(--myth-bg-primary);
  color: var(--myth-text-primary);
}

/* Focus styles */
:focus-visible {
  outline: 2px solid var(--myth-focus-ring);
  outline-offset: 2px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}


/* ===================================
   CHIPS / TAGS

   Key principles:
   - NO border
   - NO border-radius (square/flat)
   - Subtle background (color/10)
   - Small padding: py-0.5 px-2
   =================================== */

/* Base chip */
.myth-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.5rem; /* py-0.5 px-2 */
  font-family: var(--myth-font-sans);
  font-size: 0.75rem; /* 12px — myth-data-sm scale */
  font-variant-numeric: tabular-nums;
  line-height: 1.5;
  color: var(--myth-text-muted);
  background: var(--myth-black-a4);
  /* NO border-radius */
  /* NO border */
}

/* Chip variants - semantic colors (light mode uses darker text for contrast) */
.myth-chip--default {
  color: var(--myth-stone-800);
  background: var(--myth-black-a4);
}

.myth-chip--date {
  color: var(--myth-stone-800);
  background: var(--myth-black-a4);
}

.myth-chip--vendor {
  color: var(--myth-clay-800);
  background: rgba(159, 116, 102, 0.12);
}

.myth-chip--system {
  color: var(--myth-ochre-800);
  background: rgba(159, 135, 78, 0.12);
}

.myth-chip--agency,
.myth-chip--program,
.myth-chip--law {
  color: var(--myth-stone-800);
  background: var(--myth-black-a4);
}

.myth-chip--funding {
  color: var(--myth-sage-800);
  background: rgba(120, 144, 122, 0.12);
}

.myth-chip--period {
  color: var(--myth-stone-800);
  background: var(--myth-black-a5);
  border: 1px solid var(--myth-border-subtle);
}

.myth-chip--org {
  color: var(--myth-stone-800);
  background: var(--myth-black-a4);
}

.myth-chip--location {
  color: var(--myth-stone-800);
  background: var(--myth-black-a4);
}


/* Chip container */
.myth-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* Force dark chip appearance on dark surfaces regardless of theme */
.myth-chip-dark .myth-chip,
.myth-chip-dark .myth-chip--default,
.myth-chip-dark .myth-chip--date,
.myth-chip-dark .myth-chip--agency,
.myth-chip-dark .myth-chip--program,
.myth-chip-dark .myth-chip--law,
.myth-chip-dark .myth-chip--org,
.myth-chip-dark .myth-chip--location {
  color: var(--myth-stone-300);
  background: var(--myth-white-a4);
}
.myth-chip-dark .myth-chip--system {
  color: var(--myth-ochre-500);
  background: rgba(209, 192, 142, 0.15);
}
.myth-chip-dark .myth-chip--vendor {
  color: var(--myth-clay-500);
  background: rgba(209, 176, 162, 0.15);
}
.myth-chip-dark .myth-chip--funding {
  color: var(--myth-sage-500);
  background: rgba(179, 199, 181, 0.15);
}

/* Dark mode chip overrides */
[data-theme="dark"] .myth-chip {
  background: var(--myth-white-a4);
}

[data-theme="dark"] .myth-chip--default,
[data-theme="dark"] .myth-chip--date,
[data-theme="dark"] .myth-chip--agency,
[data-theme="dark"] .myth-chip--program,
[data-theme="dark"] .myth-chip--law,
[data-theme="dark"] .myth-chip--org,
[data-theme="dark"] .myth-chip--location {
  color: var(--myth-stone-300);
  background: var(--myth-white-a4);
}

[data-theme="dark"] .myth-chip--vendor {
  color: var(--myth-clay-500);
  background: rgba(209, 176, 162, 0.15);
}

[data-theme="dark"] .myth-chip--system {
  color: var(--myth-ochre-500);
  background: rgba(209, 192, 142, 0.15);
}

[data-theme="dark"] .myth-chip--funding {
  color: var(--myth-sage-500);
  background: rgba(179, 199, 181, 0.15);
}

[data-theme="dark"] .myth-chip--period {
  color: var(--myth-stone-400);
  background: var(--myth-white-a5);
  border-color: var(--myth-border-subtle);
}


/* ===================================
   BUTTONS
   =================================== */

/* Primary button - white/light */
.myth-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem; /* py-2 px-4 */
  font-size: 0.875rem; /* text-sm */
  font-weight: 500;
  border-radius: 0.375rem; /* rounded-md */
  transition: background-color 150ms ease-out, border-color 150ms ease-out, transform 150ms ease-out;
  cursor: pointer;
  border: none;
}

.myth-btn:active {
  transform: scale(0.97);
}

.myth-btn:focus-visible {
  outline: 2px solid var(--myth-focus-ring);
  outline-offset: 2px;
}

.myth-btn--primary {
  background: var(--myth-stone-800);
  color: var(--myth-stone-50);
}

.myth-btn--primary:hover {
  background: var(--myth-stone-700);
}

[data-theme="dark"] .myth-btn--primary {
  background: var(--myth-stone-200);
  color: var(--myth-stone-950);
}

[data-theme="dark"] .myth-btn--primary:hover {
  background: var(--myth-stone-300);
}

/* Secondary/Ghost button */
.myth-btn--secondary {
  background: transparent;
  color: var(--myth-stone-950);
  border: 1px solid var(--myth-border-muted);
}

.myth-btn--secondary:hover {
  background: var(--myth-surface-hover);
  border-color: var(--myth-border-strong);
}

[data-theme="dark"] .myth-btn--secondary {
  color: var(--myth-stone-50);
  border-color: var(--myth-border-muted);
}

[data-theme="dark"] .myth-btn--secondary:hover {
  background: var(--myth-surface-hover);
  border-color: var(--myth-border-strong);
}

/* Ghost button (no border) */
.myth-btn--ghost {
  background: transparent;
  color: var(--myth-text-muted);
}

.myth-btn--ghost:hover {
  background: var(--myth-surface-hover);
  color: var(--myth-text-secondary);
}

/* Accent button */
.myth-btn--accent {
  background: var(--myth-accent);
  color: white;
}

.myth-btn--accent:hover {
  background: var(--myth-accent-hover);
}


/* ===================================
   CARDS
   =================================== */

.myth-card {
  padding: 1rem; /* p-4 */
  background: var(--myth-surface-raised);
  border: 1px solid var(--myth-border-subtle);
  border-radius: 0.5rem; /* rounded-lg */
  box-shadow: var(--myth-shadow-sm);
}

.myth-card--sm {
  padding: 0.75rem; /* p-3 */
  border-radius: 0.375rem; /* rounded-md */
}

/* Panel container (lighter bg) */
.myth-panel {
  background: var(--myth-bg-subtle);
  border: 1px solid var(--myth-border-subtle);
  border-radius: 0.5rem;
  overflow: hidden;
}


/* ===================================
   NAVIGATION TABS
   Header tab toggles (Editorial / Graph style).
   Use --myth-panel-* for floating surfaces, --myth-ui-* for text.
   =================================== */

/* Segmented control container */
.myth-view-switcher {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  padding: 3px;
  background: var(--myth-surface-raised);
  border-radius: 8px;
}

.myth-nav-tab {
  padding: 0.25rem 0.625rem;
  font-size: 0.8125rem;
  border-radius: 5px;
  color: var(--myth-ui-muted);
  text-decoration: none;
  transition: color 150ms ease-out, background 150ms ease-out, transform 150ms ease-out;
}

.myth-nav-tab:hover {
  color: var(--myth-ui-primary);
  background: var(--myth-surface-button-hover);
}

.myth-nav-tab:active {
  transform: scale(0.97);
}

.myth-nav-tab-active {
  padding: 0.25rem 0.625rem;
  font-size: 0.8125rem;
  border-radius: 5px;
  background: var(--myth-panel-1);
  color: var(--myth-ui-primary);
  font-weight: 500;
  text-decoration: none;
  box-shadow: var(--myth-shadow-1);
  transition: transform 150ms ease-out;
}

.myth-nav-tab-active:active {
  transform: scale(0.97);
}


/* ===================================
   NAVIGATION LINKS (drawer / sidebar)
   =================================== */

.myth-nav-link {
  display: block;
  padding: 0.5rem 0.75rem; /* py-2 px-3 */
  font-size: 0.875rem;
  border-radius: 0.375rem;
  border-left: 2px solid transparent;
  color: var(--myth-ui-muted);
  text-decoration: none;
  transition: color 150ms ease-out, background 150ms ease-out;
}

.myth-nav-link:hover {
  color: var(--myth-ui-primary);
  background: var(--myth-surface-hover);
}

.myth-nav-link-active {
  display: block;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  border-radius: 0.375rem;
  border-left: 2px solid var(--myth-ui-muted);
  background: var(--myth-surface-selected);
  color: var(--myth-ui-primary);
  font-weight: 500;
  text-decoration: none;
}


/* ===================================
   FORM INPUTS
   =================================== */

.myth-input {
  background: var(--myth-panel-1);
  border: 1px solid var(--myth-border-subtle);
  border-radius: 0.375rem;
  color: var(--myth-ui-primary);
  font-size: 0.875rem;
  padding: 0.625rem 1rem; /* py-2.5 px-4 */
  outline: none;
  transition: border-color 150ms ease-out;
}

.myth-input::placeholder {
  color: var(--myth-ui-subtle);
}

.myth-input:focus {
  border-color: var(--myth-border-strong);
}


/* ===================================
   CALLOUTS
   =================================== */

/* Standard callout box */
.myth-callout {
  padding: 1rem;
  background: var(--myth-bg-subtle);
  border: 1px solid var(--myth-border-subtle);
  border-radius: 0.5rem;
}

/* Left-border callout (for key findings) */
.myth-callout--accent {
  padding: 0.75rem;
  background: var(--myth-bg-subtle);
  border: none;
  border-left: 2px solid var(--myth-accent);
  border-radius: 0 0.25rem 0.25rem 0; /* rounded-r */
}

/* Success callout */
.myth-callout--success {
  padding: 0.75rem;
  background: var(--myth-success-bg);
  border: none;
  border-left: 2px solid var(--myth-color-success);
  border-radius: 0 0.25rem 0.25rem 0;
  color: var(--myth-success-text);
}

/* Warning callout */
.myth-callout--warning {
  padding: 0.75rem;
  background: var(--myth-warning-bg);
  border: none;
  border-left: 2px solid var(--myth-color-warning);
  border-radius: 0 0.25rem 0.25rem 0;
  color: var(--myth-warning-text);
}

/* Error callout */
.myth-callout--error {
  padding: 0.75rem;
  background: var(--myth-error-bg);
  border: none;
  border-left: 2px solid var(--myth-color-error);
  border-radius: 0 0.25rem 0.25rem 0;
  color: var(--myth-error-text);
}


/* .myth-input is defined in FORM INPUTS section above (uses --myth-panel-* tokens) */


/* ===================================
   TYPOGRAPHY

   Two font families:
   - Sans: var(--myth-font-sans) — prose, UI text
   - Mono: var(--myth-font-mono) — data, code, technical

   Decision: "Is this prose, structured data, or code?"
   - Prose (sans): myth-body → myth-body-compact → myth-caption
   - Data (sans, tabular-nums): myth-data
   - Code (mono): myth-mono
   - Special: myth-label (uppercase section headers)

   Size scale (below headings):
   - 16px (1rem)    — body text
   - 14px (0.875rem) — compact prose / data
   - 12px (0.75rem)  — captions / code

   CSS Classes:
   | Class            | Font | Size     | Use for                             |
   |------------------|------|----------|-------------------------------------|
   | .myth-heading-1   | sans | 24→36px  | Page titles (responsive)            |
   | .myth-heading-2   | sans | 24px     | Section headings                    |
   | .myth-heading-3   | sans | 18px     | Subsection headings                 |
   | .myth-heading-4   | sans | 16px     | Card titles, small headings         |
   | .myth-body        | sans | 16px     | Readable prose, paragraphs          |
   | .myth-body-compact| sans | 14px     | Dense UI text, card descriptions    |
   | .myth-caption     | sans | 12px     | Hints, disclaimers, meta prose      |
   | .myth-data        | sans | 14px     | Years, metadata, tabular values     |
   | .myth-data-sm     | sans | 12px     | Chips, badges, inline metadata      |
   | .myth-mono        | mono | 12px     | Code, method names, technical terms |
   | .myth-label       | sans | 12px     | Section labels (uppercase)          |
   | .myth-logo        | sans | 16px     | Header wordmark                     |

   Line length: 75ch desktop, 50ch mobile (see LAYOUT section)
   =================================== */

/* Logo - header wordmark */
.myth-logo {
  font-size: 1rem; /* 16px */
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--myth-stone-600);
}

[data-theme="dark"] .myth-logo {
  color: var(--myth-stone-400);
}

/* Page title - responsive */
.myth-heading-1 {
  font-size: 1.75rem; /* 28px */
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

@media (min-width: 640px) {
  .myth-heading-1 {
    font-size: 1.875rem; /* 30px */
  }
}

@media (min-width: 768px) {
  .myth-heading-1 {
    font-size: 2.25rem; /* 36px */
  }
}

/* Section heading */
.myth-heading-2 {
  font-size: 1.5rem; /* 24px */
  font-weight: 600;
  text-wrap: balance;
}

/* Subsection heading */
.myth-heading-3 {
  font-size: 1.125rem; /* 18px */
  font-weight: 500;
  text-wrap: balance;
}

/* Card titles, small headings */
.myth-heading-4 {
  font-size: 1rem; /* 16px */
  font-weight: 500;
}

/* Default readable body text - for prose, paragraphs */
.myth-body {
  font-size: 1rem; /* 16px */
  line-height: 1.625;
  text-wrap: pretty;
}

/* Dense UI text - for cards, descriptions, compact layouts */
.myth-body-compact {
  font-size: 0.875rem; /* 14px */
  line-height: 1.5;
  text-wrap: pretty;
}

/* Section labels - uppercase */
.myth-label {
  font-size: 0.75rem; /* 12px */
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--myth-text-muted);
}

/* Years, metadata, tabular values — sans 14px with tabular figures */
.myth-data {
  font-size: 0.875rem; /* 14px */
  font-variant-numeric: tabular-nums;
}

/* Small metadata — sans 12px with tabular figures (chips, badges, inline data) */
.myth-data-sm {
  font-size: 0.75rem; /* 12px */
  font-variant-numeric: tabular-nums;
}

/* Hints, disclaimers, meta prose — sans 12px */
.myth-caption {
  font-size: 0.75rem; /* 12px */
  line-height: 1.5;
  color: var(--myth-text-muted);
}

/* LEGACY alias — use .myth-caption instead */
.myth-hint {
  font-size: 0.75rem; /* 12px */
  color: var(--myth-text-muted);
}

/* Code, method names, technical terms — mono 12px */
.myth-mono {
  font-family: var(--myth-font-mono);
  font-size: 0.75rem; /* 12px */
  color: var(--myth-text-muted);
}

/* Text width utilities - for constraining text within larger containers */
.myth-text-width {
  max-width: 75ch;
}

@media (max-width: 768px) {
  .myth-text-width {
    max-width: 50ch;
  }
}

.myth-text-width-narrow {
  max-width: 65ch;
}


/* ===================================
   LAYOUT

   Content widths (character-based for readability):
   - .myth-content: 75ch desktop, 50ch mobile (standard - use for most pages)
   - .myth-content-narrow: 65ch (dense prose, long-form articles)
   - .myth-content-wide: 90ch (dashboards, data-heavy layouts)

   Tailwind equivalents:
   - max-w-[75ch] or max-w-[50ch] (responsive)
   - max-w-prose (65ch)
   - max-w-[90ch]

   Container padding (responsive):
   - px-4 sm:px-6 lg:px-8

   Section padding (responsive):
   - py-12 md:py-16 lg:py-20

   Card padding:
   - p-4: Default cards
   - p-3: Compact cards (list items, small panels)
   - p-6: Feature cards, hero sections
   =================================== */

/* Standard content container - default for all pages */
.myth-content {
  max-width: 75ch;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

@media (max-width: 768px) {
  .myth-content {
    max-width: 50ch;
  }
}

@media (min-width: 640px) {
  .myth-content {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .myth-content {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

/* Narrow content - for dense prose, long-form reading */
.myth-content-narrow {
  max-width: 65ch;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

@media (min-width: 640px) {
  .myth-content-narrow {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

/* Wide content - for dashboards, data tables, complex layouts */
.myth-content-wide {
  max-width: 90ch;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

@media (max-width: 768px) {
  .myth-content-wide {
    max-width: 50ch;
  }
}

@media (min-width: 640px) {
  .myth-content-wide {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .myth-content-wide {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

/* Section padding - consistent vertical rhythm */
.myth-section {
  padding-top: 3rem;    /* py-12 */
  padding-bottom: 3rem;
}

@media (min-width: 768px) {
  .myth-section {
    padding-top: 4rem;  /* md:py-16 */
    padding-bottom: 4rem;
  }
}

@media (min-width: 1024px) {
  .myth-section {
    padding-top: 5rem;  /* lg:py-20 */
    padding-bottom: 5rem;
  }
}

/* Section spacing (between sections) */
.myth-section-gap {
  display: flex;
  flex-direction: column;
  gap: 1.5rem; /* space-y-6 */
}

/* Header - consistent height across all pages */
.myth-header {
  padding-top: 1rem;    /* py-4 */
  padding-bottom: 1rem;
  height: 3.5rem;       /* h-14 = 56px, matches content + padding */
  display: flex;
  align-items: center;
}

/* Footer - consistent height across all pages */
.myth-footer {
  padding-top: 1rem;    /* py-4 */
  padding-bottom: 1rem;
}


/* ===================================
   UTILITIES
   =================================== */

/* Text colors */
.myth-text-primary { color: var(--myth-text-primary); }
.myth-text-secondary { color: var(--myth-text-secondary); }
.myth-text-muted { color: var(--myth-text-muted); }
.myth-text-subtle { color: var(--myth-text-subtle); }

/* Background colors */
.myth-bg-primary { background-color: var(--myth-bg-primary); }
.myth-bg-secondary { background-color: var(--myth-bg-secondary); }
.myth-bg-tertiary { background-color: var(--myth-bg-tertiary); }

/* Border colors */
.myth-border-primary { border-color: var(--myth-border-primary); }
.myth-border-secondary { border-color: var(--myth-border-secondary); }


/* ===================================
   ANIMATIONS (for Radix components)
   =================================== */

@keyframes accordion-down {
  from { height: 0; opacity: 0; }
  to { height: var(--radix-accordion-content-height); opacity: 1; }
}

@keyframes accordion-up {
  from { height: var(--radix-accordion-content-height); opacity: 1; }
  to { height: 0; opacity: 0; }
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes zoom-in-95 {
  from { transform: scale(0.95); }
  to { transform: scale(1); }
}

@keyframes zoom-out-95 {
  from { transform: scale(1); }
  to { transform: scale(0.95); }
}

@keyframes slide-in-from-right {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

@keyframes slide-out-to-right {
  from { transform: translateX(0); }
  to { transform: translateX(100%); }
}

@keyframes slide-in-from-top-2 {
  from { transform: translateY(-8px); }
  to { transform: translateY(0); }
}

@keyframes slide-in-from-bottom-2 {
  from { transform: translateY(8px); }
  to { transform: translateY(0); }
}

@keyframes slide-in-from-left-2 {
  from { transform: translateX(-8px); }
  to { transform: translateX(0); }
}

@keyframes slide-in-from-right-2 {
  from { transform: translateX(8px); }
  to { transform: translateX(0); }
}

/* Animation utility classes */
.animate-accordion-down {
  animation: accordion-down 200ms ease-out;
}

.animate-accordion-up {
  animation: accordion-up 200ms ease-out;
}

.animate-in {
  animation: fade-in 150ms ease-out, zoom-in-95 150ms ease-out;
}

.animate-out {
  animation: fade-out 150ms ease-in, zoom-out-95 150ms ease-in;
}

.fade-in-0 { animation: fade-in 150ms ease-out; }
.fade-out-0 { animation: fade-out 150ms ease-in; }
.zoom-in-95 { animation: zoom-in-95 150ms ease-out; }
.zoom-out-95 { animation: zoom-out-95 150ms ease-in; }
.slide-in-from-right { animation: slide-in-from-right 200ms ease-out; }
.slide-out-to-right { animation: slide-out-to-right 200ms ease-in; }
.slide-in-from-top-2 { animation: slide-in-from-top-2 150ms ease-out; }
.slide-in-from-bottom-2 { animation: slide-in-from-bottom-2 150ms ease-out; }
.slide-in-from-left-2 { animation: slide-in-from-left-2 150ms ease-out; }
.slide-in-from-right-2 { animation: slide-in-from-right-2 150ms ease-out; }


/* ===================================
   DRAWER / BOTTOM SHEET ANIMATIONS
   =================================== */

@keyframes drawer-slide-up {
  from {
    transform: translateY(100%);
    opacity: 0.8;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes drawer-slide-in-right {
  from {
    transform: translateX(100%);
    opacity: 0.8;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* Slide up from bottom */
.drawer-enter {
  animation: drawer-slide-up 250ms ease-out;
}

/* Slide in from right */
.drawer-enter-right {
  animation: drawer-slide-in-right 200ms ease-out;
}

@keyframes drawer-slide-in-left {
  from {
    transform: translateX(-100%);
    opacity: 0.8;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* Slide in from left */
.drawer-enter-left {
  animation: drawer-slide-in-left 200ms ease-out;
}


/* ===================================
   LOGO ANIMATION

   Collapses "◈ Mythril" → "◈" on scroll.
   Add .myth-logo-animated to the logo container.
   JavaScript adds .scrolled class to header on scroll.
   =================================== */

/* Logo container */
.myth-logo-animated {
  display: inline-flex;
  align-items: center;
  color: var(--myth-ui-muted);
}

/* Wordmark - animates on scroll */
.myth-logo-animated .myth-logo-wordmark {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  max-width: 5em;
  margin-left: 0.3em;
  transition: opacity 200ms ease-out, max-width 200ms cubic-bezier(0.4, 0, 0.2, 1), margin-left 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Collapsed state - supports .scrolled on parent OR on element itself */
.scrolled .myth-logo-animated .myth-logo-wordmark,
.myth-logo-animated.scrolled .myth-logo-wordmark {
  max-width: 0;
  margin-left: 0;
  opacity: 0;
}

/* Logo animation script - add to pages */
/*
<script>
(function() {
  const header = document.querySelector('header');
  const threshold = 50;
  let ticking = false;

  function updateHeader() {
    if (window.scrollY > threshold) {
      header.classList.add('scrolled');
    } else {
      header.classList.remove('scrolled');
    }
    ticking = false;
  }

  window.addEventListener('scroll', function() {
    if (!ticking) {
      requestAnimationFrame(updateHeader);
      ticking = true;
    }
  });
})();
</script>
*/


/* ===================================
   SURFACE ELEVATION UTILITIES
   Radix-style alpha blending for consistent elevation across apps
   =================================== */

/* Canvas level (page background) */
.surface-canvas {
  background-color: var(--myth-surface-canvas);
}

/* Raised surfaces (panels, cards, drawers) - semi-transparent for blur effect */
.surface-raised {
  background-color: color-mix(in srgb, var(--myth-stone-800) 85%, transparent);
  backdrop-filter: blur(12px);
}

/* Overlay surfaces (dropdowns, popovers) */
.surface-overlay {
  background-color: color-mix(in srgb, var(--myth-stone-700) 90%, transparent);
  backdrop-filter: blur(8px);
}

/* Buttons on canvas */
.surface-button {
  background-color: var(--myth-stone-800);
  border-color: var(--myth-stone-800);
}
.surface-button:hover {
  background-color: var(--myth-stone-800);
  border-color: var(--myth-stone-600);
}

/* Buttons on raised surfaces (need solid bg for contrast) */
.surface-button-raised {
  background-color: var(--myth-stone-800);
  border-color: var(--myth-stone-600);
  box-shadow: 0 2px 8px var(--myth-black-a6);
}
.surface-button-raised:hover {
  background-color: var(--myth-stone-600);
  border-color: var(--myth-stone-500);
}

/* Surface borders */
.surface-border {
  border-color: var(--myth-stone-800);
}
.surface-border-hover {
  border-color: var(--myth-stone-600);
}

/* Light mode overrides */
[data-theme="light"] .surface-raised {
  background-color: color-mix(in srgb, var(--myth-stone-200) 90%, transparent);
}
[data-theme="light"] .surface-overlay {
  background-color: color-mix(in srgb, var(--myth-stone-200) 95%, transparent);
}
[data-theme="light"] .surface-button {
  background-color: var(--myth-stone-200);
  border-color: var(--myth-stone-300);
}
[data-theme="light"] .surface-button:hover {
  background-color: var(--myth-stone-300);
  border-color: var(--myth-stone-400);
}
[data-theme="light"] .surface-button-raised {
  background-color: var(--myth-stone-50);
  border-color: var(--myth-stone-300);
}
[data-theme="light"] .surface-button-raised:hover {
  background-color: var(--myth-stone-100);
  border-color: var(--myth-stone-400);
}
[data-theme="light"] .surface-border {
  border-color: var(--myth-stone-300);
}
[data-theme="light"] .surface-border-hover {
  border-color: var(--myth-stone-400);
}


/* ===================================
   HEADER ICON BUTTONS
   Consistent 36px icon buttons for toolbars and headers.
   =================================== */

.header-icon-btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  color: var(--myth-ui-muted);
  background: none;
  border: none;
  cursor: pointer;
  transition: color 150ms ease-out, background 150ms ease-out, transform 150ms ease-out;
}

.header-icon-btn svg,
.header-icon-btn ph-sun,
.header-icon-btn ph-moon,
.header-icon-btn ph-sidebar-simple {
  display: block;
  line-height: 1;
}

.header-icon-btn:hover {
  color: var(--myth-ui-primary);
  background: var(--myth-surface-button-hover);
}

.header-icon-btn:active {
  transform: scale(0.92);
}


/* ===================================
   SIDEBAR LAYOUT
   Push sidebar on desktop, overlay on mobile.
   =================================== */

.app-layout {
  position: relative;
  min-height: 100vh;
  overflow-x: clip;
}

#sidebar {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--myth-bg-base);
  border-right: 1px solid var(--myth-border-subtle);
  width: 280px;
  transform: translateX(-100%);
  transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 500;
  display: flex;
  flex-direction: column;
}

.sidebar-open #sidebar,
.sidebar-open-initial #sidebar {
  transform: translateX(0);
}

#main-area {
  --sidebar-offset: 0px;
  min-width: 0;
  position: relative;
  margin-left: 0;
  transition: margin-left 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.sidebar-open #main-area,
.sidebar-open-initial #main-area {
  --sidebar-offset: 280px;
  margin-left: 280px;
}

/* Brand bar: single toggle+logo that never moves.
   Fixed at top-left, above both sidebar and header. */
#brand-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 48px;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0 0.5rem;
  z-index: 700;
  pointer-events: none;
}

#brand-bar > * {
  pointer-events: auto;
}

#brand-bar ph-sidebar-simple {
  display: block;
  line-height: 1;
}

/* Sidebar spacer where brand bar overlaps */
.sidebar-spacer {
  height: 48px;
  flex-shrink: 0;
  border-bottom: 1px solid var(--myth-border-subtle);
}

/* Sidebar tree */
.sidebar-tree {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  overflow-y: auto;
  padding: 0.75rem;
}

.sidebar-tree-label {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--myth-ui-subtle);
  padding: 0 0.75rem;
  margin-bottom: 0.375rem;
}

/* Tree nodes */
.tree-node {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.tree-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.375rem 0.75rem;
  border-radius: 0.375rem;
  font-size: 0.8125rem;
  color: var(--myth-ui-muted);
  transition: color 150ms ease-out, background 150ms ease-out;
}

.tree-toggle:hover {
  color: var(--myth-ui-primary);
  background: var(--myth-surface-hover);
}

.tree-toggle:hover .tree-years,
.tree-toggle:hover .tree-chevron,
.tree-toggle:hover .tree-expand-all {
  color: var(--myth-ui-primary);
}

.tree-toggle[aria-expanded="true"] .tree-chevron {
  transform: rotate(90deg);
}

/* ── Legend Icons (Phosphor duotone shape SVGs) ── */
.legend-icon {
  display: inline-block;
  flex-shrink: 0;
}
.legend-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

.tree-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.tree-icon {
  width: 10px;
  height: 10px;
}

.tree-label {
  flex: 1;
  font-weight: 500;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tree-years {
  font-size: 0.6875rem;
  color: var(--myth-ui-muted);
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
  transition: color 150ms ease-out;
}

.tree-chevron {
  display: block;
  flex-shrink: 0;
  line-height: 1;
  transition: transform 150ms ease-out, color 150ms ease-out;
  color: var(--myth-ui-subtle);
}

.tree-expand-all {
  display: block;
  flex-shrink: 0;
  line-height: 1;
  color: var(--myth-ui-subtle);
  transition: color 150ms ease-out;
}

.tree-children {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-left: 1.25rem;
}

.tree-leaf {
  display: block;
  padding: 0.25rem 0.75rem;
  font-size: 0.8125rem;
  color: var(--myth-ui-muted);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: color 150ms ease-out, background 150ms ease-out;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tree-leaf:hover {
  color: var(--myth-ui-primary);
  background: var(--myth-surface-hover);
}

/* Active states — full contrast on label, years, icons */
.tree-toggle.active {
  background: var(--myth-surface-selected);
  color: var(--myth-ui-primary);
  font-weight: 500;
}

.tree-toggle.active .tree-years,
.tree-toggle.active .tree-chevron,
.tree-toggle.active .tree-expand-all {
  color: var(--myth-ui-primary);
}

.tree-leaf.active {
  background: var(--myth-surface-selected);
  color: var(--myth-ui-primary);
  font-weight: 500;
}

/* Mobile backdrop */
#sidebar-backdrop {
  position: fixed;
  inset: 0;
  background: var(--myth-black-a9);
  z-index: 599;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s ease;
}

#sidebar-backdrop.visible {
  opacity: 1;
  pointer-events: auto;
}

/* ===================================
   MOBILE SIDEBAR (overlay mode)
   =================================== */
@media (max-width: 767px) {
  /* Mobile: sidebar overlays, no margin push */
  .sidebar-open #main-area,
  .sidebar-open-initial #main-area {
    margin-left: 0;
  }

  #main-area {
    transition: none;
  }

  #sidebar {
    z-index: 600;
    transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
  }

  /* Tie backdrop to sidebar-open class so they animate in sync */
  .sidebar-open #sidebar-backdrop {
    opacity: 1;
    pointer-events: auto;
  }
  #sidebar-backdrop {
    transition: opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1);
  }

  /* No initial flash for mobile */
  .sidebar-open-initial #sidebar {
    transform: translateX(-100%);
  }
}