/* ========================================================================= DevsArt Innovation — Design Tokens (single source of truth) Brand-led: Azure (from logo) · Violet + Pink accents · Deep-navy surfaces. Dark theme is the default. Add data-theme="light" on for light. Load this file FIRST in any project (website, panel, dashboard, web app). ========================================================================= */ :root { /* --------------------------------------------------------------------- 1. PRIMITIVE COLOR RAMPS (never reference these directly in UI code — use the semantic tokens in section 2. Ramps exist so themes can remap.) --------------------------------------------------------------------- */ /* Brand · Azure — sampled from the logo mark (#00A9E5) */ --azure-50: #eaf7fe; --azure-100: #cfedfc; --azure-200: #a6ddf8; --azure-300: #6fc7f1; --azure-400: #33ade7; --azure-500: #0fa0db; /* brand primary */ --azure-600: #0a82b8; --azure-700: #0c6791; --azure-800: #105473; --azure-900: #123f57; --azure-950: #0a2838; /* Secondary · Violet — from the current site (#7C5CFF) */ --violet-50: #f1edff; --violet-100: #e4dbff; --violet-200: #c9b8ff; --violet-300: #aa8eff; --violet-400: #8e6bff; --violet-500: #7c5cff; /* secondary */ --violet-600: #683fe8; --violet-700: #5730c4; --violet-800: #46299a; --violet-900: #382479; /* Tertiary · Pink + bright Cyan — accents / gradient stops */ --pink-400: #f991c8; --pink-500: #f472b6; --pink-600: #e14e9c; --cyan-400: #22d3ee; /* Neutral · Ink (deep navy, dark-theme surfaces) */ --ink-950: #060a14; --ink-900: #0a0f1e; --ink-850: #0e1427; --ink-800: #131a31; --ink-750: #18203c; --ink-700: #1e2745; --ink-600: #2a3454; --ink-500: #3b4668; /* Neutral · Gray (text + light-theme surfaces) */ --gray-50: #f7f9fc; --gray-100: #edf1f8; --gray-200: #dee4f0; --gray-300: #c6cfe1; --gray-400: #9aa5c0; --gray-500: #6e7a99; --gray-600: #4e5a78; --gray-700: #38425c; --gray-800: #232c42; --gray-900: #131a2b; /* Semantic ramps */ --success-50: #e7f8ef; --success-500: #17b667; --success-600: #0e9455; --warning-50: #fef3e2; --warning-500: #f5a524; --warning-600: #d0870f; --danger-50: #fdecea; --danger-500: #f04438; --danger-600: #d22d20; --info-50: #e9f3fe; --info-500: #2e90fa; --info-600: #1b72d0; /* --------------------------------------------------------------------- 2. SEMANTIC TOKENS (DARK THEME — default). Reference THESE in your UI. --------------------------------------------------------------------- */ /* Brand */ --color-primary: var(--azure-500); --color-primary-hover: var(--azure-400); --color-primary-active: var(--azure-600); --color-primary-subtle: color-mix(in srgb, var(--azure-500) 16%, transparent); --color-on-primary: #ffffff; --color-secondary: var(--violet-500); --color-secondary-hover: var(--violet-400); --color-secondary-active: var(--violet-600); --color-secondary-subtle: color-mix(in srgb, var(--violet-500) 16%, transparent); --color-on-secondary: #ffffff; --color-accent: var(--pink-500); /* Surfaces & background */ --color-bg: var(--ink-900); --color-bg-elevated: var(--ink-850); --color-surface: var(--ink-800); --color-surface-2: var(--ink-750); --color-surface-3: var(--ink-700); --color-overlay: rgba(6, 10, 20, 0.66); --color-scrim: rgba(6, 10, 20, 0.85); /* Text */ --color-text: #e8ecf7; --color-text-secondary: #aeb6ce; --color-text-muted: #7e88a6; --color-text-disabled: #545d78; --color-text-inverse: #0a0f1e; --color-text-link: var(--azure-300); --color-text-on-accent: #ffffff; /* Borders & rings */ --color-border: rgba(255, 255, 255, 0.09); --color-border-strong: rgba(255, 255, 255, 0.18); --color-border-interactive: var(--azure-500); --color-focus-ring: color-mix(in srgb, var(--azure-400) 55%, transparent); /* Semantic (feedback) */ --color-success: var(--success-500); --color-success-bg: color-mix(in srgb, var(--success-500) 15%, transparent); --color-warning: var(--warning-500); --color-warning-bg: color-mix(in srgb, var(--warning-500) 15%, transparent); --color-danger: var(--danger-500); --color-danger-bg: color-mix(in srgb, var(--danger-500) 15%, transparent); --color-info: var(--info-500); --color-info-bg: color-mix(in srgb, var(--info-500) 15%, transparent); /* Signature gradients */ --gradient-brand: linear-gradient(135deg, var(--azure-500) 0%, var(--violet-500) 100%); --gradient-aurora: linear-gradient(120deg, var(--cyan-400) 0%, var(--violet-500) 50%, var(--pink-500) 100%); --gradient-surface: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.01)); --gradient-text: linear-gradient(120deg, var(--azure-300), var(--violet-300)); /* --------------------------------------------------------------------- 3. TYPOGRAPHY --------------------------------------------------------------------- */ --font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif; --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace; --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-extrabold: 800; /* Type scale (rem @ 16px base) */ --fs-display-2xl: 4.5rem; --lh-display-2xl: 1.04; --fs-display-xl: 3.5rem; --lh-display-xl: 1.06; --fs-display-lg: 2.75rem; --lh-display-lg: 1.1; --fs-h1: 2.25rem; --lh-h1: 1.15; --fs-h2: 1.75rem; --lh-h2: 1.2; --fs-h3: 1.375rem; --lh-h3: 1.25; --fs-h4: 1.125rem; --lh-h4: 1.3; --fs-body-lg: 1.125rem; --lh-body-lg: 1.6; --fs-body: 1rem; --lh-body: 1.6; --fs-body-sm: 0.875rem; --lh-body-sm: 1.55; --fs-caption: 0.75rem; --lh-caption: 1.4; --fs-overline: 0.6875rem; --lh-overline: 1.3; --ls-tight: -0.02em; --ls-normal: 0; --ls-wide: 0.04em; --ls-overline: 0.12em; /* --------------------------------------------------------------------- 4. SPACING (4px base scale) --------------------------------------------------------------------- */ --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; --space-32: 128px; /* --------------------------------------------------------------------- 5. RADII --------------------------------------------------------------------- */ --radius-xs: 6px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 20px; --radius-2xl: 28px; --radius-pill: 999px; --radius-round: 50%; /* --------------------------------------------------------------------- 6. ELEVATION / SHADOWS (tuned for dark surfaces) --------------------------------------------------------------------- */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.35); --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35); --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-lg: 0 20px 48px -12px rgba(0, 0, 0, 0.55); --shadow-xl: 0 30px 60px -20px rgba(0, 0, 0, 0.6); --shadow-glow: 0 0 40px color-mix(in srgb, var(--azure-500) 35%, transparent); --shadow-glow-violet: 0 0 40px color-mix(in srgb, var(--violet-500) 35%, transparent); /* --------------------------------------------------------------------- 7. MOTION --------------------------------------------------------------------- */ --ease-standard: cubic-bezier(0.22, 1, 0.36, 1); --ease-in: cubic-bezier(0.4, 0, 1, 1); --ease-out: cubic-bezier(0, 0, 0.2, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 320ms; --dur-slower: 480ms; /* --------------------------------------------------------------------- 8. LAYOUT --------------------------------------------------------------------- */ --container-max: 1180px; --container-wide: 1360px; --sidebar-width: 264px; --sidebar-collapsed: 76px; --navbar-height: 68px; --z-base: 0; --z-dropdown: 1000; --z-sticky: 1020; --z-drawer: 1030; --z-modal: 1040; --z-toast: 1050; --z-tooltip: 1060; } /* ========================================================================= LIGHT THEME — set Only semantic tokens are remapped; primitives stay constant. ========================================================================= */ [data-theme="light"] { --color-primary: var(--azure-600); --color-primary-hover: var(--azure-500); --color-primary-active: var(--azure-700); --color-primary-subtle: color-mix(in srgb, var(--azure-500) 12%, transparent); --color-secondary: var(--violet-600); --color-secondary-hover: var(--violet-500); --color-secondary-active: var(--violet-700); --color-secondary-subtle: color-mix(in srgb, var(--violet-500) 12%, transparent); --color-bg: var(--gray-50); --color-bg-elevated: #ffffff; --color-surface: #ffffff; --color-surface-2: var(--gray-50); --color-surface-3: var(--gray-100); --color-overlay: rgba(19, 26, 43, 0.5); --color-scrim: rgba(19, 26, 43, 0.65); --color-text: var(--gray-900); --color-text-secondary: var(--gray-600); --color-text-muted: var(--gray-500); --color-text-disabled: var(--gray-400); --color-text-inverse: #ffffff; --color-text-link: var(--azure-700); --color-border: var(--gray-200); --color-border-strong: var(--gray-300); --color-focus-ring: color-mix(in srgb, var(--azure-500) 40%, transparent); --gradient-surface: linear-gradient(180deg, #ffffff, var(--gray-50)); --gradient-text: linear-gradient(120deg, var(--azure-600), var(--violet-600)); --shadow-xs: 0 1px 2px rgba(19, 26, 43, 0.06); --shadow-sm: 0 2px 8px rgba(19, 26, 43, 0.08); --shadow-md: 0 8px 24px rgba(19, 26, 43, 0.10); --shadow-lg: 0 20px 48px -12px rgba(19, 26, 43, 0.16); --shadow-xl: 0 30px 60px -20px rgba(19, 26, 43, 0.18); } @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; --dur-slower: 0ms; } }