/** * i2cv — Design Tokens * Light / dark themes, color presets, MD3-inspired elevation & shape. * Apply theme: * Apply preset: */ /* -------------------------------------------------------------------------- */ /* Base tokens (shared across themes) */ /* -------------------------------------------------------------------------- */ :root { /* Brand */ --i2-brand-navy: #001233; --i2-brand-accent: #007bff; --i2-brand-accent-light: #00b4ff; --i2-brand-gradient: linear-gradient(135deg, #007bff, #00b4ff); /* Typography */ --i2-font-display: "Outfit", system-ui, sans-serif; --i2-font-body: "Manrope", system-ui, sans-serif; --i2-font-mono: "JetBrains Mono", ui-monospace, monospace; --i2-fs-xs: 0.75rem; --i2-fs-sm: 0.875rem; --i2-fs-base: 1rem; --i2-fs-md: 1.125rem; --i2-fs-lg: 1.25rem; --i2-fs-xl: 1.5rem; --i2-fs-2xl: 2rem; --i2-fs-3xl: 2.5rem; --i2-fs-4xl: clamp(2.5rem, 5vw, 3.75rem); --i2-fs-hero: clamp(2.75rem, 6vw, 4.5rem); --i2-fw-regular: 400; --i2-fw-medium: 500; --i2-fw-semibold: 600; --i2-fw-bold: 700; --i2-lh-tight: 1.15; --i2-lh-snug: 1.35; --i2-lh-normal: 1.6; --i2-tracking-tight: -0.02em; --i2-tracking-wide: 0.08em; /* Layout */ --i2-container: 72rem; --i2-container-wide: 80rem; --i2-gutter: clamp(1rem, 3vw, 1.5rem); --i2-header-h: 4.25rem; --i2-section-y: clamp(3.5rem, 8vw, 6rem); /* Motion */ --i2-ease-out: cubic-bezier(0.22, 1, 0.36, 1); --i2-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --i2-duration-fast: 150ms; --i2-duration: 280ms; --i2-duration-slow: 480ms; /* MD3 shape (corner radius) */ --i2-shape-none: 0; --i2-shape-xs: 0.25rem; --i2-shape-sm: 0.5rem; --i2-shape-md: 0.75rem; --i2-shape-lg: 1rem; --i2-shape-xl: 1.5rem; --i2-shape-full: 9999px; /* Focus ring */ --i2-focus-ring: 0 0 0 3px color-mix(in srgb, var(--i2-primary) 40%, transparent); /* Z-index scale */ --i2-z-base: 1; --i2-z-sticky: 100; --i2-z-dropdown: 200; --i2-z-offcanvas: 300; --i2-z-modal: 400; --i2-z-toast: 500; --i2-z-skip: 1000; } /* -------------------------------------------------------------------------- */ /* Color presets — override primary / gradient via [data-preset] */ /* -------------------------------------------------------------------------- */ :root, [data-preset="blue"] { --i2-primary: #007bff; --i2-primary-hover: #0066d6; --i2-primary-pressed: #0052ad; --i2-primary-container: #e8f3ff; --i2-on-primary: #ffffff; --i2-secondary: #00b4ff; --i2-gradient: linear-gradient(135deg, #007bff, #00b4ff); --i2-gradient-soft: linear-gradient(135deg, rgba(0, 123, 255, 0.12), rgba(0, 180, 255, 0.08)); } [data-preset="teal"] { --i2-primary: #0d9488; --i2-primary-hover: #0f766e; --i2-primary-pressed: #115e59; --i2-primary-container: #e6fffa; --i2-on-primary: #ffffff; --i2-secondary: #2dd4bf; --i2-gradient: linear-gradient(135deg, #0d9488, #2dd4bf); --i2-gradient-soft: linear-gradient(135deg, rgba(13, 148, 136, 0.12), rgba(45, 212, 191, 0.08)); } [data-preset="indigo"] { --i2-primary: #4338ca; --i2-primary-hover: #3730a3; --i2-primary-pressed: #312e81; --i2-primary-container: #eef2ff; --i2-on-primary: #ffffff; --i2-secondary: #818cf8; --i2-gradient: linear-gradient(135deg, #4338ca, #818cf8); --i2-gradient-soft: linear-gradient(135deg, rgba(67, 56, 202, 0.12), rgba(129, 140, 248, 0.08)); } [data-preset="emerald"] { --i2-primary: #059669; --i2-primary-hover: #047857; --i2-primary-pressed: #065f46; --i2-primary-container: #ecfdf5; --i2-on-primary: #ffffff; --i2-secondary: #34d399; --i2-gradient: linear-gradient(135deg, #059669, #34d399); --i2-gradient-soft: linear-gradient(135deg, rgba(5, 150, 105, 0.12), rgba(52, 211, 153, 0.08)); } /* -------------------------------------------------------------------------- */ /* Light theme */ /* -------------------------------------------------------------------------- */ :root, [data-theme="light"] { color-scheme: light; --i2-bg: #f7f9fc; --i2-bg-elevated: #ffffff; --i2-bg-muted: #eef2f8; --i2-bg-inverse: var(--i2-brand-navy); --i2-surface: #ffffff; --i2-surface-2: #f0f4fa; --i2-surface-3: #e4ebf5; --i2-on-bg: #001233; --i2-on-bg-muted: #4a5a78; --i2-on-bg-subtle: #6b7c99; --i2-on-surface: #001233; --i2-on-inverse: #f7f9fc; --i2-border: #d5deeb; --i2-border-strong: #b8c5d9; --i2-divider: rgba(0, 18, 51, 0.08); --i2-link: var(--i2-primary); --i2-link-hover: var(--i2-primary-hover); --i2-success: #059669; --i2-warning: #d97706; --i2-danger: #dc2626; --i2-info: #0284c7; /* MD3 elevation (light) */ --i2-elevation-0: none; --i2-elevation-1: 0 1px 2px rgba(0, 18, 51, 0.06), 0 1px 3px rgba(0, 18, 51, 0.04); --i2-elevation-2: 0 2px 6px rgba(0, 18, 51, 0.08), 0 4px 12px rgba(0, 18, 51, 0.05); --i2-elevation-3: 0 4px 12px rgba(0, 18, 51, 0.1), 0 8px 24px rgba(0, 18, 51, 0.06); --i2-elevation-4: 0 8px 24px rgba(0, 18, 51, 0.12), 0 16px 40px rgba(0, 18, 51, 0.08); --i2-elevation-5: 0 12px 32px rgba(0, 18, 51, 0.14), 0 24px 48px rgba(0, 18, 51, 0.1); /* State layers (on surface / on primary) */ --i2-state-hover: rgba(0, 18, 51, 0.06); --i2-state-focus: rgba(0, 123, 255, 0.12); --i2-state-pressed: rgba(0, 18, 51, 0.1); --i2-state-dragged: rgba(0, 18, 51, 0.14); --i2-state-on-primary-hover: rgba(255, 255, 255, 0.12); --i2-state-on-primary-pressed: rgba(255, 255, 255, 0.2); --i2-header-bg: rgba(247, 249, 252, 0.85); --i2-header-border: rgba(0, 18, 51, 0.08); --i2-mega-bg: #ffffff; --i2-overlay: rgba(0, 18, 51, 0.45); --i2-hero-overlay: linear-gradient( 135deg, rgba(0, 18, 51, 0.88) 0%, rgba(0, 18, 51, 0.55) 45%, rgba(0, 123, 255, 0.35) 100% ); --i2-scrollbar-track: #eef2f8; --i2-scrollbar-thumb: #b8c5d9; } /* -------------------------------------------------------------------------- */ /* Dark theme */ /* -------------------------------------------------------------------------- */ [data-theme="dark"] { color-scheme: dark; --i2-bg: #000c1f; --i2-bg-elevated: #0a1628; --i2-bg-muted: #0f1c30; --i2-bg-inverse: #f7f9fc; --i2-surface: #0a1628; --i2-surface-2: #122038; --i2-surface-3: #1a2c48; --i2-on-bg: #e8eef8; --i2-on-bg-muted: #9aacc8; --i2-on-bg-subtle: #6b80a0; --i2-on-surface: #e8eef8; --i2-on-inverse: #001233; --i2-border: #243552; --i2-border-strong: #3a4f70; --i2-divider: rgba(232, 238, 248, 0.1); --i2-link: var(--i2-secondary); --i2-link-hover: #7dd3fc; --i2-success: #34d399; --i2-warning: #fbbf24; --i2-danger: #f87171; --i2-info: #38bdf8; --i2-elevation-0: none; --i2-elevation-1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.3); --i2-elevation-2: 0 2px 6px rgba(0, 0, 0, 0.45), 0 4px 12px rgba(0, 0, 0, 0.35); --i2-elevation-3: 0 4px 12px rgba(0, 0, 0, 0.5), 0 8px 24px rgba(0, 0, 0, 0.4); --i2-elevation-4: 0 8px 24px rgba(0, 0, 0, 0.55), 0 16px 40px rgba(0, 0, 0, 0.45); --i2-elevation-5: 0 12px 32px rgba(0, 0, 0, 0.6), 0 24px 48px rgba(0, 0, 0, 0.5); --i2-state-hover: rgba(232, 238, 248, 0.08); --i2-state-focus: rgba(0, 123, 255, 0.24); --i2-state-pressed: rgba(232, 238, 248, 0.12); --i2-state-dragged: rgba(232, 238, 248, 0.16); --i2-state-on-primary-hover: rgba(255, 255, 255, 0.12); --i2-state-on-primary-pressed: rgba(255, 255, 255, 0.2); --i2-header-bg: rgba(0, 12, 31, 0.88); --i2-header-border: rgba(232, 238, 248, 0.08); --i2-mega-bg: #0a1628; --i2-overlay: rgba(0, 0, 0, 0.6); --i2-hero-overlay: linear-gradient( 135deg, rgba(0, 12, 31, 0.92) 0%, rgba(0, 18, 51, 0.7) 45%, rgba(0, 123, 255, 0.3) 100% ); --i2-scrollbar-track: #0f1c30; --i2-scrollbar-thumb: #3a4f70; /* Darker primary containers for dark surfaces */ --i2-primary-container: color-mix(in srgb, var(--i2-primary) 18%, var(--i2-surface)); } /* Preset primary-container tweaks in dark mode */ [data-theme="dark"][data-preset="blue"], [data-theme="dark"]:not([data-preset]) { --i2-primary-container: #0c2748; } [data-theme="dark"][data-preset="teal"] { --i2-primary-container: #0a2e2b; } [data-theme="dark"][data-preset="indigo"] { --i2-primary-container: #1a1a3a; } [data-theme="dark"][data-preset="emerald"] { --i2-primary-container: #0a2e22; } /* -------------------------------------------------------------------------- */ /* Reduced motion token helper */ /* -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { :root { --i2-duration-fast: 0ms; --i2-duration: 0ms; --i2-duration-slow: 0ms; } }