/**
 * ╔════════════════════════════════════════════════════════════════════════════╗
 * ║                      ZIVVY DESIGN SYSTEM v2.6.1                           ║
 * ║  Built on behavioral psychology, emotional design patterns, and           ║
 * ║  the principle that peaks and valleys create engagement.                  ║
 * ║                                                                            ║
 * ║  v2.6.1 Updates:                                                           ║
 * ║  • Extended spacing scale (11 values: 4px-96px)                           ║
 * ║  • Psychological color system (6 behavioral triggers)                     ║
 * ║  • Complete utility classes for all spacing values                        ║
 * ╚════════════════════════════════════════════════════════════════════════════╝
 */

/* =============================================================================
   0. FONT IMPORTS
   ============================================================================= */

   
   /* =============================================================================
      1. DESIGN TOKENS
      ============================================================================= */
   
   :root {
     /* SPACING & GRID - Base unit: 4px
        Complete spacing scale for consistent rhythm */
     --space-xxs: 4px;      /* Tight spacing, icon padding */
     --space-xs: 8px;       /* Small gaps, compact layouts */
     --space-s: 12px;       /* Related elements */
     --space-m: 16px;       /* Standard spacing, paragraphs */
     --space-l: 24px;       /* Section spacing, groups */
     --space-xl: 32px;      /* Major separations */
     --space-xxl: 40px;     /* Large gaps */
     --space-xxxl: 48px;    /* Major sections */
     --space-section: 64px; /* Large section breaks */
     --space-mega: 80px;    /* Hero spacing */
     --space-ultra: 96px;   /* Maximum spacing */
   
     /* LAYOUT – Apple-style marketing grid */
     --layout-page-width: 1440px; /* @kind other */        /* Design reference only */
     --layout-container-max: 1344px;     /* Content max width (desktop) */
     --layout-container-padding-x: var(--space-l);  /* 24px side padding inside container */
     --layout-gutter: var(--space-l);    /* 24px grid gap / gutters */
   
     /* Section vertical rhythm */
     --layout-section-tight: var(--space-section); /* 64px */
     --layout-section-default: var(--space-mega);  /* 80px */
     --layout-section-loose: var(--space-ultra);   /* 96px */
   
     /* Touch Targets */
     --touch-desktop: 44px;
     --touch-mobile: 56px;
   
     /* Grid (legacy) */
     --container-max: 1344px;
   
     /* ========================================================================
        NEUTRAL SCALE — Warm Luxury Beige/Cream (NEW v2.6)
        ======================================================================== */
     --neutral-50: hsl(37, 53%, 94%);
     --neutral-100: hsl(39, 41%, 92%);
     --neutral-200: hsl(39, 27%, 88%);
     --neutral-300: hsl(39, 18%, 82%);
     --neutral-400: hsl(40, 8%, 63%);
     --neutral-500: hsl(37, 6%, 45%);
     --neutral-600: hsl(36, 6%, 33%);
     --neutral-700: hsl(38, 9%, 25%);
     --neutral-800: hsl(34, 8%, 16%);
     --neutral-900: hsl(43, 14%, 10%);
     --neutral-950: hsl(45, 17%, 5%);
   
     /* PRIMARY: Deep Purple - Brand, CTAs (50-950 scale) */
     --primary-50: hsl(270, 50%, 96%);
     --primary-100: hsl(271, 51%, 92%);
     --primary-200: hsl(270, 49%, 83%);
     --primary-300: hsl(271, 47%, 71%);
     --primary-400: hsl(271, 47%, 57%);
     --primary-500: hsl(272, 54%, 45%);
     --primary-600: hsl(269, 69%, 37%);
     --primary-700: hsl(269, 70%, 30%);
     --primary-800: hsl(269, 70%, 23%);
     --primary-900: hsl(268, 70%, 16%);
     --primary-950: hsl(267, 70%, 9%);
   
     /* SECONDARY: Violet-Blue - Links, Info (50-950 scale) */
     --secondary-50: hsl(226, 76%, 97%);
     --secondary-100: hsl(227, 77%, 93%);
     --secondary-200: hsl(226, 77%, 86%);
     --secondary-300: hsl(229, 72%, 77%);
     --secondary-400: hsl(230, 69%, 67%);
     --secondary-500: hsl(231, 65%, 57%);
     --secondary-600: hsl(232, 54%, 49%);
     --secondary-700: hsl(233, 54%, 39%);
     --secondary-800: hsl(232, 53%, 29%);
     --secondary-900: hsl(232, 53%, 20%);
     --secondary-950: hsl(233, 55%, 12%);
   
     /* TERTIARY: Muted Gold - Achievements (50-950 scale) */
     --tertiary-50: hsl(46, 76%, 97%);
     --tertiary-100: hsl(46, 75%, 92%);
     --tertiary-200: hsl(46, 74%, 83%);
     --tertiary-300: hsl(44, 72%, 72%);
     --tertiary-400: hsl(44, 70%, 59%);
     --tertiary-500: hsl(43, 80%, 46%);
     --tertiary-600: hsl(43, 80%, 39%);
     --tertiary-700: hsl(43, 79%, 31%);
     --tertiary-800: hsl(43, 79%, 22%);
     --tertiary-900: hsl(44, 79%, 15%);
     --tertiary-950: hsl(44, 77%, 8%);
   
     /* ========================================================================
        SUCCESS / WARNING / DANGER (State Colors)
        ======================================================================== */
     --success-400: hsl(119, 49%, 57%);
     --success-500: hsl(122, 39%, 49%);
     --warning-400: hsl(27, 96%, 61%);
     --warning-500: hsl(25, 95%, 53%);
     --danger-400: hsl(0, 91%, 71%);
     --danger-500: hsl(1, 77%, 55%);
   
     /* Legacy zivvy-* aliases for backward compatibility */
     --zivvy-success-50: hsl(152, 81%, 96%);
     --zivvy-success-100: hsl(149, 80%, 90%);
     --zivvy-success-200: hsl(152, 76%, 80%);
     --zivvy-success-500: var(--success-500);
     --zivvy-success-600: hsl(161, 94%, 30%);
     --zivvy-success-700: hsl(163, 94%, 24%);
     --zivvy-success-800: hsl(163, 88%, 20%);
     --zivvy-warning-50: hsl(48, 100%, 96%);
     --zivvy-warning-100: hsl(48, 96%, 89%);
     --zivvy-warning-200: hsl(48, 97%, 77%);
     --zivvy-warning-500: var(--warning-500);
     --zivvy-warning-600: hsl(32, 95%, 44%);
     --zivvy-warning-700: hsl(26, 90%, 37%);
     --zivvy-warning-800: hsl(23, 82%, 31%);
     --zivvy-danger-50: hsl(0, 86%, 97%);
     --zivvy-danger-100: hsl(0, 93%, 94%);
     --zivvy-danger-200: hsl(0, 96%, 89%);
     --zivvy-danger-300: hsl(0, 94%, 82%);
     --zivvy-danger-500: var(--danger-500);
     --zivvy-danger-600: hsl(0, 72%, 51%);
     --zivvy-danger-700: hsl(0, 74%, 42%);
     --zivvy-danger-800: hsl(0, 70%, 35%);
     --danger-950: hsl(0, 63%, 31%);
   
     /* ========================================================================
        EMOTIONAL STATES (NEW v2.6)
        ======================================================================== */
     --calm-primary: hsl(264, 32%, 57%);
     --calm-light: hsl(274, 41%, 97%);
     --info-primary: hsl(223, 47%, 57%);
     --info-light: hsl(216, 50%, 96%);
     --attention-primary: hsl(42, 63%, 48%);
     --attention-light: hsl(44, 60%, 95%);
     --urgent-primary: hsl(0, 64%, 58%);
     --urgent-light: hsl(5, 52%, 96%);
     --celebration-primary: hsl(123, 36%, 48%);
     --celebration-light: hsl(120, 33%, 96%);
   
     /* Legacy aliases */
     --success-primary: var(--celebration-primary);
     --success-light: var(--celebration-light);
     --warning-primary: var(--attention-primary);
     --warning-light: var(--attention-light);
   
     /* ========================================================================
        PSYCHOLOGICAL COLOR SYSTEM (NEW v2.6.1)
        ======================================================================== */
     --psychology-danger: hsl(6, 100%, 71%);
     --psychology-warning: hsl(37, 86%, 50%);
     --psychology-success: hsl(173, 100%, 38%);
     --psychology-premium: hsl(283, 37%, 52%);
     --psychology-achievement: hsl(51, 100%, 50%);
     --psychology-competitor: hsl(0, 100%, 63%);
   
     /* ========================================================================
        LEGACY COLOR ALIASES — Backward Compatibility
        ======================================================================== */
     --primary-vivid: var(--primary-600);
     --primary-royal-grape: var(--primary-700);
     --primary-deep-plum: var(--primary-800);
     --primary-lavender-ice: var(--primary-100);
     --primary-soft-violet: var(--primary-200);
     --primary-amethyst: var(--primary-500);
     --secondary-deep-azure: var(--secondary-700);
     --secondary-ice-pool: var(--secondary-100);
     --secondary-arctic-glow: var(--secondary-100);
     --tertiary-gold: var(--tertiary-500);
     --tertiary-hot-sand: var(--tertiary-400);
   
     /* ========================================================================
        SEMANTIC ALIASES (NEW v2.6)
        ======================================================================== */
     --white-utility: var(--neutral-50);
     --white-luxury: var(--neutral-100);
     --black-ui: var(--neutral-900);
     --black-hero: var(--neutral-950);
     --accent: hsl(47, 92%, 53%);
     --secondary-bright: var(--secondary-500);
   
     /* ========================================================================
        SURFACES — Light Mode (NEW v2.6)
        ======================================================================== */
     --surface-background: var(--neutral-50);
     --surface-card: var(--neutral-100);
     --surface-elevated: hsl(0, 0%, 100%);
     --surface-sunken: var(--neutral-200);
     --surface-border: var(--neutral-200);
   
     /* Legacy aliases */
     --surface-foreground: hsl(0, 0%, 13%);
     --surface-variant: var(--neutral-100);
   
     /* ========================================================================
        OVERLAYS & BACKDROPS (NEW v2.6)
        ======================================================================== */
     --overlay-dark: hsl(45, 17%, 5%, 0.5);
     --overlay-heavy: hsl(45, 17%, 5%, 0.8);
     --overlay-light: hsl(37, 53%, 94%, 0.1);
     --overlay-subtle: hsl(37, 53%, 94%, 0.05);
   
     /* ========================================================================
        INTERACTIVE STATES — Light Mode (NEW v2.6)
        ======================================================================== */
     --state-hover: hsl(0, 0%, 0%, 0.05);
     --state-active: hsl(0, 0%, 0%, 0.1);
     --state-disabled-opacity: 0.5; /* @kind other */
     --state-disabled-cursor: not-allowed; /* @kind other */
   
     /* ========================================================================
        INPUT FIELDS — Light Mode (NEW v2.6)
        ======================================================================== */
     --input-bg: var(--white-utility);
     --input-border: var(--neutral-300);
     --input-border-focus: var(--primary-600);
     --input-placeholder: var(--neutral-400);
     --input-disabled-bg: var(--neutral-100);
     --input-error-bg: var(--zivvy-danger-50);
   
     /* ========================================================================
        TABLE — Light Mode (NEW v2.6)
        ======================================================================== */
     --table-header-bg: var(--neutral-100);
     --table-header-text: var(--neutral-600);
     --table-row-striped: hsl(0, 0%, 0%, 0.02);
     --table-row-hover: hsl(0, 0%, 0%, 0.04);
     --table-row-selected: hsl(269, 69%, 37%, 0.08);
     --table-border: var(--neutral-200);
   
     /* ========================================================================
        SELECTION — Light Mode (NEW v2.6)
        ======================================================================== */
     --selection-bg: hsl(269, 69%, 37%, 0.25);
     --selection-text: inherit; /* @kind other */
   
     /* ========================================================================
        LINK STATES — Light Mode (NEW v2.6)
        ======================================================================== */
     --link-default: var(--primary-600);
     --link-hover: var(--primary-700);
     --link-active: var(--primary-800);
     --link-visited: var(--neutral-500);
   
     /* ========================================================================
        SKELETON LOADING — Light Mode (NEW v2.6)
        ======================================================================== */
     --skeleton-base: var(--neutral-200);
     --skeleton-shimmer: var(--neutral-100);
   
     /* ========================================================================
        SCROLLBAR — Light Mode (NEW v2.6)
        ======================================================================== */
     --scrollbar-track: var(--neutral-100);
     --scrollbar-thumb: var(--neutral-300);
     --scrollbar-thumb-hover: var(--neutral-400);
   
     /* ========================================================================
        TOOLTIP — Light Mode (NEW v2.6)
        ======================================================================== */
     --tooltip-bg: var(--neutral-900);
     --tooltip-text: var(--neutral-50);
   
     /* ========================================================================
        CODE — Light Mode (NEW v2.6)
        ======================================================================== */
     --code-bg: var(--neutral-100);
     --code-text: var(--danger-500);
     --code-block-bg: var(--neutral-800);
     --code-block-text: var(--neutral-100);
   
     /* ========================================================================
        ICONS — Light Mode (NEW v2.6)
        ======================================================================== */
     --icon-primary: var(--neutral-900);
     --icon-secondary: var(--neutral-500);
     --icon-muted: var(--neutral-300);
     --icon-brand: var(--primary-600);
   
     /* ========================================================================
        TEXT — Light Mode (NEW v2.6)
        ======================================================================== */
     --text-primary: var(--neutral-900);
     --text-secondary: var(--neutral-600);
     --text-tertiary: var(--neutral-400);
     --text-disabled: var(--neutral-300);
     --text-inverse: var(--neutral-50);
     --text-link: var(--primary-600);
   
     /* ========================================================================
        BORDERS — Light Mode (NEW v2.6)
        ======================================================================== */
     --border-default: var(--neutral-200);
     --border-subtle: var(--neutral-100);
     --border-strong: var(--neutral-300);
     --border-primary: var(--primary-600);
     --border-danger: var(--danger-500);
     --border-warning: var(--warning-500);
     --border-success: var(--success-500);
     --border-transparent: transparent; /* @kind other */
   
     /* ========================================================================
        SHADOWS — Light Mode (NEW v2.6)
        ======================================================================== */
     --shadow-1: 0 1px 2px hsl(0, 0%, 0%, 0.05);
     --shadow-2: 0 2px 4px hsl(0, 0%, 0%, 0.08);
     --shadow-3: 0 4px 8px hsl(0, 0%, 0%, 0.1);
     --shadow-4: 0 8px 16px hsl(0, 0%, 0%, 0.12);
     --shadow-5: 0 16px 32px hsl(0, 0%, 0%, 0.15);
     --shadow-inset: inset 0 1px 2px hsl(0, 0%, 0%, 0.06);
     --shadow-none: none;
   
     /* ========================================================================
        FOCUS (NEW v2.6)
        ======================================================================== */
     --focus-ring-color: var(--secondary-bright);
   
     /* ========================================================================
        DATA VISUALIZATION (NEW v2.6)
        ======================================================================== */
     --chart-1: hsl(263, 50%, 54%);
     --chart-2: hsl(214, 77%, 60%);
     --chart-3: hsl(171, 62%, 46%);
     --chart-4: hsl(47, 92%, 53%);
     --chart-5: hsl(25, 79%, 57%);
     --chart-6: hsl(352, 69%, 60%);
     --chart-7: hsl(264, 32%, 57%);
     --chart-8: hsl(192, 38%, 53%);
   
     /* ========================================================================
        BELT COLORS — Traditional (NEW v2.6 - Martial Arts)
        ======================================================================== */
     --belt-white: hsl(0, 0%, 100%);
     --belt-gold: hsl(51, 100%, 50%);
     --belt-orange: hsl(25, 100%, 50%);
     --belt-green: hsl(120, 61%, 34%);
     --belt-blue: hsl(215, 100%, 34%);
     --belt-purple: hsl(270, 50%, 40%);
     --belt-red: hsl(0, 100%, 40%);
     --belt-brown: hsl(29, 56%, 23%);
     --belt-black: hsl(0, 0%, 10%);
   
     /* ========================================================================
        BELT COLORS — Split (CSS Gradients) (NEW v2.6)
        ======================================================================== */
     --belt-white-gold: linear-gradient(to right, var(--belt-white) 50%, var(--belt-gold) 50%);
     --belt-gold-orange: linear-gradient(to right, var(--belt-gold) 50%, var(--belt-orange) 50%);
     --belt-orange-green: linear-gradient(to right, var(--belt-orange) 50%, var(--belt-green) 50%);
     --belt-green-blue: linear-gradient(to right, var(--belt-green) 50%, var(--belt-blue) 50%);
     --belt-blue-purple: linear-gradient(to right, var(--belt-blue) 50%, var(--belt-purple) 50%);
     --belt-purple-red: linear-gradient(to right, var(--belt-purple) 50%, var(--belt-red) 50%);
     --belt-red-brown: linear-gradient(to right, var(--belt-red) 50%, var(--belt-brown) 50%);
     --belt-brown-black: linear-gradient(to right, var(--belt-brown) 50%, var(--belt-black) 50%);
     --belt-red-black: linear-gradient(to right, var(--belt-red) 50%, var(--belt-black) 50%);
   
     /* ========================================================================
        GRADIENTS — Brand (NEW v2.6)
        ======================================================================== */
     --gradient-brand: linear-gradient(135deg, var(--primary-600) 0%, var(--secondary-500) 100%);
     --gradient-brand-vertical: linear-gradient(180deg, var(--primary-600) 0%, var(--secondary-500) 100%);
     --gradient-brand-radial: radial-gradient(circle at center, var(--primary-600) 0%, var(--secondary-500) 100%);
   
     /* ========================================================================
        GRADIENTS — Premium/Accent (NEW v2.6)
        ======================================================================== */
     --gradient-royal: linear-gradient(135deg, var(--primary-600) 0%, var(--accent) 100%);
     --gradient-gold-shimmer: linear-gradient(135deg, hsl(43, 80%, 46%) 0%, var(--accent) 50%, hsl(43, 80%, 46%) 100%);
     --gradient-sunset: linear-gradient(135deg, var(--accent) 0%, var(--chart-5) 100%);
   
     /* ========================================================================
        GRADIENTS — Surface (NEW v2.6)
        ======================================================================== */
     --gradient-surface-light: linear-gradient(180deg, var(--neutral-50) 0%, var(--neutral-100) 100%);
     --gradient-surface-dark: linear-gradient(180deg, var(--neutral-900) 0%, var(--neutral-800) 100%);
     --gradient-fade-out: linear-gradient(180deg, transparent 0%, var(--overlay-heavy) 100%);
   
     /* ========================================================================
        GRADIENTS — Ambient (NEW v2.6)
        ======================================================================== */
     --gradient-aurora: linear-gradient(135deg, var(--primary-600) 0%, var(--secondary-500) 50%, var(--chart-3) 100%);
     --gradient-dusk: linear-gradient(180deg, var(--primary-600) 0%, var(--neutral-950) 100%);
   
     /* ========================================================================
        COLORBLIND SAFE PALETTE (NEW v2.6)
        ======================================================================== */
     --cb-blue: hsl(202, 100%, 37%);
     --cb-cyan: hsl(196, 85%, 57%);
     --cb-teal: hsl(173, 100%, 30%);
     --cb-orange: hsl(22, 85%, 57%);
     --cb-red: hsl(11, 85%, 43%);
     --cb-magenta: hsl(338, 85%, 57%);
     --cb-gray: hsl(0, 0%, 73%);
     --cb-purple: hsl(250, 60%, 33%);
   
     /* ========================================================================
        TRANSPARENCY SCALES (NEW v2.6)
        ======================================================================== */
     --alpha-5: 0.05; /* @kind other */
     --alpha-10: 0.10; /* @kind other */
     --alpha-20: 0.20; /* @kind other */
     --alpha-30: 0.30; /* @kind other */
     --alpha-40: 0.40; /* @kind other */
     --alpha-50: 0.50; /* @kind other */
     --alpha-60: 0.60; /* @kind other */
     --alpha-70: 0.70; /* @kind other */
     --alpha-80: 0.80; /* @kind other */
     --alpha-90: 0.90; /* @kind other */
   
     /* RGB values for use with alpha */
     --black-hero-rgb: 14, 13, 10; /* @kind other */
     --white-luxury-rgb: 248, 242, 232; /* @kind other */
     --primary-rgb: 92, 29, 158; /* @kind other */
     --success-rgb: 76, 175, 80; /* @kind other */
     --warning-rgb: 249, 115, 22; /* @kind other */
     --danger-rgb: 229, 57, 53; /* @kind other */
   
     /* ========================================================================
        TYPOGRAPHY
        ======================================================================== */
     --font-display: 'Archivo', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
     --font-text: 'Archivo', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
     --font-mono: 'SF Mono', 'Menlo', 'Monaco', monospace;
     --font-handwritten: 'Caveat', cursive;
   
     --type-display-xl: clamp(40px, 5vw, 64px);
     --type-display-lg: clamp(32px, 4vw, 48px);
     --type-display-md: clamp(28px, 3.5vw, 40px);
     --type-display-sm: clamp(24px, 3vw, 32px);
     --type-heading-1: clamp(22px, 2.5vw, 28px);
     --type-heading-2: clamp(20px, 2.2vw, 24px);
     --type-heading-3: clamp(18px, 2vw, 20px);
     --type-body-lg: 18px;
     --type-body-md: 16px;
     --type-body-sm: 14px;
     --type-body-xs: 12px;
   
     --weight-light: 300; /* @kind other */
     --weight-regular: 400; /* @kind other */
     --weight-medium: 500; /* @kind other */
     --weight-semibold: 600; /* @kind other */
     --weight-bold: 700; /* @kind other */
     --weight-black: 900; /* @kind other */
   
     --line-tight: 1.1; /* @kind other */
     --line-snug: 1.25; /* @kind other */
     --line-normal: 1.5; /* @kind other */
     --line-relaxed: 1.625; /* @kind other */
   
     --tracking-tight: -0.025em; /* @kind other */
     --tracking-normal: 0; /* @kind other */
     --tracking-wide: 0.025em; /* @kind other */
     --tracking-wider: 0.05em; /* @kind other */
   
     /* ANIMATION */
     --timing-fast: 150ms; /* @kind other */
     --timing-base: 300ms; /* @kind other */
     --timing-slow: 500ms; /* @kind other */
     --timing-celebration: 600ms; /* @kind other */
   
     --ease-default: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
     --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275); /* @kind other */
   
     /* BORDER RADIUS */
     --radius-sm: 4px;
     --radius-md: 8px;
     --radius-lg: 16px;
     --radius-xl: 24px;
     --radius-full: 9999px;
   
     /* Squircle radius */
     --radius-squircle-sm: 12px;
     --radius-squircle: 20px;
     --radius-squircle-lg: 28px;
   
     /* MARKETING COLORS - Alternative color scheme for marketing pages */
     --marketing-bg: hsl(40, 43%, 99%);
     --marketing-bg-alt: hsl(40, 23%, 95%);
     --marketing-primary: hsl(151, 50%, 24%);
     --marketing-primary-light: hsl(150, 46%, 33%);
     --marketing-accent: hsl(46, 68%, 47%);
     --marketing-accent-light: hsl(48, 77%, 60%);
   }
   
   /* =============================================================================
      DARK MODE (NEW v2.6)
      ============================================================================= */
   
   [data-theme="dark"],
   .dark {
     /* Surfaces — Dark Mode */
     --surface-background: var(--neutral-950);
     --surface-card: var(--neutral-900);
     --surface-elevated: var(--neutral-800);
     --surface-sunken: var(--neutral-900);
     --surface-border: var(--neutral-700);
   
     /* Text — Dark Mode */
     --text-primary: var(--neutral-50);
     --text-secondary: var(--neutral-400);
     --text-tertiary: var(--neutral-500);
     --text-disabled: var(--neutral-600);
     --text-link: var(--primary-400);
   
     /* Borders — Dark Mode */
     --border-default: var(--neutral-700);
     --border-subtle: var(--neutral-800);
     --border-strong: var(--neutral-600);
     --border-primary: var(--primary-400);
     --border-danger: var(--danger-400);
     --border-warning: var(--warning-400);
     --border-success: var(--success-400);
   
     /* Shadows — Dark Mode */
     --shadow-1: 0 1px 2px hsl(0, 0%, 0%, 0.2);
     --shadow-2: 0 2px 4px hsl(0, 0%, 0%, 0.25);
     --shadow-3: 0 4px 8px hsl(0, 0%, 0%, 0.3);
     --shadow-4: 0 8px 16px hsl(0, 0%, 0%, 0.35);
     --shadow-5: 0 16px 32px hsl(0, 0%, 0%, 0.4);
     --shadow-inset: inset 0 1px 2px hsl(0, 0%, 0%, 0.2);
   
     /* Interactive States — Dark Mode */
     --state-hover: hsl(0, 0%, 100%, 0.08);
     --state-active: hsl(0, 0%, 100%, 0.15);
   
     /* Input Fields — Dark Mode */
     --input-bg: var(--neutral-900);
     --input-border: var(--neutral-600);
     --input-border-focus: var(--primary-400);
     --input-placeholder: var(--neutral-500);
     --input-disabled-bg: var(--neutral-800);
     --input-error-bg: var(--danger-950);
   
     /* Table — Dark Mode */
     --table-header-bg: var(--neutral-800);
     --table-header-text: var(--neutral-300);
     --table-row-striped: hsl(0, 0%, 100%, 0.03);
     --table-row-hover: hsl(0, 0%, 100%, 0.06);
     --table-row-selected: hsl(271, 47%, 57%, 0.15);
     --table-border: var(--neutral-700);
   
     /* Selection — Dark Mode */
     --selection-bg: hsl(271, 47%, 57%, 0.35);
   
     /* Link States — Dark Mode */
     --link-default: var(--primary-400);
     --link-hover: var(--primary-300);
     --link-active: var(--primary-200);
     --link-visited: var(--neutral-400);
   
     /* Skeleton Loading — Dark Mode */
     --skeleton-base: var(--neutral-800);
     --skeleton-shimmer: var(--neutral-700);
   
     /* Scrollbar — Dark Mode */
     --scrollbar-track: var(--neutral-900);
     --scrollbar-thumb: var(--neutral-600);
     --scrollbar-thumb-hover: var(--neutral-500);
   
     /* Tooltip — Dark Mode */
     --tooltip-bg: var(--neutral-100);
     --tooltip-text: var(--neutral-900);
   
     /* Code — Dark Mode */
     --code-bg: var(--neutral-900);
     --code-text: var(--danger-400);
     --code-block-bg: var(--neutral-800);
     --code-block-text: var(--neutral-100);
   
     /* Icons — Dark Mode */
     --icon-primary: var(--neutral-50);
     --icon-secondary: var(--neutral-400);
     --icon-muted: var(--neutral-600);
     --icon-brand: var(--primary-400);
   }
   
   /* =============================================================================
      2. BASE STYLES
      ============================================================================= */
   
   *, *::before, *::after {
     box-sizing: border-box;
     margin: 0;
     padding: 0;
   }
   
   html {
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     scroll-behavior: smooth;
   }
   
   body {
     font-family: var(--font-text);
     font-size: var(--type-body-md);
     line-height: var(--line-normal);
     color: var(--text-primary);
     background-color: var(--surface-background);
     min-height: 100vh;
   }
   
   h1, h2, h3, h4, h5, h6 {
     font-family: var(--font-display);
     font-weight: var(--weight-semibold);
     line-height: var(--line-tight);
   }
   
   h1, .h1 { font-size: var(--type-display-lg); }
   h2, .h2 { font-size: var(--type-display-sm); }
   h3, .h3 { font-size: var(--type-heading-1); }
   h4, .h4 { font-size: var(--type-heading-2); }
   h5, .h5 { font-size: var(--type-heading-3); }
   
   a {
     color: var(--secondary-bright);
     text-decoration: none;
     transition: color var(--timing-fast);
   }
   
   a:hover {
     color: var(--secondary-deep-azure);
     text-decoration: underline;
   }
   
   :focus-visible {
     outline: 2px solid var(--focus-ring-color);
     outline-offset: 2px;
   }
   
   :focus:not(:focus-visible) {
     outline: none;
   }
   
   .sr-only {
     position: absolute;
     width: 1px;
     height: 1px;
     padding: 0;
     margin: -1px;
     overflow: hidden;
     clip: rect(0, 0, 0, 0);
     white-space: nowrap;
     border: 0;
   }
   
   /* =============================================================================
      3. LAYOUT
      ============================================================================= */
   
   .container {
     width: 100%;
     max-width: var(--layout-container-max);
     margin: 0 auto;
     padding: 0 var(--layout-container-padding-x);
   }
   
   .grid {
     display: grid;
     gap: var(--layout-gutter);
   }
   
   .grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
   .grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
   .grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
   
   @media (max-width: 767px) {
     .grid-cols-2,
     .grid-cols-3,
     .grid-cols-4 {
       grid-template-columns: 1fr;
     }
   }
   
   .flex { display: flex; }
   .flex-col { flex-direction: column; }
   .items-center { align-items: center; }
   .justify-center { justify-content: center; }
   .justify-between { justify-content: space-between; }
   
   /* Gap utilities - Complete spacing scale */
   .gap-xxs { gap: var(--space-xxs); }
   .gap-xs  { gap: var(--space-xs); }
   .gap-s   { gap: var(--space-s); }
   .gap-m   { gap: var(--space-m); }
   .gap-l   { gap: var(--space-l); }
   .gap-xl  { gap: var(--space-xl); }
   .gap-xxl { gap: var(--space-xxl); }
   .gap-xxxl { gap: var(--space-xxxl); }
   .gap-section { gap: var(--space-section); }
   
   /* Section helpers */
   .section {
     padding-top: var(--layout-section-default);
     padding-bottom: var(--layout-section-default);
   }
   
   .section-tight {
     padding-top: var(--layout-section-tight);
     padding-bottom: var(--layout-section-tight);
   }
   
   .section-loose {
     padding-top: var(--layout-section-loose);
     padding-bottom: var(--layout-section-loose);
   }
   
   /* Optional: hero variant */
   .section-hero {
     padding-top: var(--space-ultra);
     padding-bottom: var(--space-ultra);
   }
   /* Responsive layout overrides */

/* Tablet and down: tighten container and gutters a bit */
@media (max-width: 1199px) {
  :root {
    --layout-container-max: 100%;
    --layout-container-padding-x: var(--space-m); /* 16px */
    --layout-gutter: var(--space-m);              /* 16px */
    --layout-section-default: var(--space-section); /* 64px */
  }
}

/* Mobile: single-column, comfortable edge padding */
@media (max-width: 767px) {
  :root {
    --layout-container-max: 100%;
    --layout-container-padding-x: var(--space-m);  /* 16px */
    --layout-gutter: var(--space-m);               /* 16px */
    /* Optionally keep sections a bit more “story-like” */
    --layout-section-default: var(--space-mega);   /* 80px */
  }
}
/* Responsive layout overrides */

@media (max-width: 1199px) {
  :root {
    --layout-container-max: 100%;
    --layout-container-padding-x: var(--space-m); /* 16px */
    --layout-gutter: var(--space-m);              /* 16px */
    --layout-section-default: var(--space-section); /* 64px */
  }
}

@media (max-width: 767px) {
  :root {
    --layout-container-max: 100%;
    --layout-container-padding-x: var(--space-m);  /* 16px */
    --layout-gutter: var(--space-m);               /* 16px */
    --layout-section-default: var(--space-mega);   /* 80px */
  }
}

   
   /* =============================================================================
      4. BUTTONS
      ============================================================================= */
   
   .btn {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: var(--space-xs);
     font-family: var(--font-text);
     font-weight: var(--weight-medium);
     text-decoration: none;
     white-space: nowrap;
     border: 2px solid transparent;
     border-radius: var(--radius-md);
     cursor: pointer;
     transition: all var(--timing-fast) var(--ease-default);
     user-select: none;
   }
   
   .btn:focus-visible {
     outline: none;
     box-shadow: 0 0 0 3px var(--focus-ring-color);
   }
   
   .btn:disabled {
     opacity: 0.5;
     cursor: not-allowed;
     pointer-events: none;
   }
   
   /* Button Sizes */
   .btn-lg {
     height: 48px;
     min-width: 120px;
     padding: 0 var(--space-l);
     font-size: var(--type-body-lg);
   }
   
   .btn-md {
     height: 44px;
     min-width: 100px;
     padding: 0 var(--space-m);
     font-size: var(--type-body-md);
   }
   
   .btn-sm {
     height: 36px;
     min-width: 80px;
     padding: 0 var(--space-s);
     font-size: var(--type-body-sm);
   }
   
   .btn .icon { font-size: 20px; }
   .btn-lg .icon { font-size: 24px; }
   .btn-sm .icon { font-size: 18px; }
   
   /* Primary Button */
   .btn-primary {
     background: var(--primary-vivid);
     color: white;
     border-color: var(--primary-vivid);
     box-shadow: 0 2px 4px hsl(275, 86%, 36%, 0.2);
   }
   
   .btn-primary:hover:not(:disabled) {
     background: var(--primary-royal-grape);
     border-color: var(--primary-royal-grape);
     transform: translateY(-1px);
     box-shadow: 0 4px 8px hsl(275, 86%, 36%, 0.25);
   }
   
   .btn-primary:active:not(:disabled) {
     background: var(--primary-deep-plum);
     transform: translateY(0);
   }
   
   /* Secondary Button */
   .btn-secondary {
     background: var(--secondary-bright);
     color: white;
     border-color: var(--secondary-bright);
   }
   
   .btn-secondary:hover:not(:disabled) {
     background: var(--secondary-deep-azure);
     border-color: var(--secondary-deep-azure);
     transform: translateY(-1px);
   }
   
   /* Ghost Button */
   .btn-ghost {
     background: transparent;
     color: var(--text-secondary);
     border-color: transparent;
   }
   
   .btn-ghost:hover:not(:disabled) {
     background: var(--surface-variant);
     color: var(--text-primary);
   }
   
   .btn-ghost-outlined {
     background: transparent;
     color: var(--text-secondary);
     border-color: var(--surface-border);
   }
   
   .btn-ghost-outlined:hover:not(:disabled) {
     background: var(--surface-variant);
     border-color: var(--text-tertiary);
   }
   
   /* Danger Button */
   .btn-danger {
     background: var(--zivvy-danger-500);
     color: white;
     border-color: var(--zivvy-danger-500);
   }
   
   .btn-danger:hover:not(:disabled) {
     background: var(--zivvy-danger-600);
     border-color: var(--zivvy-danger-600);
     transform: translateY(-1px);
   }
   
   .btn-danger-ghost {
     background: transparent;
     color: var(--zivvy-danger-600);
   }
   
   .btn-danger-ghost:hover:not(:disabled) {
     background: var(--zivvy-danger-50);
   }
   
   /* Success Button */
   .btn-success {
     background: var(--zivvy-success-500);
     color: white;
     border-color: var(--zivvy-success-500);
   }
   
   .btn-success:hover:not(:disabled) {
     background: var(--zivvy-success-600);
     border-color: var(--zivvy-success-600);
     transform: translateY(-1px);
   }
   
   /* Icon Button */
   .btn-icon {
     width: 44px;
     height: 44px;
     min-width: 44px;
     padding: 0;
     border-radius: var(--radius-md);
     background: var(--surface-variant);
     color: var(--text-secondary);
     border-color: transparent;
   }
   
   .btn-icon .icon { font-size: 24px; }
   
   .btn-icon:hover:not(:disabled) {
     background: var(--surface-border);
     color: var(--text-primary);
   }
   
   .btn-icon-ghost {
     width: 44px;
     height: 44px;
     min-width: 44px;
     padding: 0;
     background: transparent;
     border: none;
     border-radius: var(--radius-md);
     color: var(--text-secondary);
     cursor: pointer;
     transition: all var(--timing-fast);
   }
   
   .btn-icon-ghost:hover:not(:disabled) {
     background: var(--surface-variant);
     color: var(--text-primary);
   }
   
   .btn-icon-sm {
     width: 36px;
     height: 36px;
     min-width: 36px;
   }
   
   .btn-icon-sm .icon { font-size: 20px; }
   
   .btn-block { width: 100%; }
   
   /* Button Group */
   .btn-group {
     display: inline-flex;
     border-radius: var(--radius-md);
     overflow: hidden;
   }
   
   .btn-group-item {
     height: 44px;
     padding: 0 var(--space-m);
     font-size: var(--type-body-md);
     font-weight: var(--weight-medium);
     background: white;
     color: var(--text-secondary);
     border: 1px solid var(--surface-border);
     border-radius: 0;
     margin-left: -1px;
     cursor: pointer;
     transition: all var(--timing-fast);
   }
   
   .btn-group-item:first-child {
     margin-left: 0;
     border-radius: var(--radius-md) 0 0 var(--radius-md);
   }
   
   .btn-group-item:last-child {
     border-radius: 0 var(--radius-md) var(--radius-md) 0;
   }
   
   .btn-group-item:hover:not(.active) {
     background: var(--surface-variant);
     color: var(--text-primary);
   }
   
   .btn-group-item.active {
     background: var(--primary-vivid);
     color: white;
     border-color: var(--primary-vivid);
     z-index: 1;
   }
   
   /* Loading Button */
   .btn-loading {
     pointer-events: none;
     background: var(--calm-primary);
     border-color: var(--calm-primary);
   }
   
   .btn-spinner {
     width: 20px;
     height: 20px;
     border: 2px solid currentColor;
     border-right-color: transparent;
     border-radius: var(--radius-full);
     animation: spin 0.75s linear infinite;
   }
   
   /* FAB */
   .fab {
     width: 56px;
     height: 56px;
     background: var(--primary-vivid);
     color: white;
     border: none;
     border-radius: var(--radius-full);
     box-shadow: 0 4px 8px hsl(275, 86%, 36%, 0.3);
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     transition: all var(--timing-fast);
     position: fixed;
     bottom: var(--space-xl);
     right: var(--space-xl);
     z-index: 100;
   }
   
   .fab .icon { font-size: 24px; }
   
   .fab:hover {
     background: var(--primary-royal-grape);
     transform: scale(1.05);
   }
   
   @media (max-width: 767px) {
     .btn-lg,
     .btn-md {
       height: 56px;
     }
     .btn-icon {
       width: 56px;
       height: 56px;
       min-width: 56px;
     }
   }
   
   /* =============================================================================
      5. FORMS
      ============================================================================= */
   
   /* ... your forms, cards, badges, etc., continue unchanged ... */
   
/* =============================================================================
   5. FORMS
   ============================================================================= */

.form-group {
  margin-bottom: var(--space-l);
}

.label {
  display: block;
  font-size: var(--type-body-sm);
  font-weight: var(--weight-medium);
  color: var(--text-primary);
  margin-bottom: var(--space-xs);
}

.label-required::after {
  content: ' *';
  color: var(--zivvy-danger-500);
}

.help-text {
  display: block;
  font-size: var(--type-body-sm);
  color: var(--text-secondary);
  margin-top: var(--space-xxs);
}

.input {
  width: 100%;
  height: 44px;
  padding: 0 var(--space-m);
  font-family: var(--font-text);
  font-size: var(--type-body-md);
  color: var(--text-primary);
  background: white;
  border: 2px solid var(--surface-border);
  border-radius: var(--radius-md);
  transition: all var(--timing-fast);
}

.input::placeholder {
  color: var(--text-tertiary);
}

.input:hover:not(:disabled):not(:focus) {
  border-color: var(--text-tertiary);
}

.input:focus {
  outline: none;
  border-color: var(--primary-vivid);
  box-shadow: 0 0 0 3px var(--primary-lavender-ice);
}

.input:disabled {
  background: var(--surface-variant);
  color: var(--text-tertiary);
  cursor: not-allowed;
}

.input-error {
  border-color: var(--zivvy-danger-500);
  background: var(--zivvy-danger-50);
}

.input-error:focus {
  border-color: var(--zivvy-danger-500);
  box-shadow: 0 0 0 3px var(--zivvy-danger-100);
}

.input-success {
  border-color: var(--zivvy-success-500);
  background: var(--zivvy-success-50);
}

.textarea {
  width: 100%;
  min-height: 120px;
  padding: var(--space-m);
  font-family: var(--font-text);
  font-size: var(--type-body-md);
  color: var(--text-primary);
  background: white;
  border: 2px solid var(--surface-border);
  border-radius: var(--radius-md);
  resize: vertical;
  transition: all var(--timing-fast);
}

.textarea:focus {
  outline: none;
  border-color: var(--primary-vivid);
  box-shadow: 0 0 0 3px var(--primary-lavender-ice);
}

.select {
  width: 100%;
  height: 44px;
  padding: 0 44px 0 var(--space-m);
  font-family: var(--font-text);
  font-size: var(--type-body-md);
  color: var(--text-primary);
  background: white;
  border: 2px solid var(--surface-border);
  border-radius: var(--radius-md);
  appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='%23999999'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-s) center;
  transition: all var(--timing-fast);
}

.select:focus {
  outline: none;
  border-color: var(--primary-vivid);
  box-shadow: 0 0 0 3px var(--primary-lavender-ice);
}

/* Checkbox */
.checkbox-wrapper {
  display: flex;
  align-items: flex-start;
  gap: var(--space-s);
  min-height: 44px;
  padding: var(--space-xs) 0;
  cursor: pointer;
}

.checkbox {
  position: absolute;
  opacity: 0;
}

.checkbox-control {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: white;
  border: 2px solid var(--surface-border);
  border-radius: var(--radius-sm);
  transition: all var(--timing-fast);
}

.checkbox-icon {
  font-size: 16px;
  color: white;
  opacity: 0;
  transform: scale(0);
  transition: all var(--timing-fast) var(--ease-spring);
}

.checkbox:checked + .checkbox-control {
  background: var(--primary-vivid);
  border-color: var(--primary-vivid);
}

.checkbox:checked + .checkbox-control .checkbox-icon {
  opacity: 1;
  transform: scale(1);
}

.checkbox:focus-visible + .checkbox-control {
  box-shadow: 0 0 0 3px var(--primary-lavender-ice);
}

/* Radio */
.radio-wrapper {
  display: flex;
  align-items: flex-start;
  gap: var(--space-s);
  min-height: 44px;
  padding: var(--space-xs) 0;
  cursor: pointer;
}

.radio {
  position: absolute;
  opacity: 0;
}

.radio-control {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: white;
  border: 2px solid var(--surface-border);
  border-radius: var(--radius-full);
  transition: all var(--timing-fast);
}

.radio-dot {
  width: 10px;
  height: 10px;
  background: var(--primary-vivid);
  border-radius: var(--radius-full);
  opacity: 0;
  transform: scale(0);
  transition: all var(--timing-fast) var(--ease-spring);
}

.radio:checked + .radio-control {
  border-color: var(--primary-vivid);
}

.radio:checked + .radio-control .radio-dot {
  opacity: 1;
  transform: scale(1);
}

/* Toggle */
.toggle-wrapper {
  display: flex;
  align-items: center;
  gap: var(--space-s);
  min-height: 44px;
  cursor: pointer;
}

.toggle {
  position: absolute;
  opacity: 0;
}

.toggle-control {
  width: 48px;
  height: 28px;
  background: var(--surface-border);
  border-radius: var(--radius-full);
  position: relative;
  transition: background var(--timing-fast);
}

.toggle-control::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 24px;
  height: 24px;
  background: white;
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-2);
  transition: transform var(--timing-fast);
}

.toggle:checked + .toggle-control {
  background: var(--primary-vivid);
}

.toggle:checked + .toggle-control::after {
  transform: translateX(20px);
}

.validation-message {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--type-body-sm);
  margin-top: var(--space-xs);
}

.validation-error { color: var(--zivvy-danger-600); }
.validation-success { color: var(--zivvy-success-600); }

@media (max-width: 767px) {
  .input, .textarea, .select { height: 56px; font-size: var(--type-body-lg); }
}

/* =============================================================================
   6. CARDS
   ============================================================================= */

.card {
  background: white;
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: box-shadow var(--timing-fast);
}

.card-hoverable:hover {
  box-shadow: var(--shadow-3);
}

.card-clickable {
  cursor: pointer;
}

.card-clickable:hover {
  box-shadow: var(--shadow-3);
  transform: translateY(-2px);
}

.card-header {
  padding: var(--space-l);
  border-bottom: 1px solid var(--surface-border);
}

.card-body {
  padding: var(--space-l);
}

.card-footer {
  padding: var(--space-l);
  border-top: 1px solid var(--surface-border);
  background: var(--surface-variant);
}

.card-title {
  font-size: var(--type-heading-3);
  font-weight: var(--weight-semibold);
  margin: 0;
}

.card-primary { border-left: 4px solid var(--primary-vivid); }
.card-success { border-left: 4px solid var(--zivvy-success-500); }
.card-warning { border-left: 4px solid var(--zivvy-warning-500); }
.card-danger { border-left: 4px solid var(--zivvy-danger-500); }

/* =============================================================================
   7. BADGES & TAGS
   ============================================================================= */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xxs);
  padding: var(--space-xxs) var(--space-s);
  font-size: var(--type-body-sm);
  font-weight: var(--weight-medium);
  border-radius: var(--radius-full);
  white-space: nowrap;
}

.badge-success { background: var(--zivvy-success-100); color: var(--zivvy-success-700); }
.badge-warning { background: var(--zivvy-warning-100); color: var(--zivvy-warning-800); }
.badge-danger { background: var(--zivvy-danger-100); color: var(--zivvy-danger-700); }
.badge-info { background: var(--secondary-arctic-glow); color: var(--secondary-deep-azure); }
.badge-neutral { background: var(--surface-variant); color: var(--text-secondary); }
.badge-primary { background: var(--primary-lavender-ice); color: var(--primary-vivid); }

.badge-count {
  min-width: 20px;
  height: 20px;
  padding: 0 var(--space-xs);
  font-size: var(--type-body-xs);
  font-weight: var(--weight-bold);
  background: var(--primary-vivid);
  color: white;
  justify-content: center;
}

.badge-belt { padding: var(--space-xs) var(--space-m); font-weight: var(--weight-semibold); }
.badge-belt-white { background: hsl(0, 0%, 96%); color: hsl(0, 0%, 20%); border: 1px solid hsl(0, 0%, 87%); }
.badge-belt-yellow { background: hsl(48, 96%, 89%); color: hsl(23, 82%, 31%); }
.badge-belt-orange { background: hsl(34, 100%, 92%); color: hsl(15, 79%, 34%); }
.badge-belt-green { background: hsl(149, 80%, 90%); color: hsl(163, 88%, 20%); }
.badge-belt-blue { background: hsl(214, 95%, 93%); color: hsl(226, 71%, 40%); }
.badge-belt-brown { background: hsl(24, 29%, 78%); color: hsl(14, 26%, 29%); }
.badge-belt-black { background: hsl(215, 28%, 17%); color: white; }

.tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-s);
  font-size: var(--type-body-sm);
  background: var(--surface-variant);
  color: var(--text-primary);
  border-radius: var(--radius-md);
}

/* =============================================================================
   8. AVATARS
   ============================================================================= */

.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background: var(--primary-lavender-ice);
  color: var(--primary-vivid);
  font-weight: var(--weight-semibold);
  overflow: hidden;
  flex-shrink: 0;
}

.avatar img { width: 100%; height: 100%; object-fit: cover; }

.avatar-xs { width: 24px; height: 24px; font-size: 10px; }
.avatar-sm { width: 32px; height: 32px; font-size: 12px; }
.avatar-md { width: 40px; height: 40px; font-size: 14px; }
.avatar-lg { width: 56px; height: 56px; font-size: 18px; }
.avatar-xl { width: 80px; height: 80px; font-size: 24px; }

.avatar-with-status { position: relative; display: inline-block; }

.avatar-status {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 12px;
  height: 12px;
  border-radius: var(--radius-full);
  border: 2px solid white;
}

.avatar-status-online { background: var(--zivvy-success-500); }
.avatar-status-offline { background: var(--text-tertiary); }
.avatar-status-away { background: var(--zivvy-warning-500); }
.avatar-status-busy { background: var(--zivvy-danger-500); }

.avatar-group { display: flex; }
.avatar-group .avatar { border: 2px solid white; margin-left: -8px; }
.avatar-group .avatar:first-child { margin-left: 0; }

/* =============================================================================
   9. TABLES
   ============================================================================= */

.table-wrapper {
  overflow-x: auto;
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-lg);
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--type-body-md);
}

.data-table thead { background: var(--surface-variant); }

.data-table th {
  padding: var(--space-m);
  text-align: left;
  font-weight: var(--weight-semibold);
  color: var(--text-secondary);
  font-size: var(--type-body-sm);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  border-bottom: 1px solid var(--surface-border);
}

.data-table td {
  padding: var(--space-m);
  border-bottom: 1px solid var(--surface-border);
  vertical-align: middle;
}

.data-table tbody tr:hover { background: var(--calm-light); }
.data-table tbody tr:last-child td { border-bottom: none; }

.table-cell-user { display: flex; align-items: center; gap: var(--space-s); }
.table-cell-primary { font-weight: var(--weight-medium); }
.table-cell-secondary { font-size: var(--type-body-sm); color: var(--text-tertiary); }
.table-actions { display: flex; gap: var(--space-xxs); justify-content: flex-end; }

.table-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-m);
}

.status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  margin-right: var(--space-xs);
}

.status-dot-success { background: var(--zivvy-success-500); }
.status-dot-warning { background: var(--zivvy-warning-500); }
.status-dot-danger { background: var(--zivvy-danger-500); }

/* =============================================================================
   10. NAVIGATION
   ============================================================================= */

.nav-primary {
  display: flex;
  align-items: center;
  height: 64px;
  padding: 0 var(--space-l);
  background: white;
  border-bottom: 1px solid var(--surface-border);
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: var(--space-s);
  font-size: var(--type-heading-3);
  font-weight: var(--weight-bold);
  color: var(--primary-vivid);
  text-decoration: none;
}

.nav-sidebar {
  width: 256px;
  height: 100vh;
  background: white;
  border-right: 1px solid var(--surface-border);
  padding: var(--space-m);
}

.nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-s);
  padding: var(--space-s) var(--space-m);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  text-decoration: none;
  transition: all var(--timing-fast);
  cursor: pointer;
}

.nav-item:hover {
  background: var(--surface-variant);
  color: var(--text-primary);
}

.nav-item.active {
  background: var(--primary-lavender-ice);
  color: var(--primary-vivid);
}

.nav-item .icon { font-size: 20px; }

.breadcrumbs {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--type-body-sm);
}

.breadcrumb-separator { color: var(--text-tertiary); }

.pagination { display: flex; gap: var(--space-xxs); }

.pagination-btn {
  min-width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-md);
  background: white;
  color: var(--text-secondary);
  font-size: var(--type-body-sm);
  cursor: pointer;
  transition: all var(--timing-fast);
}

.pagination-btn:hover:not(:disabled):not(.pagination-btn-active) {
  background: var(--surface-variant);
}

.pagination-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.pagination-btn-active {
  background: var(--primary-vivid);
  color: white;
  border-color: var(--primary-vivid);
}

.tabs {
  display: flex;
  gap: var(--space-xs);
  border-bottom: 1px solid var(--surface-border);
}

.tab {
  padding: var(--space-m) var(--space-l);
  font-size: var(--type-body-md);
  font-weight: var(--weight-medium);
  color: var(--text-secondary);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  transition: all var(--timing-fast);
}

.tab:hover { color: var(--text-primary); }

.tab.active {
  color: var(--primary-vivid);
  border-bottom-color: var(--primary-vivid);
}

/* =============================================================================
   11. MODALS & OVERLAYS
   ============================================================================= */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: hsl(0, 0%, 0%, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: var(--space-m);
  animation: fade-in var(--timing-fast);
}

.modal {
  background: white;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-5);
  max-width: 500px;
  width: 100%;
  max-height: 90vh;
  overflow: auto;
  animation: modal-slide-in var(--timing-base) var(--ease-spring);
}

@keyframes modal-slide-in {
  from { opacity: 0; transform: translateY(-20px) scale(0.95); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.modal-sm { max-width: 400px; }
.modal-lg { max-width: 700px; }

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-l);
  border-bottom: 1px solid var(--surface-border);
}

.modal-title {
  font-size: var(--type-heading-3);
  font-weight: var(--weight-semibold);
  margin: 0;
}

.modal-close {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: var(--radius-md);
  color: var(--text-tertiary);
  cursor: pointer;
}

.modal-close:hover {
  background: var(--surface-variant);
  color: var(--text-primary);
}

.modal-body { padding: var(--space-l); }

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-s);
  padding: var(--space-l);
  border-top: 1px solid var(--surface-border);
}

.tooltip {
  position: absolute;
  padding: var(--space-xs) var(--space-s);
  background: var(--text-primary);
  color: white;
  font-size: var(--type-body-sm);
  border-radius: var(--radius-sm);
  z-index: 1000;
}

.dropdown-menu {
  position: absolute;
  min-width: 180px;
  background: white;
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-3);
  padding: var(--space-xs);
  z-index: 1001;
  animation: dropdown-in var(--timing-fast);
}

@keyframes dropdown-in {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: var(--space-s);
  padding: var(--space-s) var(--space-m);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: var(--type-body-md);
  cursor: pointer;
  text-decoration: none;
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
}

.dropdown-item:hover { background: var(--surface-variant); }
.dropdown-item .icon { color: var(--text-tertiary); font-size: 20px; }
.dropdown-divider { height: 1px; background: var(--surface-border); margin: var(--space-xs) 0; }
.dropdown-item-danger { color: var(--zivvy-danger-600); }
.dropdown-item-danger:hover { background: var(--zivvy-danger-50); }

/* =============================================================================
   12. FEEDBACK (Toasts, Alerts, Progress)
   ============================================================================= */

.toast-container {
  position: fixed;
  bottom: var(--space-xl);
  right: var(--space-xl);
  z-index: 1000;
  display: flex;
  flex-direction: column-reverse;
  gap: var(--space-s);
  max-width: 400px;
  pointer-events: none;
}

.toast-container > * { pointer-events: auto; }

.toast {
  display: flex;
  align-items: flex-start;
  gap: var(--space-s);
  padding: var(--space-m);
  background: white;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-4);
  border-left: 4px solid;
  animation: toast-slide-in var(--timing-base) var(--ease-spring);
}

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

.toast-icon { flex-shrink: 0; font-size: 24px; }
.toast-content { flex: 1; min-width: 0; }
.toast-message { font-size: var(--type-body-md); font-weight: var(--weight-medium); }
.toast-description { font-size: var(--type-body-sm); color: var(--text-secondary); margin-top: 2px; }

.toast-action {
  padding: var(--space-xs) var(--space-s);
  font-size: var(--type-body-sm);
  font-weight: var(--weight-semibold);
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.toast-close {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--text-tertiary);
  cursor: pointer;
}

.toast-close:hover { background: var(--surface-variant); color: var(--text-primary); }

.toast-success { border-left-color: var(--zivvy-success-500); }
.toast-success .toast-icon { color: var(--zivvy-success-500); }
.toast-success .toast-action { color: var(--zivvy-success-600); }

.toast-warning { border-left-color: var(--zivvy-warning-500); }
.toast-warning .toast-icon { color: var(--zivvy-warning-600); }
.toast-warning .toast-action { color: var(--zivvy-warning-700); }

.toast-danger { border-left-color: var(--zivvy-danger-500); }
.toast-danger .toast-icon { color: var(--zivvy-danger-500); }
.toast-danger .toast-action { color: var(--zivvy-danger-600); }

.toast-info { border-left-color: var(--info-primary); }
.toast-info .toast-icon { color: var(--info-primary); }
.toast-info .toast-action { color: var(--secondary-deep-azure); }

/* Alert */
.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-m);
  padding: var(--space-m) var(--space-l);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-m);
}

.alert-icon { flex-shrink: 0; font-size: 24px; }
.alert-content { flex: 1; }
.alert-title { font-size: var(--type-body-md); font-weight: var(--weight-semibold); margin-bottom: 2px; }
.alert-message { font-size: var(--type-body-sm); margin: 0; }

.alert-close {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.alert-info { background: var(--info-light); border: 1px solid var(--secondary-ice-pool); }
.alert-info .alert-icon { color: var(--info-primary); }
.alert-info .alert-title { color: var(--secondary-deep-azure); }

.alert-warning { background: var(--warning-light); border: 1px solid var(--zivvy-warning-200); }
.alert-warning .alert-icon { color: var(--warning-primary); }
.alert-warning .alert-title { color: var(--zivvy-warning-800); }

.alert-danger { background: var(--urgent-light); border: 1px solid var(--zivvy-danger-200); }
.alert-danger .alert-icon { color: var(--urgent-primary); }
.alert-danger .alert-title { color: var(--zivvy-danger-800); }

.alert-success { background: var(--success-light); border: 1px solid var(--zivvy-success-200); }
.alert-success .alert-icon { color: var(--success-primary); }
.alert-success .alert-title { color: var(--zivvy-success-800); }

/* Progress */
.progress {
  height: 8px;
  background: var(--surface-variant);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--calm-primary), var(--primary-amethyst));
  border-radius: var(--radius-full);
  transition: width var(--timing-base);
}

.progress-indeterminate .progress-bar {
  width: 30%;
  animation: progress-indeterminate 1.5s ease-in-out infinite;
}

@keyframes progress-indeterminate {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(400%); }
}

@media (max-width: 767px) {
  .toast-container {
    bottom: var(--space-m);
    left: var(--space-m);
    right: var(--space-m);
    max-width: none;
  }
}

/* =============================================================================
   13. LOADING STATES (VALLEY - Critical!)
   ============================================================================= */

.spinner {
  width: 24px;
  height: 24px;
  border: 3px solid var(--calm-light);
  border-top-color: var(--calm-primary);
  border-radius: var(--radius-full);
  animation: spin 0.8s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

.spinner-sm { width: 16px; height: 16px; border-width: 2px; }
.spinner-md { width: 32px; height: 32px; }
.spinner-lg { width: 48px; height: 48px; border-width: 4px; }

.loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-m);
  padding: var(--space-xl);
}

.loading-text {
  font-size: var(--type-body-md);
  color: var(--text-secondary);
  animation: breathe-text 2s ease-in-out infinite;
}

@keyframes breathe-text {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}

.breathing-circle {
  width: 64px;
  height: 64px;
  background: linear-gradient(135deg, var(--calm-primary), var(--secondary-bright));
  border-radius: var(--radius-full);
  animation: breathe 4s ease-in-out infinite;
}

@keyframes breathe {
  0%, 100% { transform: scale(1); opacity: 0.6; }
  50% { transform: scale(1.15); opacity: 1; }
}

.pulse-dots { display: flex; gap: var(--space-xs); }

.pulse-dot {
  width: 10px;
  height: 10px;
  background: var(--calm-primary);
  border-radius: var(--radius-full);
  animation: pulse-bounce 1.4s ease-in-out infinite;
}

.pulse-dot:nth-child(1) { animation-delay: 0ms; }
.pulse-dot:nth-child(2) { animation-delay: 160ms; }
.pulse-dot:nth-child(3) { animation-delay: 320ms; }

@keyframes pulse-bounce {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.5; }
  40% { transform: scale(1); opacity: 1; }
}

.loading-overlay {
  position: fixed;
  inset: 0;
  background: hsl(257, 100%, 99%, 0.95);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-l);
  z-index: 9999;
}

.skeleton {
  background: linear-gradient(90deg, var(--calm-light) 0%, hsl(260, 100%, 97%) 50%, var(--calm-light) 100%);
  background-size: 200% 100%;
  animation: shimmer 2s ease-in-out infinite;
  border-radius: var(--radius-sm);
}

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.skeleton-avatar { width: 48px; height: 48px; border-radius: var(--radius-full); }
.skeleton-text { height: 16px; }
.skeleton-text-title { height: 20px; width: 60%; }
.skeleton-text-short { width: 40%; }

.skeleton-card {
  display: flex;
  gap: var(--space-m);
  padding: var(--space-l);
  background: white;
  border-radius: var(--radius-lg);
  border: 1px solid var(--surface-border);
}

.skeleton-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
}

/* =============================================================================
   14. EMPTY & SUCCESS STATES
   ============================================================================= */

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--space-xxl) var(--space-l);
  max-width: 400px;
  margin: 0 auto;
}

.empty-state-icon {
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--calm-light);
  border-radius: var(--radius-full);
  margin-bottom: var(--space-l);
}

.empty-state-icon .material-symbols-rounded {
  font-size: 40px;
  color: var(--calm-primary);
}

.empty-state-icon-muted { background: var(--surface-variant); }
.empty-state-icon-muted .material-symbols-rounded { color: var(--text-tertiary); }

.empty-state-title {
  font-size: var(--type-heading-3);
  font-weight: var(--weight-semibold);
  margin: 0 0 var(--space-xs);
}

.empty-state-description {
  font-size: var(--type-body-md);
  color: var(--text-secondary);
  line-height: var(--line-relaxed);
  margin: 0 0 var(--space-l);
}

.success-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--space-xxl);
  max-width: 500px;
  margin: 0 auto;
}

.success-icon {
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--success-light);
  border-radius: var(--radius-full);
  margin-bottom: var(--space-l);
  animation: success-pop 0.6s var(--ease-spring);
}

@keyframes success-pop {
  0% { transform: scale(0); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

.success-icon .material-symbols-rounded {
  font-size: 48px;
  color: var(--success-primary);
}

.success-title {
  font-size: var(--type-display-sm);
  font-weight: var(--weight-bold);
  margin: 0 0 var(--space-s);
}

.success-message {
  font-size: var(--type-body-lg);
  color: var(--text-secondary);
  margin: 0 0 var(--space-l);
}

.achievement-badge {
  width: 96px;
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--tertiary-gold), var(--tertiary-hot-sand));
  border-radius: var(--radius-full);
  margin-bottom: var(--space-l);
  animation: achievement-shine 2s ease-in-out infinite;
}

@keyframes achievement-shine {
  0%, 100% { box-shadow: 0 0 20px hsl(51, 100%, 50%, 0.4); }
  50% { box-shadow: 0 0 40px hsl(51, 100%, 50%, 0.6); }
}

.achievement-badge .material-symbols-rounded {
  font-size: 48px;
  color: white;
}

/* =============================================================================
   15. UTILITIES
   ============================================================================= */

/* Spacing - Complete Scale */
.m-0 { margin: 0; }
.mt-xxs { margin-top: var(--space-xxs); }
.mt-xs { margin-top: var(--space-xs); }
.mt-s { margin-top: var(--space-s); }
.mt-m { margin-top: var(--space-m); }
.mt-l { margin-top: var(--space-l); }
.mt-xl { margin-top: var(--space-xl); }
.mt-xxl { margin-top: var(--space-xxl); }
.mt-xxxl { margin-top: var(--space-xxxl); }
.mt-section { margin-top: var(--space-section); }
.mt-mega { margin-top: var(--space-mega); }
.mt-ultra { margin-top: var(--space-ultra); }

.mb-xxs { margin-bottom: var(--space-xxs); }
.mb-xs { margin-bottom: var(--space-xs); }
.mb-s { margin-bottom: var(--space-s); }
.mb-m { margin-bottom: var(--space-m); }
.mb-l { margin-bottom: var(--space-l); }
.mb-xl { margin-bottom: var(--space-xl); }
.mb-xxl { margin-bottom: var(--space-xxl); }
.mb-xxxl { margin-bottom: var(--space-xxxl); }
.mb-section { margin-bottom: var(--space-section); }
.mb-mega { margin-bottom: var(--space-mega); }
.mb-ultra { margin-bottom: var(--space-ultra); }

.mx-auto { margin-left: auto; margin-right: auto; }

.p-xxs { padding: var(--space-xxs); }
.p-xs { padding: var(--space-xs); }
.p-s { padding: var(--space-s); }
.p-m { padding: var(--space-m); }
.p-l { padding: var(--space-l); }
.p-xl { padding: var(--space-xl); }
.p-xxl { padding: var(--space-xxl); }
.p-xxxl { padding: var(--space-xxxl); }

.px-xxs { padding-left: var(--space-xxs); padding-right: var(--space-xxs); }
.px-xs { padding-left: var(--space-xs); padding-right: var(--space-xs); }
.px-s { padding-left: var(--space-s); padding-right: var(--space-s); }
.px-m { padding-left: var(--space-m); padding-right: var(--space-m); }
.px-l { padding-left: var(--space-l); padding-right: var(--space-l); }
.px-xl { padding-left: var(--space-xl); padding-right: var(--space-xl); }

.py-xxs { padding-top: var(--space-xxs); padding-bottom: var(--space-xxs); }
.py-xs { padding-top: var(--space-xs); padding-bottom: var(--space-xs); }
.py-s { padding-top: var(--space-s); padding-bottom: var(--space-s); }
.py-m { padding-top: var(--space-m); padding-bottom: var(--space-m); }
.py-l { padding-top: var(--space-l); padding-bottom: var(--space-l); }
.py-xl { padding-top: var(--space-xl); padding-bottom: var(--space-xl); }
.py-xxl { padding-top: var(--space-xxl); padding-bottom: var(--space-xxl); }

/* Squircle utilities - Experimental corner-shape property */
.squircle {
  border-radius: var(--radius-squircle);
}

@supports (corner-shape: squircle) {
  .squircle {
    corner-shape: squircle;
  }
}

.squircle-sm {
  border-radius: var(--radius-squircle-sm);
}

@supports (corner-shape: squircle) {
  .squircle-sm {
    corner-shape: squircle;
  }
}

.squircle-lg {
  border-radius: var(--radius-squircle-lg);
}

@supports (corner-shape: squircle) {
  .squircle-lg {
    corner-shape: squircle;
  }
}

/* Typography */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }

.text-primary { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-tertiary { color: var(--text-tertiary); }
.text-brand { color: var(--primary-vivid); }
.text-success { color: var(--zivvy-success-600); }
.text-warning { color: var(--zivvy-warning-600); }
.text-danger { color: var(--zivvy-danger-600); }

.uppercase { text-transform: uppercase; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Display */
.hidden { display: none; }
.block { display: block; }
.w-full { width: 100%; }
.rounded-lg { border-radius: var(--radius-lg); }
.shadow-3 { box-shadow: var(--shadow-3); }

/* =============================================================================
   16. ANIMATIONS
   ============================================================================= */

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

@keyframes slide-up {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in { animation: fade-in var(--timing-base); }
.animate-slide-up { animation: slide-up var(--timing-base); }

/* =============================================================================
   17. REDUCED MOTION
   ============================================================================= */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  
  .spinner { animation-duration: 1.5s !important; }
  .breathing-circle, .pulse-dot, .skeleton { animation: none; opacity: 0.8; }
  .success-icon, .achievement-badge { animation: none; }
}

/* =============================================================================
   18. STYLE GUIDE SPECIFIC COMPONENTS
   ============================================================================= */

/* Page Wrapper & Sidebar Layout */
.page-wrapper {
  display: flex;
  min-height: 100vh;
}

.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: 260px;
  height: 100vh;
  background: linear-gradient(180deg, var(--primary-deep-plum), var(--primary-vivid));
  color: white;
  overflow-y: auto;
  z-index: 100;
  padding: var(--space-l);
}

.sidebar-logo {
  font-size: 28px;
  font-weight: var(--weight-black);
  margin-bottom: var(--space-xs);
}

.sidebar-version {
  font-size: var(--type-body-xs);
  opacity: 0.7;
  margin-bottom: var(--space-xl);
}

.sidebar-nav {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sidebar-nav-group {
  margin-bottom: var(--space-l);
}

.sidebar-nav-title {
  font-size: var(--type-body-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  opacity: 0.5;
  margin-bottom: var(--space-xs);
}

.sidebar-nav a {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-s);
  color: hsl(0, 0%, 100%, 0.8);
  text-decoration: none;
  font-size: var(--type-body-sm);
  border-radius: var(--radius-md);
  transition: all var(--timing-fast);
}

.sidebar-nav a:hover {
  background: hsl(0, 0%, 100%, 0.1);
  color: white;
}

.sidebar-nav a .material-symbols-rounded {
  font-size: 18px;
  opacity: 0.7;
}

.main-content {
  margin-left: 260px;
  flex: 1;
  min-width: 0;
}

.content-container {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  padding: var(--space-xxl) var(--space-xl);
  box-sizing: border-box;
  overflow-x: hidden;
}

/* Section Components */
.section {
  margin-bottom: var(--space-section);
  scroll-margin-top: var(--space-l);
}

.section-header {
  margin-bottom: var(--space-xl);
  padding-bottom: var(--space-m);
  border-bottom: 1px solid var(--surface-border);
}

.section-title {
  font-size: var(--type-display-sm);
  font-weight: var(--weight-bold);
  margin: 0 0 var(--space-xs);
  display: flex;
  align-items: center;
  gap: var(--space-s);
}

.section-title .material-symbols-rounded {
  font-size: 32px;
  color: var(--primary-vivid);
}

.section-description {
  font-size: var(--type-body-lg);
  color: var(--text-secondary);
  margin: 0;
}

.subsection {
  margin-bottom: var(--space-xl);
}

.subsection-title {
  font-size: var(--type-heading-2);
  font-weight: var(--weight-semibold);
  margin: 0 0 var(--space-m);
}

/* Demo Cards */
.demo-card {
  background: white;
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.demo-card-header {
  padding: var(--space-s) var(--space-m);
  background: var(--surface-variant);
  border-bottom: 1px solid var(--surface-border);
  font-size: var(--type-body-sm);
  font-weight: var(--weight-medium);
}

.demo-card-body {
  padding: var(--space-l);
}

/* Color Swatches */
.swatch-group {
  display: flex;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--surface-border);
}

.swatch {
  flex: 1;
  padding: var(--space-m);
  min-height: 80px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.swatch-name {
  font-size: var(--type-body-xs);
  font-weight: var(--weight-medium);
  margin-bottom: 2px;
}

.swatch-hex {
  font-size: 10px;
  font-family: var(--font-mono);
  opacity: 0.8;
}

/* Typography Utilities */
.display-xl {
  font-family: var(--font-display);
  font-size: var(--type-display-xl);
  font-weight: var(--weight-semibold);
  line-height: var(--line-tight);
  letter-spacing: var(--tracking-tight);
}

.display-lg {
  font-family: var(--font-display);
  font-size: var(--type-display-lg);
  font-weight: var(--weight-semibold);
  line-height: var(--line-tight);
  letter-spacing: var(--tracking-tight);
}

.display-md {
  font-family: var(--font-display);
  font-size: var(--type-display-md);
  font-weight: var(--weight-semibold);
  line-height: var(--line-tight);
}

.display-sm {
  font-family: var(--font-display);
  font-size: var(--type-display-sm);
  font-weight: var(--weight-semibold);
  line-height: var(--line-tight);
}

.body-lg, .text-lg {
  font-size: var(--type-body-lg);
  line-height: var(--line-normal);
}

.body-sm, .text-sm {
  font-size: var(--type-body-sm);
  line-height: var(--line-normal);
}

.body-xs, .text-xs {
  font-size: var(--type-body-xs);
  line-height: var(--line-normal);
}

.lead {
  font-size: var(--type-body-lg);
  line-height: var(--line-relaxed);
  color: var(--text-secondary);
}

/* Font Weight Utilities */
.font-light { font-weight: var(--weight-light); }
.font-medium { font-weight: var(--weight-medium); }
.font-semibold { font-weight: var(--weight-semibold); }
.font-bold { font-weight: var(--weight-bold); }
.font-black { font-weight: var(--weight-black); }

/* Line Height Utilities */
.leading-tight { line-height: var(--line-tight); }
.leading-relaxed { line-height: var(--line-relaxed); }

/* Letter Spacing Utilities */
.tracking-tight { letter-spacing: var(--tracking-tight); }
.tracking-normal { letter-spacing: var(--tracking-normal); }
.tracking-wide { letter-spacing: var(--tracking-wide); }
.tracking-wider { letter-spacing: var(--tracking-wider); }

/* Text Styling */
.uppercase { text-transform: uppercase; }
.small-caps {
  font-variant: small-caps;
  letter-spacing: var(--tracking-wide);
}

/* Text Highlights */
.highlight {
  background: linear-gradient(180deg, transparent 60%, var(--primary-lavender-ice) 60%);
  padding: 0 4px;
}

.highlight-bold {
  background: linear-gradient(180deg, transparent 60%, var(--primary-soft-violet) 60%);
  padding: 0 4px;
  font-weight: var(--weight-semibold);
}

.highlight-success {
  background: linear-gradient(180deg, transparent 60%, var(--success-light) 60%);
  padding: 0 4px;
}

.highlight-warning {
  background: linear-gradient(180deg, transparent 60%, var(--warning-light) 60%);
  padding: 0 4px;
}

/* Animated Underline */
.underline-animated {
  text-decoration: none;
  background-image: linear-gradient(90deg, var(--primary-vivid), var(--secondary-bright));
  background-position: 0 100%;
  background-size: 0 2px;
  background-repeat: no-repeat;
  transition: background-size var(--timing-base);
}

.underline-animated:hover {
  background-size: 100% 2px;
}

/* Gradient Text */
.gradient-text {
  background: linear-gradient(90deg, var(--primary-vivid), var(--secondary-bright), var(--primary-amethyst));
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.gradient-text-animated {
  background: linear-gradient(90deg, var(--primary-vivid), var(--secondary-bright), var(--primary-amethyst));
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradient-shift 3s ease infinite;
}

/* Text Glow Effects */
.text-glow {
  color: var(--primary-vivid);
  text-shadow: 0 0 10px hsl(275, 86%, 36%, 0.5);
}

.text-glow-strong {
  color: var(--primary-vivid);
  text-shadow: 0 0 10px hsl(275, 86%, 36%, 0.5), 0 0 20px hsl(275, 86%, 36%, 0.3);
}

.neon-text {
  color: var(--primary-vivid);
  text-shadow: 0 0 10px currentColor, 0 0 20px currentColor, 0 0 30px currentColor, 0 0 40px currentColor;
  animation: neon-pulse 2s ease-in-out infinite;
}

@keyframes neon-pulse {
  0%, 100% {
    text-shadow: 0 0 10px currentColor, 0 0 20px currentColor, 0 0 30px currentColor, 0 0 40px currentColor;
  }
  50% {
    text-shadow: 0 0 20px currentColor, 0 0 30px currentColor, 0 0 40px currentColor, 0 0 50px currentColor, 0 0 60px currentColor;
  }
}

/* Text Shadow Effects */
.text-shadow-layered {
  color: white;
  text-shadow: 2px 2px 0 var(--primary-vivid), 4px 4px 0 var(--secondary-bright), 6px 6px 0 var(--primary-amethyst);
}

.text-shadow-3d {
  text-shadow: 1px 1px 0 var(--surface-border), 2px 2px 0 var(--surface-border), 3px 3px 0 var(--surface-border), 4px 4px 0 var(--surface-border), 5px 5px 15px hsl(0, 0%, 0%, 0.3);
}

.text-3d-hover {
  transition: all var(--timing-base);
  cursor: pointer;
  display: inline-block;
}

.text-3d-hover:hover {
  transform: rotateX(15deg) rotateY(-10deg) scale(1.05);
  text-shadow: 1px 1px 0 var(--surface-border), 2px 2px 0 var(--surface-border), 3px 3px 0 var(--surface-border), 4px 4px 0 var(--surface-border), 5px 5px 15px hsl(0, 0%, 0%, 0.3);
}

/* Typewriter Effect */
.typewriter {
  font-size: var(--type-display-sm);
  font-weight: var(--weight-semibold);
  overflow: hidden;
  border-right: 3px solid var(--primary-vivid);
  white-space: nowrap;
  animation: typing 3s steps(40) 1s infinite, blink 0.75s step-end infinite;
  width: fit-content;
}

@keyframes typing {
  0%, 100% { width: 0; }
  50%, 90% { width: 100%; }
}

@keyframes blink {
  from, to { border-color: transparent; }
  50% { border-color: var(--primary-vivid); }
}

/* Loading Dots */
.loading-dots::after {
  content: '';
  animation: dots 1.5s infinite;
}

@keyframes dots {
  0% { content: ''; }
  25% { content: '.'; }
  50% { content: '..'; }
  75% { content: '...'; }
}

/* Glitch Effect */
.glitch-text {
  position: relative;
  color: var(--text-primary);
  letter-spacing: 0.05em;
  display: inline-block;
}

.glitch-text::before,
.glitch-text::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  mix-blend-mode: screen;
}

.glitch-text::before {
  animation: glitch-1 0.8s infinite;
  color: hsl(275, 86%, 36%, 0.7);
  left: 2px;
}

.glitch-text::after {
  animation: glitch-2 0.8s infinite;
  color: hsl(211, 100%, 50%, 0.7);
  left: -2px;
}

@keyframes glitch-1 {
  0%, 100% {
    clip-path: inset(0);
    transform: translate(0);
  }
  20% {
    clip-path: inset(10% 0 85% 0);
    transform: translate(-5px, 2px);
  }
  40% {
    clip-path: inset(80% 0 0 0);
    transform: translate(5px, -2px);
  }
}

@keyframes glitch-2 {
  0%, 100% {
    clip-path: inset(0);
    transform: translate(0);
  }
  25% {
    clip-path: inset(50% 0 30% 0);
    transform: translate(5px, 2px);
  }
  50% {
    clip-path: inset(0 0 70% 0);
    transform: translate(-5px, -2px);
  }
}

/* Morph Text Animation */
.morph-text {
  display: inline-block;
}

.morph-text span {
  display: inline-block;
  animation: morph 4s ease-in-out infinite;
}

.morph-text span:nth-child(1) { animation-delay: 0s; }
.morph-text span:nth-child(2) { animation-delay: 0.1s; }
.morph-text span:nth-child(3) { animation-delay: 0.2s; }
.morph-text span:nth-child(4) { animation-delay: 0.3s; }
.morph-text span:nth-child(5) { animation-delay: 0.4s; }
.morph-text span:nth-child(6) { animation-delay: 0.5s; }
.morph-text span:nth-child(7) { animation-delay: 0.6s; }
.morph-text span:nth-child(8) { animation-delay: 0.7s; }

@keyframes morph {
  0%, 100% {
    transform: translateY(0) rotate(0) scale(1);
  }
  25% {
    transform: translateY(-20px) rotate(10deg) scale(1.1);
  }
  50% {
    transform: translateY(0) rotate(-10deg) scale(0.9);
  }
  75% {
    transform: translateY(10px) rotate(5deg) scale(1.05);
  }
}

/* Dark Demo Background */
.dark-demo {
  background: var(--neutral-ui-black);
  padding: var(--space-xl);
  border-radius: var(--radius-lg);
}

/* Icon Sizes */
.icon-sm { font-size: 16px !important; }
.icon { font-size: 20px !important; }
.icon-md { font-size: 24px !important; }
.icon-lg { font-size: 32px !important; }
.icon-xl { font-size: 48px !important; }

/* Keyboard Key Styling */
kbd {
  font-family: var(--font-mono);
  font-size: var(--type-body-xs);
  background: var(--surface-variant);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-sm);
  padding: 2px 6px;
  box-shadow: 0 1px 0 var(--surface-border);
}

/* Mobile Responsiveness */
@media (max-width: 900px) {
  .grid-2, .grid-3, .grid-4 {
    grid-template-columns: 1fr;
  }

  .sidebar {
    display: none;
  }

  .main-content {
    margin-left: 0;
  }

  .content-container {
    padding: var(--space-l) var(--space-m);
  }
}

/* =============================================================================
   19. FEATURE PAGE UTILITIES (from 8tools.css)
   Psychology-driven marketing page components
   ============================================================================= */

/* Gradient Text Effects */
.gradient-gold {
  background: linear-gradient(180deg, hsl(48, 96%, 53%) 0%, hsl(38, 92%, 50%) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Glow Effects */
.glow-purple {
  box-shadow: 0 0 80px 40px hsl(258, 90%, 66%, 0.15);
}

.glow-gold {
  box-shadow: 0 0 60px 20px hsl(48, 96%, 53%, 0.1);
}

/* Integration Card - Kennedy Texture Pattern */
.integration-card {
  background: linear-gradient(180deg, hsl(258, 90%, 66%, 0.08) 0%, hsl(240, 20%, 5%, 0.95) 100%);
  border: 2px solid hsl(0, 84%, 60%, 0.4);
  box-shadow:
    0 0 0 1px hsl(0, 84%, 60%, 0.1),
    0 4px 40px hsl(0, 84%, 60%, 0.15),
    inset 0 1px 0 hsl(0, 0%, 100%, 0.03);
  position: relative;
  overflow: hidden;
}

/* Subtle noise texture overlay */
.integration-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  opacity: 0.03;
  pointer-events: none;
  mix-blend-mode: overlay;
}

/* Scan line effect for "screen capture" feel */
.integration-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    hsl(0, 0%, 100%, 0.01) 2px,
    hsl(0, 0%, 100%, 0.01) 4px
  );
  pointer-events: none;
}

/* Urgent Timestamp Animation */
.urgent-timestamp {
  background: hsl(0, 84%, 60%, 0.15);
  border: 1px solid hsl(0, 84%, 60%, 0.3);
  animation: timestamp-pulse 3s ease-in-out infinite;
}

@keyframes timestamp-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

/* Enhanced Pulse Dot - Danger Variant */
.pulse-dot-danger {
  animation: pulse-danger 1.5s ease-in-out infinite;
}

@keyframes pulse-danger {
  0%, 100% {
    opacity: 1;
    box-shadow: 0 0 0 0 hsl(0, 84%, 60%, 0.7);
  }
  50% {
    opacity: 0.8;
    box-shadow: 0 0 0 8px hsl(0, 84%, 60%, 0);
  }
}

/* Handwritten Note - Kennedy Texture */
.handwritten-note {
  font-family: 'Caveat', cursive;
  transform: rotate(-2deg);
  position: relative;
}

.handwritten-note::before {
  content: '';
  position: absolute;
  left: -8px;
  top: 50%;
  width: 6px;
  height: 6px;
  background: hsl(48, 96%, 53%);
  border-radius: 50%;
  transform: translateY(-50%);
}

/* END ZIVVY DESIGN SYSTEM */