/* Modern Design Token System - 2024 Standards */ /* This replaces the basic variables.css with a comprehensive design system */ :root { /* === COLOR SYSTEM === */ /* Brand Colors - Extended Palette (canonical app blue #4e8cff) */ --brand-50: #eef5ff; --brand-100: #dbeafe; --brand-200: #bfdbfe; --brand-300: #93c5fd; --brand-400: #6fa3ff; --brand-500: #4e8cff; --brand-600: #3d78e6; --brand-700: #2f5fc4; --brand-800: #264a9e; --brand-900: #1e3a78; --brand-950: #172554; /* Accent Colors */ --accent-50: #fef2f2; --accent-100: #fee2e2; --accent-200: #fecaca; --accent-300: #fca5a5; --accent-400: #f87171; --accent-500: #ef4444; --accent-600: #dc2626; --accent-700: #b91c1c; --accent-800: #991b1b; --accent-900: #7f1d1d; /* Success Colors */ --success-50: #f0fdf4; --success-100: #dcfce7; --success-200: #bbf7d0; --success-300: #86efac; --success-400: #4ade80; --success-500: #22c55e; --success-600: #16a34a; --success-700: #15803d; --success-800: #166534; --success-900: #14532d; /* Warning Colors */ --warning-50: #fefce8; --warning-100: #fef9c3; --warning-200: #fef08a; --warning-300: #fde047; --warning-400: #facc15; --warning-500: #eab308; --warning-600: #ca8a04; --warning-700: #a16207; --warning-800: #854d0e; --warning-900: #713f12; /* Danger Colors */ --danger-50: #fef2f2; --danger-100: #fee2e2; --danger-200: #fecaca; --danger-300: #fca5a5; --danger-400: #f87171; --danger-500: #ef4444; --danger-600: #dc2626; --danger-700: #b91c1c; --danger-800: #991b1b; --danger-900: #7f1d1d; /* Info Colors (brand-blue based) */ --info-50: #eff6ff; --info-100: #dbeafe; --info-200: #bfdbfe; --info-300: #93bbfd; --info-400: #60a5fa; --info-500: #3b82f6; --info-600: #2563eb; --info-700: #1d4ed8; --info-800: #1e40af; --info-900: #1e3a8a; /* Neutral Colors */ --neutral-50: #f8fafc; --neutral-100: #f1f5f9; --neutral-200: #e2e8f0; --neutral-300: #cbd5e1; --neutral-400: #94a3b8; --neutral-500: #64748b; --neutral-600: #475569; --neutral-700: #334155; --neutral-800: #1e293b; --neutral-900: #0f172a; --neutral-950: #020617; /* === SEMANTIC COLORS === */ /* Backgrounds */ --bg-primary: #ffffff; --bg-secondary: #f5f7fa; --bg-tertiary: #f3f4f6; --bg-elevated: #ffffff; --bg-overlay: rgba(0, 0, 0, 0.5); --bg-backdrop: rgba(255, 255, 255, 0.8); /* Surfaces */ --surface-primary: #ffffff; --surface-secondary: #f9fafb; --surface-tertiary: #e8edf3; --surface-elevated: #ffffff; --surface-overlay: rgba(0, 0, 0, 0.05); /* Text */ --text-primary: #111827; --text-secondary: #4b5563; --text-tertiary: #64748b; --text-disabled: #9ca3af; --text-inverse: #ffffff; --text-brand: var(--brand-600); --text-success: var(--success-700); --text-warning: var(--warning-700); --text-danger: var(--danger-700); /* Borders */ --border-primary: #e5e7eb; --border-secondary: #d1d5db; --border-tertiary: #9ca3af; --border-brand: var(--brand-300); --border-success: var(--success-300); --border-warning: var(--warning-300); --border-danger: var(--danger-300); /* === COMPATIBILITY ALIASES (legacy token bridge) === */ --brand-primary: var(--brand-500); --brand-rgb: 78, 140, 255; --interactive-primary: var(--brand-500); --border-focus: var(--brand-500); --bg-surface: var(--surface-elevated); --bg-card: var(--surface-primary); --border-light: var(--border-primary); --hover-bg: var(--surface-secondary); --accent-bg: color-mix(in srgb, var(--brand-500) 18%, transparent 82%); --info-border: var(--info-200); --info-fg: var(--info-800); --error-bg: var(--danger-100); --error-border: var(--danger-200); --error-fg: var(--danger-700); --success-bg: var(--success-100); --success-border: var(--success-200); --success-fg: var(--success-700); /* Legacy spacing key still referenced in core drag/drop styles. */ --space-1_5: 0.375rem; /* === TYPOGRAPHY === */ /* Font Families */ --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace; /* Font Sizes */ --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: 1.25rem; --text-2xl: 1.5rem; --text-3xl: 1.875rem; --text-4xl: 2.25rem; --text-5xl: 3rem; /* Line Heights */ --leading-none: 1; --leading-tight: 1.25; --leading-snug: 1.375; --leading-normal: 1.5; --leading-relaxed: 1.625; --leading-loose: 2; /* Font Weights */ --font-thin: 100; --font-light: 300; --font-normal: 400; --font-medium: 500; --font-semibold: 600; --font-bold: 700; --font-extrabold: 800; --font-black: 900; /* === SPACING === */ --space-0: 0; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-7: 1.75rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; --space-32: 8rem; --space-40: 10rem; /* === LAYOUT === */ /* Border Radius */ --radius-none: 0; --radius-sm: 0.125rem; --radius-base: 0.25rem; --radius-md: 0.375rem; --radius-lg: 0.5rem; --radius-xl: 0.75rem; --radius-2xl: 1rem; --radius-3xl: 1.5rem; --radius-full: 9999px; /* Shadows - Elevation System */ --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05); --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); --shadow-base: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); --shadow-md: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); --shadow-lg: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); --shadow-xl: 0 25px 50px -12px rgb(0 0 0 / 0.25); --shadow-2xl: 0 35px 60px -15px rgba(0, 0, 0, 0.3); --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05); /* Colored Shadows */ --shadow-brand: 0 10px 15px -3px rgb(78 140 255 / 0.2), 0 4px 6px -4px rgb(78 140 255 / 0.1); --shadow-success: 0 10px 15px -3px rgb(34 197 94 / 0.2), 0 4px 6px -4px rgb(34 197 94 / 0.1); --shadow-warning: 0 10px 15px -3px rgb(234 179 8 / 0.2), 0 4px 6px -4px rgb(234 179 8 / 0.1); --shadow-danger: 0 10px 15px -3px rgb(239 68 68 / 0.2), 0 4px 6px -4px rgb(239 68 68 / 0.1); /* === TRANSITIONS === */ --transition-none: none; --transition-all: all 150ms cubic-bezier(0.4, 0, 0.2, 1); --transition-fast: all 100ms cubic-bezier(0.4, 0, 0.2, 1); --transition-base: all 200ms cubic-bezier(0.4, 0, 0.2, 1); --transition-slow: all 300ms cubic-bezier(0.4, 0, 0.2, 1); --transition-slower: all 500ms cubic-bezier(0.4, 0, 0.2, 1); /* Easing Functions */ --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-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55); /* === Z-INDEX === */ --z-negative: -1; --z-0: 0; --z-10: 10; --z-20: 20; --z-30: 30; --z-40: 40; --z-50: 50; --z-dropdown: 1000; --z-sticky: 1020; --z-fixed: 1030; --z-modal-backdrop: 1040; --z-modal: 1050; --z-popover: 1060; --z-tooltip: 1070; --z-notification: 1080; /* === BREAKPOINTS === */ --screen-xs: 475px; --screen-sm: 640px; --screen-md: 768px; --screen-lg: 1024px; --screen-xl: 1280px; --screen-2xl: 1536px; /* === ANIMATIONS === */ --animation-spin: spin 1s linear infinite; --animation-ping: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; --animation-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; --animation-bounce: bounce 1s infinite; --animation-float: float 3s ease-in-out infinite; /* === GRADIENTS === */ --gradient-brand: linear-gradient(135deg, var(--brand-400) 0%, var(--brand-600) 100%); --gradient-success: linear-gradient(135deg, var(--success-400) 0%, var(--success-600) 100%); --gradient-warning: linear-gradient(135deg, var(--warning-400) 0%, var(--warning-600) 100%); --gradient-danger: linear-gradient(135deg, var(--danger-400) 0%, var(--danger-600) 100%); --gradient-subtle: linear-gradient(180deg, var(--bg-primary) 0%, var(--bg-secondary) 100%); /* === ORGANIZER SHELL TOKENS === */ --font-editorial-display: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Georgia, serif; --font-editorial-sans: "Avenir Next", "Trebuchet MS", "Gill Sans", "Lucida Grande", sans-serif; --organizer-shell-accent: #173a6a; --organizer-shell-rule: color-mix(in srgb, var(--brand-700) 16%, var(--border-primary) 84%); --organizer-shell-muted: color-mix(in srgb, var(--text-secondary) 78%, var(--text-tertiary) 22%); --organizer-shell-panel-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(244, 247, 251, 0.96)); --organizer-shell-panel-border: color-mix(in srgb, var(--brand-600) 12%, var(--border-primary) 88%); --organizer-shell-panel-shadow: 0 18px 42px -28px rgba(15, 23, 42, 0.28); --organizer-shell-tab-bg: rgba(255, 255, 255, 0.16); --organizer-shell-tab-border: rgba(255, 255, 255, 0.24); --organizer-shell-tab-hover-bg: rgba(255, 255, 255, 0.24); --organizer-shell-tab-hover-border: rgba(255, 255, 255, 0.34); --organizer-shell-tab-active-bg: rgba(255, 255, 255, 0.92); --organizer-shell-tab-active-fg: #173a6a; --organizer-shell-tab-active-border: rgba(255, 255, 255, 0.95); --organizer-shell-eyebrow: color-mix(in srgb, var(--brand-700) 88%, #3f4c63 12%); --organizer-shell-heading: color-mix(in srgb, var(--text-primary) 92%, var(--brand-900) 8%); --organizer-shell-copy: color-mix(in srgb, var(--text-secondary) 82%, var(--text-tertiary) 18%); --organizer-shell-card-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(247, 249, 252, 0.98)); --organizer-shell-card-border: color-mix(in srgb, #b9c6d7 65%, var(--border-primary) 35%); --organizer-shell-card-shadow: 0 20px 38px -34px rgba(15, 23, 42, 0.38); --organizer-shell-card-shadow-hover: 0 28px 50px -34px rgba(15, 23, 42, 0.4); --organizer-shell-card-rule: linear-gradient(90deg, rgba(23, 58, 106, 0.95), rgba(73, 112, 164, 0.52), rgba(23, 58, 106, 0)); --organizer-shell-body-bg: linear-gradient(180deg, rgba(247, 249, 252, 0.96), rgba(238, 243, 248, 0.92)); --organizer-shell-button-bg: rgba(255, 255, 255, 0.88); --organizer-shell-button-border: rgba(255, 255, 255, 0.36); --organizer-shell-button-text: #102743; --organizer-shell-button-shadow: 0 14px 26px -22px rgba(15, 23, 42, 0.46); --organizer-shell-button-hover-bg: rgba(255, 255, 255, 0.97); --organizer-shell-button-hover-text: #0c213a; --organizer-shell-button-hover-border: rgba(255, 255, 255, 0.62); --organizer-shell-button-hover-shadow: 0 18px 30px -22px rgba(15, 23, 42, 0.58); --organizer-shell-chip-bg: rgba(255, 255, 255, 0.9); --organizer-shell-chip-border: color-mix(in srgb, var(--brand-600) 14%, var(--border-primary) 86%); --organizer-shell-chip-active-bg: color-mix(in srgb, var(--brand-100) 60%, #ffffff 40%); --organizer-shell-chip-active-border: color-mix(in srgb, var(--brand-600) 34%, var(--border-primary) 66%); --organizer-shell-empty-bg: linear-gradient(180deg, rgba(248, 250, 252, 0.96), rgba(241, 245, 249, 0.9)); --organizer-shell-empty-border: color-mix(in srgb, var(--brand-600) 18%, var(--border-primary) 82%); --app-shell-muted: color-mix(in srgb, var(--text-secondary) 82%, var(--text-tertiary) 18%); --app-shell-rule: color-mix(in srgb, var(--brand-600) 18%, var(--border-primary) 82%); --app-shell-panel-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.985), rgba(243, 247, 251, 0.97)); --app-shell-panel-border: color-mix(in srgb, var(--brand-600) 14%, var(--border-primary) 86%); --app-shell-panel-shadow: 0 24px 54px -34px rgba(15, 23, 42, 0.34); --app-shell-section-bg: linear-gradient(180deg, rgba(250, 252, 255, 0.98), rgba(244, 247, 251, 0.94)); --app-shell-section-border: color-mix(in srgb, #c1cedf 58%, var(--border-primary) 42%); --app-shell-section-shadow: 0 16px 36px -30px rgba(15, 23, 42, 0.26); --app-shell-button-bg: rgba(255, 255, 255, 0.88); --app-shell-button-border: color-mix(in srgb, var(--brand-600) 18%, var(--border-primary) 82%); --app-shell-button-text: #102743; --app-shell-button-shadow: 0 14px 26px -22px rgba(15, 23, 42, 0.3); --app-shell-pill-bg: rgba(255, 255, 255, 0.8); --app-shell-pill-border: color-mix(in srgb, var(--brand-600) 18%, var(--border-primary) 82%); --app-shell-pill-text: color-mix(in srgb, var(--brand-900) 52%, var(--text-primary) 48%); --app-shell-pill-active-bg: color-mix(in srgb, var(--brand-100) 44%, #ffffff 56%); --app-shell-pill-active-border: color-mix(in srgb, var(--brand-600) 36%, var(--border-primary) 64%); --app-shell-pill-active-text: color-mix(in srgb, var(--brand-800) 74%, var(--text-primary) 26%); --app-shell-title: color-mix(in srgb, var(--text-primary) 90%, var(--brand-800) 10%); --app-shell-copy: color-mix(in srgb, var(--text-secondary) 84%, var(--text-tertiary) 16%); --app-shell-copy-strong: color-mix(in srgb, var(--text-primary) 84%, var(--text-secondary) 16%); --share-copy-menu-gap: 0.4rem; --share-copy-menu-padding: 0.44rem; --share-copy-menu-border: 1px solid color-mix(in srgb, var(--border-primary) 86%, transparent); --share-copy-menu-radius: calc(var(--radius-md) + 2px); --share-copy-menu-bg: linear-gradient(180deg, color-mix(in srgb, var(--surface-primary) 98%, var(--surface-elevated) 2%), color-mix(in srgb, var(--surface-primary) 90%, var(--surface-secondary) 10%)); --share-copy-menu-shadow: 0 18px 38px rgb(15 23 42 / 0.16), 0 8px 18px rgb(15 23 42 / 0.08); --share-copy-menu-z: 1102; --share-copy-menu-mobile-gap: 0.42rem; --share-copy-menu-mobile-padding: 0.48rem; --tool-shell-intro-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(244, 248, 252, 0.96)); --tool-shell-intro-border: color-mix(in srgb, var(--brand-600) 12%, var(--border-primary) 88%); --tool-shell-intro-shadow: 0 20px 42px -34px rgba(15, 23, 42, 0.28); --tool-shell-panel-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(245, 248, 252, 0.97)); --tool-shell-panel-border: color-mix(in srgb, #bfd0e2 58%, var(--border-primary) 42%); --tool-shell-panel-shadow: 0 22px 44px -34px rgba(15, 23, 42, 0.3); --tool-shell-subpanel-bg: linear-gradient(180deg, rgba(251, 253, 255, 0.98), rgba(243, 247, 251, 0.95)); --tool-shell-subpanel-border: color-mix(in srgb, var(--brand-600) 10%, var(--border-primary) 90%); --tool-shell-input-bg: rgba(255, 255, 255, 0.86); --tool-shell-input-border: color-mix(in srgb, var(--brand-600) 14%, var(--border-primary) 86%); --tool-shell-rule: color-mix(in srgb, var(--brand-700) 14%, var(--border-primary) 86%); --tool-shell-muted: color-mix(in srgb, var(--text-secondary) 82%, var(--text-tertiary) 18%); --tool-shell-eyebrow: color-mix(in srgb, var(--brand-700) 70%, #50627d 30%); --tool-shell-badge-bg: color-mix(in srgb, var(--brand-100) 42%, #ffffff 58%); --tool-shell-badge-border: color-mix(in srgb, var(--brand-600) 22%, var(--border-primary) 78%); --tool-shell-badge-text: color-mix(in srgb, var(--brand-800) 72%, var(--text-primary) 28%); --tool-shell-preview-bg: linear-gradient(180deg, rgba(248, 251, 255, 0.98), rgba(240, 245, 250, 0.94)); --tool-shell-checker: rgba(23, 58, 106, 0.06); /* === FOCUS STYLES === */ --focus-ring-width: 3px; --focus-ring-color: var(--brand-500); --focus-ring-offset: 2px; --focus-ring: 0 0 0 var(--focus-ring-offset) var(--bg-primary), 0 0 0 calc(var(--focus-ring-offset) + var(--focus-ring-width)) var(--focus-ring-color); /* Canonical Dark Theme Tokens (Modern System) */ --theme-dark-modern-bg-primary: #13161e; --theme-dark-modern-bg-secondary: #1a1e2a; --theme-dark-modern-bg-tertiary: #222737; --theme-dark-modern-bg-elevated: #1e2230; --theme-dark-modern-bg-overlay: rgba(255, 255, 255, 0.1); --theme-dark-modern-bg-backdrop: rgba(0, 0, 0, 0.8); --theme-dark-modern-surface-primary: #1a1e2a; --theme-dark-modern-surface-secondary: #222737; --theme-dark-modern-surface-tertiary: #303650; --theme-dark-modern-surface-elevated: #252a3a; --theme-dark-modern-surface-overlay: rgba(255, 255, 255, 0.06); --theme-dark-modern-text-primary: #e2e8f0; --theme-dark-modern-text-secondary: #b0bac8; --theme-dark-modern-text-tertiary: #919bae; --theme-dark-modern-text-disabled: #5c6478; --theme-dark-modern-text-inverse: #13161e; --theme-dark-modern-text-brand: var(--brand-400); --theme-dark-modern-text-success: var(--success-400); --theme-dark-modern-text-warning: var(--warning-400); --theme-dark-modern-text-danger: var(--danger-400); --theme-dark-modern-border-primary: #383e54; --theme-dark-modern-border-secondary: #464d66; --theme-dark-modern-border-tertiary: #5c6478; --theme-dark-modern-border-brand: var(--brand-700); --theme-dark-modern-border-success: var(--success-700); --theme-dark-modern-border-warning: var(--warning-700); --theme-dark-modern-border-danger: var(--danger-700); --theme-dark-modern-shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.2); --theme-dark-modern-shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.3), 0 1px 2px -1px rgb(0 0 0 / 0.3); --theme-dark-modern-shadow-base: 0 4px 6px -1px rgb(0 0 0 / 0.3), 0 2px 4px -2px rgb(0 0 0 / 0.3); --theme-dark-modern-shadow-md: 0 10px 15px -3px rgb(0 0 0 / 0.4), 0 4px 6px -4px rgb(0 0 0 / 0.3); --theme-dark-modern-shadow-lg: 0 20px 25px -5px rgb(0 0 0 / 0.5), 0 8px 10px -6px rgb(0 0 0 / 0.4); --theme-dark-modern-shadow-xl: 0 25px 50px -12px rgb(0 0 0 / 0.7); --theme-dark-modern-shadow-2xl: 0 35px 60px -15px rgba(0, 0, 0, 0.8); --theme-dark-modern-shadow-brand: 0 10px 15px -3px rgb(59 130 246 / 0.4), 0 4px 6px -4px rgb(59 130 246 / 0.2); --theme-dark-modern-shadow-success: 0 10px 15px -3px rgb(34 197 94 / 0.4), 0 4px 6px -4px rgb(34 197 94 / 0.2); --theme-dark-modern-shadow-warning: 0 10px 15px -3px rgb(234 179 8 / 0.4), 0 4px 6px -4px rgb(234 179 8 / 0.2); --theme-dark-modern-shadow-danger: 0 10px 15px -3px rgb(239 68 68 / 0.4), 0 4px 6px -4px rgb(239 68 68 / 0.2); --theme-dark-modern-focus-ring-color: var(--brand-400); } /* === DARK THEME === */ :root[data-theme="dark"] { /* Backgrounds */ --bg-primary: var(--theme-dark-modern-bg-primary); --bg-secondary: var(--theme-dark-modern-bg-secondary); --bg-tertiary: var(--theme-dark-modern-bg-tertiary); --bg-elevated: var(--theme-dark-modern-bg-elevated); --bg-overlay: var(--theme-dark-modern-bg-overlay); --bg-backdrop: var(--theme-dark-modern-bg-backdrop); /* Surfaces */ --surface-primary: var(--theme-dark-modern-surface-primary); --surface-secondary: var(--theme-dark-modern-surface-secondary); --surface-tertiary: var(--theme-dark-modern-surface-tertiary); --surface-elevated: var(--theme-dark-modern-surface-elevated); --surface-overlay: var(--theme-dark-modern-surface-overlay); /* Text */ --text-primary: var(--theme-dark-modern-text-primary); --text-secondary: var(--theme-dark-modern-text-secondary); --text-tertiary: var(--theme-dark-modern-text-tertiary); --text-disabled: var(--theme-dark-modern-text-disabled); --text-inverse: var(--theme-dark-modern-text-inverse); --text-brand: var(--theme-dark-modern-text-brand); --text-success: var(--theme-dark-modern-text-success); --text-warning: var(--theme-dark-modern-text-warning); --text-danger: var(--theme-dark-modern-text-danger); /* Borders */ --border-primary: var(--theme-dark-modern-border-primary); --border-secondary: var(--theme-dark-modern-border-secondary); --border-tertiary: var(--theme-dark-modern-border-tertiary); --border-brand: var(--theme-dark-modern-border-brand); --border-success: var(--theme-dark-modern-border-success); --border-warning: var(--theme-dark-modern-border-warning); --border-danger: var(--theme-dark-modern-border-danger); /* Shadows - Darker for dark mode */ --shadow-xs: var(--theme-dark-modern-shadow-xs); --shadow-sm: var(--theme-dark-modern-shadow-sm); --shadow-base: var(--theme-dark-modern-shadow-base); --shadow-md: var(--theme-dark-modern-shadow-md); --shadow-lg: var(--theme-dark-modern-shadow-lg); --shadow-xl: var(--theme-dark-modern-shadow-xl); --shadow-2xl: var(--theme-dark-modern-shadow-2xl); /* Colored Shadows for Dark Mode */ --shadow-brand: var(--theme-dark-modern-shadow-brand); --shadow-success: var(--theme-dark-modern-shadow-success); --shadow-warning: var(--theme-dark-modern-shadow-warning); --shadow-danger: var(--theme-dark-modern-shadow-danger); /* Focus Ring for Dark Mode */ --focus-ring-color: var(--theme-dark-modern-focus-ring-color); /* Organizer shell dark-mode parity */ --organizer-shell-accent: #dbe7ff; --organizer-shell-rule: color-mix(in srgb, var(--theme-dark-primary) 24%, var(--theme-dark-border) 76%); --organizer-shell-muted: color-mix(in srgb, var(--theme-dark-body-text) 74%, var(--theme-dark-muted) 26%); --organizer-shell-panel-bg: linear-gradient(180deg, rgba(26, 30, 42, 0.94), rgba(19, 22, 30, 0.98)); --organizer-shell-panel-border: color-mix(in srgb, var(--theme-dark-primary) 18%, var(--theme-dark-border) 82%); --organizer-shell-panel-shadow: 0 24px 56px -34px rgba(2, 6, 23, 0.78); --organizer-shell-tab-bg: rgba(11, 15, 24, 0.32); --organizer-shell-tab-border: rgba(160, 180, 220, 0.14); --organizer-shell-tab-active-bg: rgba(231, 239, 255, 0.92); --organizer-shell-tab-active-fg: #102743; --organizer-shell-tab-active-border: rgba(231, 239, 255, 0.96); --organizer-shell-eyebrow: color-mix(in srgb, var(--theme-dark-primary) 48%, #ffffff 52%); --organizer-shell-card-bg: linear-gradient(180deg, rgba(28, 34, 48, 0.96), rgba(19, 24, 34, 0.98)); --organizer-shell-card-border: color-mix(in srgb, var(--theme-dark-primary) 16%, var(--theme-dark-border) 84%); --organizer-shell-card-shadow: 0 30px 60px -38px rgba(2, 6, 23, 0.88); --organizer-shell-card-shadow-hover: 0 36px 70px -34px rgba(2, 6, 23, 0.92); --organizer-shell-card-rule: linear-gradient(90deg, rgba(146, 183, 255, 0.92), rgba(130, 170, 255, 0.46), rgba(130, 170, 255, 0)); --organizer-shell-body-bg: linear-gradient(180deg, rgba(20, 25, 36, 0.95), rgba(15, 19, 28, 0.98)); --organizer-shell-button-bg: rgba(18, 24, 36, 0.64); --organizer-shell-button-border: rgba(146, 183, 255, 0.22); --organizer-shell-button-text: #eef4ff; --organizer-shell-button-hover-text: #eef4ff; --organizer-shell-button-shadow: 0 16px 30px -24px rgba(2, 6, 23, 0.88); --organizer-shell-chip-bg: rgba(18, 24, 36, 0.78); --organizer-shell-chip-border: color-mix(in srgb, var(--theme-dark-primary) 20%, var(--theme-dark-border) 80%); --organizer-shell-chip-active-bg: color-mix(in srgb, var(--theme-dark-primary) 18%, var(--theme-dark-surface-raised) 82%); --organizer-shell-chip-active-border: color-mix(in srgb, var(--theme-dark-primary) 42%, var(--theme-dark-border) 58%); --organizer-shell-empty-bg: linear-gradient(180deg, rgba(21, 28, 40, 0.92), rgba(16, 21, 31, 0.98)); --organizer-shell-empty-border: color-mix(in srgb, var(--theme-dark-primary) 22%, var(--theme-dark-border) 78%); --app-shell-muted: color-mix(in srgb, var(--theme-dark-body-text) 78%, var(--theme-dark-muted) 22%); --app-shell-rule: color-mix(in srgb, var(--theme-dark-primary) 26%, var(--theme-dark-border) 74%); --app-shell-panel-bg: linear-gradient(180deg, rgba(24, 30, 42, 0.97), rgba(16, 20, 29, 0.99)); --app-shell-panel-border: color-mix(in srgb, var(--theme-dark-primary) 20%, var(--theme-dark-border) 80%); --app-shell-panel-shadow: 0 32px 70px -34px rgba(2, 6, 23, 0.86); --app-shell-section-bg: linear-gradient(180deg, rgba(29, 35, 49, 0.94), rgba(20, 24, 35, 0.98)); --app-shell-section-border: color-mix(in srgb, var(--theme-dark-primary) 18%, var(--theme-dark-border) 82%); --app-shell-section-shadow: 0 20px 42px -32px rgba(2, 6, 23, 0.82); --app-shell-button-bg: rgba(18, 24, 36, 0.74); --app-shell-button-border: color-mix(in srgb, var(--theme-dark-primary) 26%, var(--theme-dark-border) 74%); --app-shell-button-text: #eef4ff; --app-shell-button-shadow: 0 16px 30px -22px rgba(2, 6, 23, 0.88); --app-shell-pill-bg: rgba(15, 20, 30, 0.74); --app-shell-pill-border: color-mix(in srgb, var(--theme-dark-primary) 20%, var(--theme-dark-border) 80%); --app-shell-pill-text: color-mix(in srgb, var(--theme-dark-body-text) 90%, #f8fbff 10%); --organizer-shell-tab-hover-bg: color-mix(in srgb, var(--theme-dark-primary) 16%, rgba(18, 24, 36, 0.86)); --organizer-shell-tab-hover-border: color-mix(in srgb, var(--theme-dark-primary) 28%, var(--theme-dark-border) 72%); --app-shell-pill-active-bg: color-mix(in srgb, var(--theme-dark-primary) 22%, var(--theme-dark-surface-raised) 78%); --app-shell-pill-active-border: color-mix(in srgb, var(--theme-dark-primary) 44%, var(--theme-dark-border) 56%); --app-shell-pill-active-text: #eef4ff; --app-shell-title: color-mix(in srgb, #f3f7ff 88%, var(--theme-dark-primary) 12%); --organizer-shell-heading: color-mix(in srgb, #f5f8ff 90%, var(--theme-dark-primary) 10%); --organizer-shell-copy: color-mix(in srgb, var(--theme-dark-body-text) 78%, var(--theme-dark-muted) 22%); --organizer-shell-button-hover-bg: color-mix(in srgb, var(--theme-dark-primary) 16%, rgba(18, 24, 36, 0.88)); --organizer-shell-button-hover-border: color-mix(in srgb, var(--theme-dark-primary) 36%, var(--theme-dark-border) 64%); --organizer-shell-button-hover-shadow: 0 18px 32px -24px rgba(2, 6, 23, 0.9); --app-shell-copy: color-mix(in srgb, var(--theme-dark-body-text) 80%, var(--theme-dark-muted) 20%); --app-shell-copy-strong: color-mix(in srgb, var(--theme-dark-body-text) 90%, var(--theme-dark-primary) 10%); --share-copy-menu-border: 1px solid color-mix(in srgb, var(--theme-dark-primary) 18%, var(--theme-dark-border)); --share-copy-menu-bg: linear-gradient(180deg, color-mix(in srgb, var(--theme-dark-surface-raised) 88%, var(--theme-dark-bg-secondary) 12%), color-mix(in srgb, var(--theme-dark-surface-base) 90%, var(--theme-dark-bg) 10%)); --share-copy-menu-shadow: 0 24px 54px color-mix(in srgb, var(--theme-dark-bg) 56%, transparent), 0 10px 24px color-mix(in srgb, var(--theme-dark-bg) 34%, transparent); --tool-shell-intro-bg: linear-gradient(180deg, rgba(24, 30, 42, 0.97), rgba(17, 21, 31, 0.99)); --tool-shell-intro-border: color-mix(in srgb, var(--theme-dark-primary) 18%, var(--theme-dark-border) 82%); --tool-shell-intro-shadow: 0 28px 58px -34px rgba(2, 6, 23, 0.86); --tool-shell-panel-bg: linear-gradient(180deg, rgba(25, 31, 44, 0.97), rgba(17, 21, 31, 0.99)); --tool-shell-panel-border: color-mix(in srgb, var(--theme-dark-primary) 20%, var(--theme-dark-border) 80%); --tool-shell-panel-shadow: 0 30px 62px -34px rgba(2, 6, 23, 0.9); --tool-shell-subpanel-bg: linear-gradient(180deg, rgba(30, 36, 50, 0.96), rgba(21, 25, 36, 0.99)); --tool-shell-subpanel-border: color-mix(in srgb, var(--theme-dark-primary) 18%, var(--theme-dark-border) 82%); --tool-shell-input-bg: rgba(17, 22, 32, 0.78); --tool-shell-input-border: color-mix(in srgb, var(--theme-dark-primary) 24%, var(--theme-dark-border) 76%); --tool-shell-rule: color-mix(in srgb, var(--theme-dark-primary) 26%, var(--theme-dark-border) 74%); --tool-shell-muted: color-mix(in srgb, var(--theme-dark-body-text) 76%, var(--theme-dark-muted) 24%); --tool-shell-eyebrow: color-mix(in srgb, var(--theme-dark-primary) 54%, #ffffff 46%); --tool-shell-badge-bg: color-mix(in srgb, var(--theme-dark-primary) 18%, var(--theme-dark-surface-raised) 82%); --tool-shell-badge-border: color-mix(in srgb, var(--theme-dark-primary) 38%, var(--theme-dark-border) 62%); --tool-shell-badge-text: #eef4ff; --tool-shell-preview-bg: linear-gradient(180deg, rgba(19, 24, 36, 0.98), rgba(12, 16, 24, 0.99)); --tool-shell-checker: rgba(160, 183, 220, 0.08); /* Status Color Overrides for Dark Mode */ --success-50: #052e16; --success-200: #14532d; --warning-50: #422006; --warning-200: #713f12; --danger-50: #450a0a; --danger-200: #7f1d1d; --info-50: #172554; --info-200: #1e3a8a; --info-700: #93bbfd; } /* === HIGH CONTRAST MODE === */ @media (prefers-contrast: high) { :root { --focus-ring-width: 4px; --border-primary: currentColor; --text-primary: #000000; --bg-primary: #ffffff; } :root[data-theme="dark"] { --text-primary: #ffffff; --bg-primary: #000000; } } /* === REDUCED MOTION === */ @media (prefers-reduced-motion: reduce) { :root { --transition-none: none; --transition-all: none; --transition-fast: none; --transition-base: none; --transition-slow: none; --transition-slower: none; --animation-spin: none; --animation-ping: none; --animation-pulse: none; --animation-bounce: none; --animation-float: none; } } /* === PRINT STYLES === */ @media print { :root { --bg-primary: #ffffff; --text-primary: #000000; --shadow-none: none; --shadow-xs: none; --shadow-sm: none; --shadow-base: none; --shadow-md: none; --shadow-lg: none; --shadow-xl: none; --shadow-2xl: none; } }