/* ================================================================= Dana Duhok — Design tokens ----------------------------------------------------------------- Modern medical / health-tech. Blue brand (admin-overridable) with an accent-derived companion, cool white + soft-blue tints (light) and deep navy (dark). Friendly: large radii, soft blue shadows, sans type. Accent resolves through --c-accent so one value re-skins the UI. ================================================================= */ :root, html[data-theme="oceanic"] { --c-hue:#2563EB; --c-hue-2:#1D4ED8; } /* default: medical blue */ html[data-theme="sunset"] { --c-hue:#EA580C; --c-hue-2:#C2410C; } html[data-theme="aurora"] { --c-hue:#7C3AED; --c-hue-2:#6D28D9; } html[data-theme="emerald"] { --c-hue:#059669; --c-hue-2:#047857; } html[data-theme="crimson"] { --c-hue:#E11D48; --c-hue-2:#BE123C; } html[data-theme="midnight"] { --c-hue:#3056D3; --c-hue-2:#1E3A8A; } html[data-theme="rose"] { --c-hue:#DB2777; --c-hue-2:#BE185D; } html[data-theme="platinum"] { --c-hue:#475569; --c-hue-2:#334155; } html[data-theme="forest"] { --c-hue:#15803D; --c-hue-2:#166534; } html[data-theme="royal"] { --c-hue:#B45309; --c-hue-2:#92400E; } :root, html[data-theme] { --c-primary: var(--c-accent, var(--c-hue, #2563EB)); --c-primary-2: var(--c-accent-2, var(--c-hue-2, #1D4ED8)); --c-secondary: var(--c-primary); --c-secondary-2: var(--c-primary-2); --c-accent-soft: color-mix(in srgb, var(--c-primary) 12%, transparent); --c-accent-tint: color-mix(in srgb, var(--c-primary) 7%, transparent); --c-on-accent: #FFFFFF; /* text/icon on a solid accent fill */ /* Two-tone gradient companion — derived from the accent (a lighter, same-hue tint) so ONE accent value re-skins every gradient; no fixed colour is ever left behind. Brightened further in OKLCH below where relative colours are supported. */ --c-teal: color-mix(in srgb, var(--c-primary) 58%, #FFFFFF); } /* ----------------------------------------------------------------- LIGHT — cool white + soft-blue tints, slate-navy ink ----------------------------------------------------------------- */ :root, html[data-mode="light"] { color-scheme: light; --c-bg-base: #FFFFFF; --c-bg-1: #FFFFFF; --c-bg-2: color-mix(in srgb, var(--c-primary) 6%, #FFFFFF); /* soft accent band */ --c-surface: #FFFFFF; --c-surface-2: color-mix(in srgb, var(--c-primary) 5%, #FFFFFF); --c-tint: color-mix(in srgb, var(--c-primary) 12%, #FFFFFF); /* icon / chip accent tint */ --c-surface-glass: color-mix(in srgb, var(--c-primary) 6%, transparent); --c-surface-glow: color-mix(in srgb, var(--c-primary) 10%, transparent); --c-border: rgba(15,30,55,0.10); --c-border-strong: rgba(15,30,55,0.16); --c-border-glow: rgba(15,30,55,0.16); --c-rule: var(--c-border-strong); --c-text: #0F1B2D; /* cool slate-navy */ --c-text-2: #475569; --c-text-3: #5B6A80; /* darkened for AA on white/tint */ --c-text-invert: #FFFFFF; /* accent shade safe as small TEXT on light surfaces (>=4.5:1) */ --c-accent-ink: color-mix(in srgb, var(--c-primary) 82%, #000); --c-glow: transparent; --c-glow-soft: transparent; --c-glow-strong: transparent; --c-header-bg: rgba(255,255,255,0.85); --c-header-border: rgba(15,30,55,0.10); --c-success: #16A34A; --c-warning: #D97706; --c-danger: #DC2626; --c-info: var(--c-primary); /* info follows the brand accent */ --c-mesh-1: transparent; --c-mesh-2: transparent; --c-mesh-3: transparent; --c-grid: transparent; /* soft, blue-tinted shadows */ --shadow-xs: 0 1px 2px rgba(15,40,90,0.06); --shadow-sm: 0 1px 2px rgba(15,40,90,0.06), 0 4px 12px -4px rgba(15,40,90,0.10); --shadow-md: 0 10px 28px -10px rgba(15,40,90,0.18), 0 3px 10px -4px rgba(15,40,90,0.10); --shadow-lg: 0 26px 60px -16px rgba(15,40,90,0.24), 0 10px 22px -10px rgba(15,40,90,0.12); --shadow-glass: var(--shadow-sm); --shadow-card: var(--shadow-sm); --shadow-glow: var(--shadow-md); --shadow-btn: 0 6px 16px -6px color-mix(in srgb, var(--c-primary) 45%, transparent); } /* ----------------------------------------------------------------- DARK — deep navy, blue accent ----------------------------------------------------------------- */ html[data-mode="dark"] { color-scheme: dark; --c-bg-base: #0B1220; --c-bg-1: #0F1830; --c-bg-2: #131E3A; --c-surface: #101A33; --c-surface-2: #15203D; --c-tint: color-mix(in srgb, var(--c-primary) 18%, transparent); --c-surface-glass: rgba(255,255,255,0.05); --c-surface-glow: rgba(255,255,255,0.09); --c-border: rgba(180,205,245,0.13); --c-border-strong: rgba(180,205,245,0.22); --c-border-glow: rgba(180,205,245,0.22); --c-rule: var(--c-border-strong); --c-text: #EAF1FB; --c-text-2: #AFBED6; --c-text-3: #8294B0; --c-text-invert: #0B1220; /* lighter accent for small text on navy */ --c-accent-ink: color-mix(in srgb, var(--c-primary) 60%, #FFFFFF); --c-glow: transparent; --c-glow-soft: transparent; --c-glow-strong: transparent; --c-header-bg: rgba(11,18,32,0.85); --c-header-border: rgba(180,205,245,0.12); --c-success: #34D399; --c-warning: #FBBF24; --c-danger: #F87171; --c-info: color-mix(in srgb, var(--c-primary) 72%, #FFFFFF); /* info follows the brand accent */ --c-mesh-1: transparent; --c-mesh-2: transparent; --c-mesh-3: transparent; --c-grid: transparent; --shadow-xs: 0 1px 2px rgba(0,0,0,0.5); --shadow-sm: 0 1px 2px rgba(0,0,0,0.5), 0 4px 12px -4px rgba(0,0,0,0.55); --shadow-md: 0 12px 30px -10px rgba(0,0,0,0.65), 0 3px 10px -4px rgba(0,0,0,0.55); --shadow-lg: 0 28px 64px -16px rgba(0,0,0,0.72), 0 10px 22px -10px rgba(0,0,0,0.6); --shadow-glass: var(--shadow-sm); --shadow-card: var(--shadow-sm); --shadow-glow: var(--shadow-md); --shadow-btn: 0 8px 20px -8px color-mix(in srgb, var(--c-primary) 55%, transparent); } /* ----------------------------------------------------------------- Radius scale (friendly / rounded) + type + gradients ----------------------------------------------------------------- */ :root { --radius-xs: 8px; --radius-sm: 10px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 22px; --radius-2xl: 28px; --font-display: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; /* Accent → lighter same-hue companion (fully re-colourable) */ --grad-primary: linear-gradient(135deg, var(--c-primary) 0%, var(--c-teal) 100%); --grad-primary-deep: linear-gradient(135deg, var(--c-primary-2) 0%, var(--c-primary) 100%); --grad-hero: linear-gradient(135deg, var(--c-primary-2) 0%, var(--c-primary) 45%, var(--c-teal) 100%); --grad-text: linear-gradient(135deg, var(--c-primary), var(--c-primary)); --grad-border: linear-gradient(180deg, var(--c-border-strong), var(--c-border)); --grad-glass: none; --grad-glass-light: none; } /* ----------------------------------------------------------------- Companion polish — where relative colours are supported, brighten the companion in OKLCH so it stays a vivid SAME-HUE highlight (keeps saturation instead of fading toward white). Falls back to the color-mix tint above in older engines. Either way the colour is derived from the accent, so changing the Brand accent re-skins the whole gradient. ----------------------------------------------------------------- */ @supports (color: oklch(from white l c h)) { :root, html[data-theme] { --c-teal: oklch(from var(--c-primary) min(0.9, calc(l + 0.14)) c h); } }