/**
 * BASECAMP DESIGN SYSTEM — Organic UI
 * ====================================
 * 
 * Design Philosophy:
 * - Organic, living interfaces that breathe
 * - Warm light mode, deep muted dark mode
 * - Large radii, layered shadows, spring physics
 * - Typography: Geist (Vercel) — thin headlines, readable body
 * 
 * Architecture:
 * - CSS Custom Properties (Open Props philosophy)
 * - No framework dependency
 * - Theme-aware via [data-theme] attribute
 * - Accent color configurable (future: admin setting)
 */

/* ============================================================================
   FONT: MANROPE — CI Font, Self-Hosted
   ============================================================================ */

@font-face {
  font-family: 'Manrope';
  src: url('/assets/fonts/manrope/Manrope-ExtraLight.ttf') format('truetype');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Manrope';
  src: url('/assets/fonts/manrope/Manrope-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Manrope';
  src: url('/assets/fonts/manrope/Manrope-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Manrope';
  src: url('/assets/fonts/manrope/Manrope-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Manrope';
  src: url('/assets/fonts/manrope/Manrope-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Manrope';
  src: url('/assets/fonts/manrope/Manrope-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Manrope';
  src: url('/assets/fonts/manrope/Manrope-ExtraBold.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* ============================================================================
   BASE TOKENS (Theme-independent)
   ============================================================================ */

:root {
  /* --- Typography --- */
  --font-sans: 'Manrope', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono: 'SF Mono', 'Fira Code', 'Consolas', monospace;
  
  /* Font Sizes — Fluid scale */
  --text-xs: 0.75rem;     /* 12px */
  --text-sm: 0.875rem;    /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-lg: 1.125rem;    /* 18px */
  --text-xl: 1.25rem;     /* 20px */
  --text-2xl: 1.5rem;     /* 24px */
  --text-3xl: 1.875rem;   /* 30px */
  --text-4xl: 2.25rem;    /* 36px */
  --text-5xl: 3rem;       /* 48px */
  
  /* Font Weights — Thin headlines, medium body */
  --weight-light: 300;
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  
  /* Line Heights */
  --leading-none: 1;
  --leading-tight: 1.25;
  --leading-snug: 1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;
  
  /* Letter Spacing */
  --tracking-tighter: -0.05em;
  --tracking-tight: -0.025em;
  --tracking-normal: 0;
  --tracking-wide: 0.025em;
  --tracking-caps: 0.08em;  /* For uppercase/small-caps text */
  
  /* --- Spacing Scale (4px base) --- */
  --space-0: 0;
  --space-px: 1px;
  --space-0\.5: 0.125rem;  /* 2px */
  --space-1: 0.25rem;      /* 4px */
  --space-1\.5: 0.375rem;  /* 6px */
  --space-2: 0.5rem;       /* 8px */
  --space-2\.5: 0.625rem;  /* 10px */
  --space-3: 0.75rem;      /* 12px */
  --space-3\.5: 0.875rem;  /* 14px */
  --space-4: 1rem;         /* 16px */
  --space-5: 1.25rem;      /* 20px */
  --space-6: 1.5rem;       /* 24px */
  --space-7: 1.75rem;      /* 28px */
  --space-8: 2rem;         /* 32px */
  --space-9: 2.25rem;      /* 36px */
  --space-10: 2.5rem;      /* 40px */
  --space-12: 3rem;        /* 48px */
  --space-14: 3.5rem;      /* 56px */
  --space-16: 4rem;        /* 64px */
  --space-20: 5rem;        /* 80px */
  --space-24: 6rem;        /* 96px */
  
  /* --- Border Radius (Organic, large) --- */
  --radius-none: 0;
  --radius-sm: 0.375rem;   /* 6px */
  --radius-md: 0.5rem;     /* 8px */
  --radius-lg: 0.75rem;    /* 12px */
  --radius-xl: 1rem;       /* 16px */
  --radius-2xl: 1.25rem;   /* 20px */
  --radius-3xl: 1.5rem;    /* 24px */
  --radius-full: 9999px;
  
  /* --- Icon System (P12.5) — Modern Line Icons --- */
  /* Smaller icons = thicker strokes, larger icons = thinner strokes */
  --icon-stroke-xs: 2;      /* 12-14px icons */
  --icon-stroke-sm: 1.75;   /* 16px icons */
  --icon-stroke-md: 1.5;    /* 18-20px icons */
  --icon-stroke-lg: 1.25;   /* 24px icons */
  --icon-stroke-xl: 1;      /* 32px+ icons */
  
  --icon-size-xs: 14px;
  --icon-size-sm: 16px;
  --icon-size-md: 18px;
  --icon-size-lg: 24px;
  --icon-size-xl: 32px;
  
  /* --- Z-Index Scale --- */
  --z-base: 0;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-header: 300;
  --z-overlay: 400;
  --z-modal: 500;
  --z-popover: 600;
  --z-tooltip: 700;
  --z-toast: 800;
  
  /* --- Motion: Easing Functions --- */
  --ease-linear: linear;
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  
  /* --- Motion: Durations (asymmetric) --- */
  --duration-instant: 50ms;
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --duration-slow: 400ms;
  --duration-slower: 600ms;
  
  /* --- Motion System (Organic Reveal) --- */
  --motion-duration-1: 120ms;   /* Micro: button states, toggles */
  --motion-duration-2: 200ms;   /* Standard: reveals, hovers */
  --motion-duration-3: 320ms;   /* Page: transitions, modals */
  
  --motion-ease-standard: cubic-bezier(0.25, 0.1, 0.25, 1);   /* Smooth out */
  --motion-ease-emphasized: cubic-bezier(0.34, 1.3, 0.64, 1); /* Slight overshoot */
  --motion-ease-decel: cubic-bezier(0, 0, 0.2, 1);            /* Quick deceleration */
  
  --motion-distance-1: 8px;     /* Small lift (cards, buttons) */
  --motion-distance-2: 12px;    /* Medium lift (page headers) */
  --motion-distance-3: 16px;    /* Large lift (modals, hero) */
  
  --motion-stagger-step: 50ms;  /* Delay between siblings */
  --motion-opacity-start: 0;
  --motion-popover-offset: -4px; /* Dropdown/popover entrance offset */
  
  /* --- Magnetic Interactions (P12.4) --- */
  --magnetic-radius: 80px;         /* Proximity detection radius */
  --magnetic-strength: 8px;        /* Max translate distance */
  --magnetic-glow-blur: 18px;      /* Glow blur radius */
  --magnetic-ease: var(--motion-ease-standard);
  --magnetic-duration: var(--motion-duration-2);
  
  /* Nav Follower */
  --nav-follower-radius: var(--radius-xl);
  --nav-follower-duration: var(--motion-duration-2);
  
  /* Legacy aliases (backwards compat) */
  --btn-halo-radius: 3px;
  --btn-capture-offset: 1px;
  --btn-capture-duration: var(--duration-fast);
  --btn-release-duration: var(--duration-slow);
  --btn-proximity-progress: 0;
  --btn-proximity-strength: 1;
  
  /* --- Layout --- */
  --sidebar-width: 220px;
  --sidebar-collapsed: 60px;
  --topbar-height: 56px;
  --content-max-width: 1400px;
  
  /* --- Accent Color (configurable) --- */
  --accent-h: 220;
  --accent-s: 90%;
  --accent-l: 56%;
  
  /* --- Module Colors --- */
  --color-sales: #8b5cf6;
  --color-redaktion: #10b981;
  --color-vertrieb: #3b82f6;
  
  /* --- Wizard Tokens --- */
  --wizard-max-width: 720px;
  --wizard-padding: var(--space-10);        /* 40px */
  --wizard-radius: var(--radius-3xl);       /* 24px */
  --wizard-input-height: 48px;
  --wizard-input-radius: var(--radius-xl);  /* 16px */
  
  /* Wizard Spacing System */
  --wizard-gap-label: var(--space-2);       /* 8px - label to input */
  --wizard-gap-field: var(--space-5);       /* 20px - field to field */
  --wizard-gap-group: var(--space-8);       /* 32px - group to group */
  --wizard-gap-header: var(--space-8);      /* 32px - header to form */
  
  /* Progress Bar */
  --wizard-progress-height: 4px;
  --wizard-progress-radius: var(--radius-full);
}

/* ============================================================================
   LIGHT THEME (Default) — Warm Whites
   ============================================================================ */

:root,
:root[data-theme="light"] {
  /* --- Backgrounds --- */
  --bg-base: #fefdfb;        /* Warm off-white */
  --bg-surface: #ffffff;     /* Pure white for cards */
  --bg-elevated: #ffffff;    /* Elevated surfaces */
  --bg-muted: #f8f6f3;       /* Subtle backgrounds */
  --bg-subtle: #f3f1ed;      /* More visible backgrounds */
  --bg-emphasis: #e8e5df;    /* Strong backgrounds */
  
  /* --- Foregrounds (Text) --- */
  --fg-default: #1a1a1a;     /* Primary text */
  --fg-muted: #6b6b6b;       /* Secondary text */
  --fg-subtle: #9a9a9a;      /* Tertiary text */
  --fg-on-accent: #ffffff;   /* Text on accent */
  
  /* --- Borders --- */
  --border-default: rgba(0, 0, 0, 0.08);
  --border-muted: rgba(0, 0, 0, 0.05);
  --border-emphasis: rgba(0, 0, 0, 0.15);
  
  /* --- Accent --- */
  --accent: hsl(var(--accent-h), var(--accent-s), var(--accent-l));
  --accent-hover: hsl(var(--accent-h), var(--accent-s), calc(var(--accent-l) - 5%));
  --accent-subtle: hsl(var(--accent-h), 60%, 95%);
  --accent-muted: hsl(var(--accent-h), 40%, 90%);
  
  /* --- Shadows (Layered, soft) --- */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.05), 0 2px 4px rgba(0, 0, 0, 0.03);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.06), 0 4px 6px rgba(0, 0, 0, 0.03);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.08), 0 8px 10px rgba(0, 0, 0, 0.04);
  --shadow-glow: 0 0 20px hsla(var(--accent-h), var(--accent-s), var(--accent-l), 0.15);
  
  /* --- Status Colors --- */
  --success: #10b981;
  --success-hover: #059669;
  --success-subtle: #ecfdf5;
  --success-fg: #065f46;
  --warning: #f59e0b;
  --warning-hover: #d97706;
  --warning-subtle: #fffbeb;
  --warning-fg: #b45309;
  --fg-on-warning: #1a1a1a;
  --error: #ef4444;
  --error-hover: #dc2626;
  --error-subtle: #fef2f2;
  --error-fg: #dc2626;
  --info: #3b82f6;
  --info-hover: #2563eb;
  --info-subtle: #eff6ff;
  --info-fg: #1d4ed8;
  
  /* --- Accent Gradient (for decorative elements) --- */
  --accent-gradient-end: #8b5cf6;
  
  /* --- Focus --- */
  --focus-ring: 0 0 0 2px var(--bg-surface), 0 0 0 4px var(--accent);
  
  /* --- Overlay --- */
  --overlay: rgba(0, 0, 0, 0.4);
  --overlay-backdrop: rgba(0, 0, 0, 0.4);  /* Modal/drawer backdrops */
  
  /* --- Form Elements --- */
  --select-chevron-color: var(--fg-muted);
  /* Select chevron SVG — external file, no inline hex */
  --select-chevron-url: url('/assets/images/select-chevron-light.svg');
  
  /* --- Sidebar specific --- */
  --sidebar-bg: #ffffff;
  --sidebar-border: rgba(0, 0, 0, 0.08);
  
  /* --- Module Pills (Topbar Navigation) --- */
  --bg-pills: #e4e7ec;
  --bg-pill-hover: rgba(255, 255, 255, 0.5);
  --bg-pill-active: #ffffff;
  
  /* --- Topbar Shadows --- */
  --shadow-topbar: 0 4px 12px rgba(0, 0, 0, 0.06);
  
  /* --- Magnetic Interactions (Light Theme) --- */
  --magnetic-glow-alpha: 0.25;
  --magnetic-glow-color: hsla(var(--accent-h), var(--accent-s), 55%, var(--magnetic-glow-alpha));
  --nav-follower-bg: rgba(99, 102, 241, 0.08);
  --nav-follower-border: rgba(99, 102, 241, 0.12);
  
  /* Legacy */
  --btn-halo-color: hsla(var(--accent-h), var(--accent-s), var(--accent-l), 0.12);
  --btn-halo-color-danger: rgba(239, 68, 68, 0.1);
  
  /* --- Soft Glass System (Light Theme) --- */
  --glass-bg-topbar: rgba(255, 255, 255, 0.55);
  --glass-bg-float: rgba(255, 255, 255, 0.85);
  --glass-bg-modal: rgba(255, 255, 255, 0.92);
  --glass-border: rgba(255, 255, 255, 0.4);
  
  /* Glass blur/saturate tiers */
  --glass-blur-sm: 8px;
  --glass-blur-md: 16px;
  --glass-blur-lg: 24px;
  --glass-saturate-sm: 1.1;
  --glass-saturate-md: 1.3;
  --glass-saturate-lg: 1.5;
  
  /* Legacy aliases */
  --glass-blur: var(--glass-blur-lg);
  --glass-saturate: var(--glass-saturate-lg);
  
  /* Canvas Background — Prominent Purple/Blue Gradient (Prodify-style) */
  --canvas-bg: #f8f7fc;
  --canvas-gradient: 
    radial-gradient(ellipse 120% 80% at 50% -30%, rgba(139, 92, 246, 0.18) 0%, transparent 50%),
    radial-gradient(ellipse 80% 60% at 100% 0%, rgba(99, 102, 241, 0.14) 0%, transparent 45%),
    radial-gradient(ellipse 60% 50% at 0% 100%, rgba(168, 85, 247, 0.10) 0%, transparent 40%),
    radial-gradient(ellipse 100% 100% at 50% 50%, rgba(248, 250, 252, 0.6) 0%, transparent 70%);
  
  /* Floating Cards — "Paper lift" shadows */
  --shadow-card: 
    0 1px 3px rgba(0, 0, 0, 0.06),
    0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-card-hover:
    0 4px 8px rgba(0, 0, 0, 0.08),
    0 12px 24px rgba(0, 0, 0, 0.12);
  --shadow-float:
    0 4px 16px rgba(0, 0, 0, 0.06),
    0 12px 32px rgba(0, 0, 0, 0.04);
  --shadow-float-lg:
    0 8px 32px rgba(0, 0, 0, 0.08),
    0 20px 48px rgba(0, 0, 0, 0.06);
  
  /* Hover intent — purple tint */
  --hover-glow: 0 0 0 4px rgba(139, 92, 246, 0.08);
  
  /* Table row hover — subtle purple */
  --row-hover-bg: rgba(139, 92, 246, 0.04);
  
  /* Accent Badges (Cyan, Pink, Orange, Purple) */
  --badge-cyan: #06b6d4;
  --badge-cyan-bg: rgba(6, 182, 212, 0.12);
  --badge-pink: #ec4899;
  --badge-pink-bg: rgba(236, 72, 153, 0.12);
  --badge-orange: #f97316;
  --badge-orange-bg: rgba(249, 115, 22, 0.12);
  --badge-purple: #8b5cf6;
  --badge-purple-bg: rgba(139, 92, 246, 0.12);
}

/* ============================================================================
   DARK THEME — Deep, Muted, Less Saturated
   ============================================================================ */

:root[data-theme="dark"] {
  /* --- Backgrounds (lighter for better card contrast) --- */
  --bg-base: #0e0e12;        /* Deep purple-tinted black */
  --bg-surface: #1a1a22;     /* Card surfaces — more visible */
  --bg-elevated: #222230;    /* Elevated surfaces */
  --bg-muted: #1e1e28;       /* Subtle backgrounds */
  --bg-subtle: #2a2a38;      /* More visible backgrounds */
  --bg-emphasis: #363648;    /* Strong backgrounds */
  
  /* --- Foregrounds (Text) --- */
  --fg-default: #f4f4f5;     /* Primary text */
  --fg-muted: #a1a1aa;       /* Secondary text */
  --fg-subtle: #71717a;      /* Tertiary text */
  --fg-on-accent: #ffffff;   /* Text on accent */
  
  /* --- Borders --- */
  --border-default: rgba(255, 255, 255, 0.08);
  --border-muted: rgba(255, 255, 255, 0.05);
  --border-emphasis: rgba(255, 255, 255, 0.15);
  
  /* --- Accent --- */
  --accent: hsl(var(--accent-h), var(--accent-s), var(--accent-l));
  --accent-hover: hsl(var(--accent-h), var(--accent-s), calc(var(--accent-l) + 8%));
  --accent-subtle: hsla(var(--accent-h), 70%, 50%, 0.15);
  --accent-muted: hsla(var(--accent-h), 50%, 50%, 0.1);
  
  /* --- Shadows (more dramatic in dark) --- */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5), 0 4px 6px rgba(0, 0, 0, 0.3);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.6), 0 8px 10px rgba(0, 0, 0, 0.4);
  --shadow-glow: 0 0 30px hsla(var(--accent-h), var(--accent-s), var(--accent-l), 0.2);
  
  /* --- Status Colors (slightly muted) --- */
  --success: #34d399;
  --success-hover: #10b981;
  --success-subtle: rgba(52, 211, 153, 0.15);
  --success-fg: #6ee7b7;
  --warning: #fbbf24;
  --warning-hover: #f59e0b;
  --warning-subtle: rgba(251, 191, 36, 0.15);
  --warning-fg: #fcd34d;
  --fg-on-warning: #1a1a1a;
  --error: #f87171;
  --error-hover: #ef4444;
  --error-subtle: rgba(248, 113, 113, 0.15);
  --error-fg: #fca5a5;
  --info: #60a5fa;
  --info-hover: #3b82f6;
  --info-subtle: rgba(96, 165, 250, 0.15);
  --info-fg: #93c5fd;
  
  /* --- Accent Gradient --- */
  --accent-gradient-end: #a78bfa;
  
  /* --- Focus --- */
  --focus-ring: 0 0 0 2px var(--bg-surface), 0 0 0 4px var(--accent);
  
  /* --- Overlay --- */
  --overlay: rgba(0, 0, 0, 0.7);
  --overlay-backdrop: rgba(0, 0, 0, 0.6);  /* Modal/drawer backdrops (darker for dark theme) */
  
  /* --- Form Elements --- */
  --select-chevron-color: var(--fg-muted);
  /* Select chevron SVG — external file, no inline hex */
  --select-chevron-url: url('/assets/images/select-chevron-dark.svg');
  
  /* --- Sidebar specific (matches glass aesthetic) --- */
  --sidebar-bg: rgba(18, 18, 24, 0.7);
  --sidebar-border: rgba(255, 255, 255, 0.04);
  
  /* --- Module Pills (Topbar Navigation - Dark) --- */
  --bg-pills: #2a2b36;
  --bg-pill-hover: rgba(255, 255, 255, 0.08);
  --bg-pill-active: #3d3e4a;
  
  /* --- Topbar Shadows (Dark) --- */
  --shadow-topbar: 0 4px 12px rgba(0, 0, 0, 0.2);
  
  /* --- Magnetic Interactions (Dark Theme) --- */
  --magnetic-glow-alpha: 0.35;
  --magnetic-glow-color: hsla(var(--accent-h), var(--accent-s), 65%, var(--magnetic-glow-alpha));
  --nav-follower-bg: rgba(139, 92, 246, 0.12);
  --nav-follower-border: rgba(139, 92, 246, 0.18);
  
  /* Legacy */
  --btn-halo-color: hsla(var(--accent-h), var(--accent-s), var(--accent-l), 0.18);
  --btn-halo-color-danger: rgba(248, 113, 113, 0.15);
  
  /* --- Soft Glass System (Dark Theme) --- */
  --glass-bg-topbar: rgba(12, 12, 18, 0.6);
  --glass-bg-float: rgba(26, 26, 34, 0.9);
  --glass-bg-modal: rgba(20, 20, 28, 0.95);
  --glass-border: rgba(255, 255, 255, 0.06);
  
  /* Glass blur/saturate tiers */
  --glass-blur-sm: 8px;
  --glass-blur-md: 16px;
  --glass-blur-lg: 28px;
  --glass-saturate-sm: 1.2;
  --glass-saturate-md: 1.4;
  --glass-saturate-lg: 1.6;
  
  /* Legacy aliases */
  --glass-blur: var(--glass-blur-lg);
  --glass-saturate: var(--glass-saturate-lg);
  
  /* Canvas Background — Prominent Purple/Blue Gradient (Dark Prodify-style) */
  --canvas-bg: #0e0e12;
  --canvas-gradient: 
    radial-gradient(ellipse 120% 80% at 50% -20%, rgba(139, 92, 246, 0.25) 0%, transparent 50%),
    radial-gradient(ellipse 80% 60% at 100% 20%, rgba(99, 102, 241, 0.18) 0%, transparent 45%),
    radial-gradient(ellipse 70% 50% at 0% 80%, rgba(168, 85, 247, 0.12) 0%, transparent 40%),
    radial-gradient(ellipse 50% 40% at 80% 90%, rgba(59, 130, 246, 0.10) 0%, transparent 35%);
  
  /* Floating Cards — Dark mode "paper lift" shadows */
  --shadow-card: 
    0 1px 3px rgba(0, 0, 0, 0.2),
    0 4px 16px rgba(0, 0, 0, 0.25);
  --shadow-card-hover:
    0 4px 8px rgba(0, 0, 0, 0.25),
    0 12px 28px rgba(0, 0, 0, 0.3);
  --shadow-float:
    0 4px 20px rgba(0, 0, 0, 0.25),
    0 12px 40px rgba(0, 0, 0, 0.2);
  --shadow-float-lg:
    0 8px 32px rgba(0, 0, 0, 0.3),
    0 20px 56px rgba(0, 0, 0, 0.25);
  
  /* Hover intent — purple glow */
  --hover-glow: 0 0 0 4px rgba(139, 92, 246, 0.15);
  
  /* Table row hover — subtle purple */
  --row-hover-bg: rgba(139, 92, 246, 0.08);
  
  /* Accent Badges (brighter in dark mode) */
  --badge-cyan: #22d3ee;
  --badge-cyan-bg: rgba(34, 211, 238, 0.15);
  --badge-pink: #f472b6;
  --badge-pink-bg: rgba(244, 114, 182, 0.15);
  --badge-orange: #fb923c;
  --badge-orange-bg: rgba(251, 146, 60, 0.15);
  --badge-purple: #a78bfa;
  --badge-purple-bg: rgba(167, 139, 250, 0.15);
}

/* ============================================================================
   BASE STYLES
   ============================================================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--weight-normal);
  line-height: var(--leading-normal);
  color: var(--fg-default);
  background-color: var(--bg-base);
  transition: 
    background-color var(--duration-normal) var(--ease-out),
    color var(--duration-normal) var(--ease-out);
}

/* --- Typography Defaults --- */

h1, h2, h3, h4, h5, h6 {
  font-weight: var(--weight-light);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-default);
}

h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); }
h5 { font-size: var(--text-lg); }
h6 { font-size: var(--text-base); font-weight: var(--weight-medium); }

p {
  color: var(--fg-muted);
  line-height: var(--leading-relaxed);
}

small {
  font-size: var(--text-sm);
  color: var(--fg-subtle);
}

/* --- Links --- */

a {
  color: var(--accent);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
}

a:hover {
  color: var(--accent-hover);
}

/* --- Code --- */

code, pre, kbd {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

code {
  padding: 0.125em 0.375em;
  background: var(--bg-subtle);
  border-radius: var(--radius-sm);
}

pre {
  padding: var(--space-4);
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  overflow-x: auto;
}

pre code {
  padding: 0;
  background: none;
}

/* --- Selection (Global, visible on all backgrounds) --- */

::selection {
  background: #3b82f6 !important;
  color: #ffffff !important;
}

::-moz-selection {
  background: #3b82f6 !important;
  color: #ffffff !important;
}

/* Selection in inputs and textareas - high specificity */
input::selection,
textarea::selection,
select::selection,
[contenteditable]::selection,
.input::selection,
.form-control::selection,
body input::selection,
body textarea::selection {
  background: #3b82f6 !important;
  color: #ffffff !important;
}

input::-moz-selection,
textarea::-moz-selection,
select::-moz-selection,
[contenteditable]::-moz-selection,
.input::-moz-selection,
.form-control::-moz-selection,
body input::-moz-selection,
body textarea::-moz-selection {
  background: #3b82f6 !important;
  color: #ffffff !important;
}

/* Dark mode selection */
[data-theme="dark"] ::selection,
[data-theme="dark"] input::selection,
[data-theme="dark"] textarea::selection {
  background: #60a5fa !important;
  color: #000000 !important;
}

[data-theme="dark"] ::-moz-selection,
[data-theme="dark"] input::-moz-selection,
[data-theme="dark"] textarea::-moz-selection {
  background: #60a5fa !important;
  color: #000000 !important;
}

/* --- Focus Visible --- */

:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* --- Reduced Motion --- */

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