/* * ========================================================================== * design-tokens.css — Aderian Zelly Design Token System * ========================================================================== * * This file defines all visual constants as CSS custom properties (tokens) * for the CloudOps application. It is loaded FIRST, before all other * application stylesheets, so that every subsequent CSS file can reference * these tokens via var(). * * Naming convention: --az-{category}-{name} * az = Aderian Zelly prefix * * Categories: * color – brand palette & semantic colors * font – family, sizes, weights, line-heights, letter-spacing * space – spacing scale (xs → xl) * radius – border-radius values * shadow – box-shadow values * ease – transition easing * duration – transition duration * surface – background surfaces * text – text colors * border – border colors * * Dark-mode overrides are at the bottom via [data-theme="dark"]. * ========================================================================== */ :root { /* ---------- Brand Palette ---------- */ --az-color-primary: #081FF0; --az-color-navy: #030C60; --az-color-bg-dark: #020630; --az-color-white: #FFFFFF; /* ---------- Semantic Colors ---------- */ --az-color-success: #059669; --az-color-success-bg: #f0fdf4; --az-color-success-border: #bbf7d0; --az-color-warning: #d97706; --az-color-warning-bg: #fffbeb; --az-color-warning-border: #fed7aa; --az-color-error: #dc2626; --az-color-error-bg: #fef2f2; --az-color-error-border: #fecaca; --az-color-info: #6b7280; --az-color-info-bg: #f9fafb; --az-color-info-border: #d1d5db; /* ---------- Typography ---------- */ --az-font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; --az-font-size-h1: clamp(1.75rem, 2.5vw, 2.25rem); --az-font-size-h2: clamp(1.375rem, 2vw, 1.75rem); --az-font-size-h3: clamp(1.125rem, 1.5vw, 1.375rem); --az-font-size-h4: clamp(1rem, 1.25vw, 1.125rem); --az-font-size-body: clamp(0.875rem, 1vw, 1rem); --az-font-weight-heading: 500; --az-line-height-heading: 1.15; --az-letter-spacing-body: -0.02em; /* ---------- Spacing ---------- */ --az-space-xs: 4px; --az-space-sm: 8px; --az-space-md: 16px; --az-space-lg: 24px; --az-space-xl: 32px; /* ---------- Border Radii ---------- */ --az-radius-button: 2rem; --az-radius-card: 0; --az-radius-input: 4px; /* ---------- Shadows ---------- */ --az-shadow-card: 0 1px 3px rgba(0, 0, 0, 0.1); --az-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.1); /* ---------- Transitions ---------- */ --az-ease: cubic-bezier(0.4, 0, 0.2, 1); --az-duration: 200ms; /* ---------- Surfaces (Light Mode Defaults) ---------- */ --az-surface-main: #FFFFFF; --az-surface-header: #f8fafc; /* ---------- Text Colors ---------- */ --az-text-primary: #1f2937; --az-text-secondary: #6b7280; /* ---------- Border Colors ---------- */ --az-border-color: #e2e8f0; --az-border-input: #d1d5db; } /* ========================================================================== * Dark Mode Overrides * Applied when is set. * ========================================================================== */ [data-theme="dark"] { --az-surface-main: #0a0f2e; --az-surface-header: #111640; --az-text-primary: #e5e7eb; --az-text-secondary: #9ca3af; --az-border-color: #1e2a4a; --az-border-input: #2d3a5c; --az-shadow-card: 0 1px 3px rgba(0, 0, 0, 0.4); --az-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.3); /* Semantic colors for dark mode — subtle, muted backgrounds */ --az-color-success-bg: rgba(5, 150, 105, 0.12); --az-color-success-border: rgba(5, 150, 105, 0.25); --az-color-warning-bg: rgba(217, 119, 6, 0.12); --az-color-warning-border: rgba(217, 119, 6, 0.25); --az-color-error-bg: rgba(220, 38, 38, 0.12); --az-color-error-border: rgba(220, 38, 38, 0.25); --az-color-info-bg: rgba(107, 114, 128, 0.12); --az-color-info-border: rgba(107, 114, 128, 0.25); }