/**
 * ╔════════════════════════════════════════════════════════════════════════════╗
 * ║                      ZIVVY DESIGN SYSTEM v2.6.0                           ║
 * ║  Built on behavioral psychology, emotional design patterns, and           ║
 * ║  the principle that peaks and valleys create engagement.                  ║
 * ╚════════════════════════════════════════════════════════════════════════════╝
 */

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

@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@500;700&display=swap');

/* =============================================================================
   1. DESIGN TOKENS
   ============================================================================= */

:root {
  /* SPACING & GRID - Base unit: 4px */
  --space-xxs: 4px;
  --space-xs: 8px;
  --space-s: 12px;
  --space-m: 16px;
  --space-l: 24px;
  --space-xl: 32px;
  --space-xxl: 48px;
  --space-section: 64px;

  /* Touch Targets */
  --touch-desktop: 44px;
  --touch-mobile: 56px;

  /* Grid */
  --container-max: 1344px;

  /* ========================================================================
     NEUTRAL SCALE — Warm Luxury Beige/Cream (NEW v2.6)
     ======================================================================== */
  --neutral-50: #f8f2e8;
  --neutral-100: #f3ede2;
  --neutral-200: #e8e2d7;
  --neutral-300: #d9d3c8;
  --neutral-400: #a9a49a;
  --neutral-500: #7a756d;
  --neutral-600: #5a5650;
  --neutral-700: #45413a;
  --neutral-800: #2d2a26;
  --neutral-900: #1c1a15;
  --neutral-950: #0e0d0a;

  /* PRIMARY: Deep Purple - Brand, CTAs (50-950 scale) */
  --primary-50: #F5F0FA;
  --primary-100: #EBE0F5;
  --primary-200: #D4BFE9;
  --primary-300: #B794D8;
  --primary-400: #9560C5;
  --primary-500: #7635B0;
  --primary-600: #5c1d9e;
  --primary-700: #4A1780;
  --primary-800: #381162;
  --primary-900: #270C45;
  --primary-950: #160728;

  /* SECONDARY: Violet-Blue - Links, Info (50-950 scale) */
  --secondary-50: #F0F3FD;
  --secondary-100: #E0E6FB;
  --secondary-200: #C2CEF7;
  --secondary-300: #9BABEF;
  --secondary-400: #7286E5;
  --secondary-500: #4a5fd9;
  --secondary-600: #3A4BC0;
  --secondary-700: #2E3B99;
  --secondary-800: #232D73;
  --secondary-900: #181F4F;
  --secondary-950: #0E1230;

  /* TERTIARY: Muted Gold - Achievements (50-950 scale) */
  --tertiary-50: #FDFAF0;
  --tertiary-100: #FAF3DC;
  --tertiary-200: #F4E5B5;
  --tertiary-300: #EBD085;
  --tertiary-400: #E0B84E;
  --tertiary-500: #d4a017;
  --tertiary-600: #B38614;
  --tertiary-700: #8C6910;
  --tertiary-800: #664D0C;
  --tertiary-900: #433308;
  --tertiary-950: #261D05;

  /* ========================================================================
     SUCCESS / WARNING / DANGER (State Colors)
     ======================================================================== */
  --success-400: #5FC75D;
  --success-500: #4CAF50;
  --warning-400: #FB923C;
  --warning-500: #F97316;
  --danger-400: #F87171;
  --danger-500: #E53935;

  /* Legacy zivvy-* aliases for backward compatibility */
  --zivvy-success-50: #ECFDF5;
  --zivvy-success-100: #D1FAE5;
  --zivvy-success-200: #A7F3D0;
  --zivvy-success-500: var(--success-500);
  --zivvy-success-600: #059669;
  --zivvy-success-700: #047857;
  --zivvy-success-800: #065F46;
  --zivvy-warning-50: #FFFBEB;
  --zivvy-warning-100: #FEF3C7;
  --zivvy-warning-200: #FDE68A;
  --zivvy-warning-500: var(--warning-500);
  --zivvy-warning-600: #D97706;
  --zivvy-warning-700: #B45309;
  --zivvy-warning-800: #92400E;
  --zivvy-danger-50: #FEF2F2;
  --zivvy-danger-100: #FEE2E2;
  --zivvy-danger-200: #FECACA;
  --zivvy-danger-300: #FCA5A5;
  --zivvy-danger-500: var(--danger-500);
  --zivvy-danger-600: #DC2626;
  --zivvy-danger-700: #B91C1C;
  --zivvy-danger-800: #991B1B;
  --danger-950: #7F1D1D;

  /* ========================================================================
     EMOTIONAL STATES (NEW v2.6)
     ======================================================================== */
  --calm-primary: #8b6fb5;
  --calm-light: #f7f3fa;
  --info-primary: #5d7bc4;
  --info-light: #f0f4fa;
  --attention-primary: #c99a2d;
  --attention-light: #faf6eb;
  --urgent-primary: #d85050;
  --urgent-light: #faf0ef;
  --celebration-primary: #4fa854;
  --celebration-light: #f3f9f3;

  /* Legacy aliases */
  --success-primary: var(--celebration-primary);
  --success-light: var(--celebration-light);
  --warning-primary: var(--attention-primary);
  --warning-light: var(--attention-light);

  /* ========================================================================
     LEGACY COLOR ALIASES — Backward Compatibility
     Maps old v1.0 variable names to new v2.6 colors
     ======================================================================== */
  --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: #f5c518;
  --secondary-bright: var(--secondary-500);

  /* ========================================================================
     SURFACES — Light Mode (NEW v2.6)
     ======================================================================== */
  --surface-background: var(--neutral-50);
  --surface-card: var(--neutral-100);
  --surface-elevated: #ffffff;
  --surface-sunken: var(--neutral-200);
  --surface-border: var(--neutral-200);

  /* Legacy aliases */
  --surface-foreground: #222222;
  --surface-variant: var(--neutral-100);

  /* ========================================================================
     OVERLAYS & BACKDROPS (NEW v2.6)
     ======================================================================== */
  --overlay-dark: rgba(14, 13, 10, 0.5);
  --overlay-heavy: rgba(14, 13, 10, 0.8);
  --overlay-light: rgba(248, 242, 232, 0.1);
  --overlay-subtle: rgba(248, 242, 232, 0.05);

  /* ========================================================================
     INTERACTIVE STATES — Light Mode (NEW v2.6)
     ======================================================================== */
  --state-hover: rgba(0, 0, 0, 0.05);
  --state-active: rgba(0, 0, 0, 0.1);
  --state-disabled-opacity: 0.5;
  --state-disabled-cursor: not-allowed;

  /* ========================================================================
     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: rgba(0, 0, 0, 0.02);
  --table-row-hover: rgba(0, 0, 0, 0.04);
  --table-row-selected: rgba(92, 29, 158, 0.08);
  --table-border: var(--neutral-200);

  /* ========================================================================
     SELECTION — Light Mode (NEW v2.6)
     ======================================================================== */
  --selection-bg: rgba(92, 29, 158, 0.25);
  --selection-text: inherit;

  /* ========================================================================
     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;

  /* ========================================================================
     SHADOWS — Light Mode (NEW v2.6)
     ======================================================================== */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-2: 0 2px 4px rgba(0, 0, 0, 0.08);
  --shadow-3: 0 4px 8px rgba(0, 0, 0, 0.1);
  --shadow-4: 0 8px 16px rgba(0, 0, 0, 0.12);
  --shadow-5: 0 16px 32px rgba(0, 0, 0, 0.15);
  --shadow-inset: inset 0 1px 2px rgba(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: #7B4FC4;
  --chart-2: #4A8FE7;
  --chart-3: #2DBDA8;
  --chart-4: #F5C518;
  --chart-5: #E8843C;
  --chart-6: #E05467;
  --chart-7: #8B6FB5;
  --chart-8: #5AA3B5;

  /* ========================================================================
     BELT COLORS — Traditional (NEW v2.6 - Martial Arts)
     ======================================================================== */
  --belt-white: #FFFFFF;
  --belt-gold: #FFD700;
  --belt-orange: #FF6B00;
  --belt-green: #228B22;
  --belt-blue: #0047AB;
  --belt-purple: #663399;
  --belt-red: #CC0000;
  --belt-brown: #5D3A1A;
  --belt-black: #1A1A1A;

  /* ========================================================================
     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, #d4a017 0%, var(--accent) 50%, #d4a017 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: #0077BB;
  --cb-cyan: #33BBEE;
  --cb-teal: #009988;
  --cb-orange: #EE7733;
  --cb-red: #CC3311;
  --cb-magenta: #EE3377;
  --cb-gray: #BBBBBB;
  --cb-purple: #332288;

  /* ========================================================================
     TRANSPARENCY SCALES (NEW v2.6)
     ======================================================================== */
  --alpha-5: 0.05;
  --alpha-10: 0.10;
  --alpha-20: 0.20;
  --alpha-30: 0.30;
  --alpha-40: 0.40;
  --alpha-50: 0.50;
  --alpha-60: 0.60;
  --alpha-70: 0.70;
  --alpha-80: 0.80;
  --alpha-90: 0.90;

  /* RGB values for use with alpha */
  --black-hero-rgb: 14, 13, 10;
  --white-luxury-rgb: 248, 242, 232;
  --primary-rgb: 92, 29, 158;
  --success-rgb: 76, 175, 80;
  --warning-rgb: 249, 115, 22;
  --danger-rgb: 229, 57, 53;

  /* ========================================================================
     TYPOGRAPHY
     ======================================================================== */
  --font-display: 'SF Pro Display', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-text: 'SF Pro Text', '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;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-black: 900;

  --line-tight: 1.1;
  --line-snug: 1.25;
  --line-normal: 1.5;
  --line-relaxed: 1.625;

  --tracking-tight: -0.025em;
  --tracking-normal: 0;
  --tracking-wide: 0.025em;
  --tracking-wider: 0.05em;

  /* ANIMATION */
  --timing-fast: 150ms;
  --timing-base: 300ms;
  --timing-slow: 500ms;
  --timing-celebration: 600ms;

  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);

  /* BORDER RADIUS */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* MARKETING COLORS - Alternative color scheme for marketing pages */
  --marketing-bg: #fdfcfa;
  --marketing-bg-alt: #f5f3ef;
  --marketing-primary: #1e5a3d;
  --marketing-primary-light: #2d7a54;
  --marketing-accent: #c9a227;
  --marketing-accent-light: #e8c84a;
}

/* =============================================================================
   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 (higher opacity) */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-2: 0 2px 4px rgba(0, 0, 0, 0.25);
  --shadow-3: 0 4px 8px rgba(0, 0, 0, 0.3);
  --shadow-4: 0 8px 16px rgba(0, 0, 0, 0.35);
  --shadow-5: 0 16px 32px rgba(0, 0, 0, 0.4);
  --shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.2);

  /* Interactive States — Dark Mode */
  --state-hover: rgba(255, 255, 255, 0.08);
  --state-active: rgba(255, 255, 255, 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: rgba(255, 255, 255, 0.03);
  --table-row-hover: rgba(255, 255, 255, 0.06);
  --table-row-selected: rgba(149, 96, 197, 0.15);
  --table-border: var(--neutral-700);

  /* Selection — Dark Mode */
  --selection-bg: rgba(149, 96, 197, 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(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-l);
}

.grid {
  display: grid;
  gap: var(--space-l);
}

.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-xs { gap: var(--space-xs); }
.gap-s { gap: var(--space-s); }
.gap-m { gap: var(--space-m); }
.gap-l { gap: var(--space-l); }

/* =============================================================================
   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 rgba(106, 13, 173, 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 rgba(106, 13, 173, 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 rgba(106, 13, 173, 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
   ============================================================================= */

.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: #f5f5f5; color: #333; border: 1px solid #ddd; }
.badge-belt-yellow { background: #fef3c7; color: #92400e; }
.badge-belt-orange { background: #ffedd5; color: #9a3412; }
.badge-belt-green { background: #d1fae5; color: #065f46; }
.badge-belt-blue { background: #dbeafe; color: #1e40af; }
.badge-belt-brown { background: #d7c4b7; color: #5d4037; }
.badge-belt-black { background: #1f2937; 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: rgba(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: 100;
  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: rgba(250, 248, 255, 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%, #F5F0FF 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 rgba(255, 215, 0, 0.4); }
  50% { box-shadow: 0 0 40px rgba(255, 215, 0, 0.6); }
}

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

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

/* Spacing */
.m-0 { margin: 0; }
.mt-m { margin-top: var(--space-m); }
.mt-l { margin-top: var(--space-l); }
.mb-m { margin-bottom: var(--space-m); }
.mb-l { margin-bottom: var(--space-l); }
.mx-auto { margin-left: auto; margin-right: auto; }

.p-m { padding: var(--space-m); }
.p-l { padding: var(--space-l); }
.px-m { padding-left: var(--space-m); padding-right: var(--space-m); }
.py-l { padding-top: var(--space-l); padding-bottom: var(--space-l); }

/* 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: rgba(255, 255, 255, 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: rgba(255, 255, 255, 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 rgba(106, 13, 173, 0.5);
}

.text-glow-strong {
  color: var(--primary-vivid);
  text-shadow: 0 0 10px rgba(106, 13, 173, 0.5), 0 0 20px rgba(106, 13, 173, 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 rgba(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 rgba(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: rgba(106, 13, 173, 0.7);
  left: 2px;
}

.glitch-text::after {
  animation: glitch-2 0.8s infinite;
  color: rgba(0, 123, 255, 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, #facc15 0%, #f59e0b 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Glow Effects */
.glow-purple {
  box-shadow: 0 0 80px 40px rgba(139, 92, 246, 0.15);
}

.glow-gold {
  box-shadow: 0 0 60px 20px rgba(250, 204, 21, 0.1);
}

/* Integration Card - Kennedy Texture Pattern */
.integration-card {
  background: linear-gradient(180deg, rgba(139, 92, 246, 0.08) 0%, rgba(10, 10, 15, 0.95) 100%);
  border: 2px solid rgba(239, 68, 68, 0.4);
  box-shadow:
    0 0 0 1px rgba(239, 68, 68, 0.1),
    0 4px 40px rgba(239, 68, 68, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 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,
    rgba(255, 255, 255, 0.01) 2px,
    rgba(255, 255, 255, 0.01) 4px
  );
  pointer-events: none;
}

/* Urgent Timestamp Animation */
.urgent-timestamp {
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 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 rgba(239, 68, 68, 0.7);
  }
  50% {
    opacity: 0.8;
    box-shadow: 0 0 0 8px rgba(239, 68, 68, 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: #facc15;
  border-radius: 50%;
  transform: translateY(-50%);
}

/* END ZIVVY DESIGN SYSTEM */