/* ============================================================ DENTAL CLINIC — DESIGN TOKENS Direction: NATURAL WELLNESS (premium / warm clinical) 3-tier architecture: Primitive → Semantic → Component ------------------------------------------------------------ Loaded BEFORE coastal-elements.css and app.css. Palette: warm ocre brand, sage green accent, deep slate, rich ink text, soft neutral surfaces. Dark mode: [data-theme="dark"] attribute on . ============================================================ */ :root { /* ======================================================== LAYER 1 — PRIMITIVE (raw, context-free values) ======================================================== */ /* Ocre/Gold — warm brand primary */ --primitive-ocre-900: #3D340B; --primitive-ocre-800: #4E4210; --primitive-ocre-700: #625512; /* brand base */ --primitive-ocre-600: #7A6A18; --primitive-ocre-400: #A89340; --primitive-ocre-200: #DDD0A0; --primitive-ocre-100: #F0E9CF; --primitive-ocre-50: #F9F5E8; /* Sage green — calm secondary / health accent */ --primitive-sage-800: #5A6030; --primitive-sage-700: #6F7838; --primitive-sage-600: #8E964C; /* sage accent base */ --primitive-sage-400: #AEBB70; --primitive-sage-100: #E8EDCD; --primitive-sage-50: #F3F6E4; /* Deep slate — structural / hero colour */ --primitive-slate-deep-900: #0F1E27; --primitive-slate-deep-800: #162936; /* ink text */ --primitive-slate-deep-700: #223748; --primitive-slate-deep-600: #344C5A; /* hero / deep bg */ --primitive-slate-deep-400: #5F7A8A; --primitive-slate-deep-200: #B0C2CC; --primitive-slate-deep-100: #D8E4EA; --primitive-slate-deep-50: #EEF4F7; /* Neutral / UI greys */ --primitive-neutral-700: #475569; --primitive-neutral-500: #64748B; --primitive-neutral-400: #94A3B8; --primitive-neutral-200: #E4EBF0; --primitive-neutral-100: #F1F5F7; --primitive-canvas: #FAFBF8; /* warm off-white page bg */ --primitive-white: #FFFFFF; /* Status (WCAG-validated pairings) */ --primitive-green-700: #15803D; --primitive-green-100: #DCFCE7; --primitive-green-50: #F0FDF4; --primitive-amber-700: #B45309; --primitive-amber-50: #FFFBEB; --primitive-red-600: #DC2626; --primitive-red-50: #FEF2F2; /* ======================================================== LAYER 2 — SEMANTIC (meaning; names used across the site) ======================================================== */ /* Brand (legacy ocean names → warm ocre/slate) */ --color-ocean-blue: var(--primitive-ocre-700); /* primary brand */ --color-ocean-dark: var(--primitive-ocre-800); /* darker brand */ --color-ocean-deep: var(--primitive-slate-deep-600); /* hero bg */ --color-ocean-light: var(--primitive-ocre-600); --color-coastal-light: var(--primitive-ocre-200); --color-aqua-accent: var(--primitive-sage-600); /* sage green accent */ --color-sand-beige: var(--primitive-neutral-100); /* Text */ --color-primary-text: var(--primitive-slate-deep-800); /* #162936 */ --color-secondary-text: var(--primitive-neutral-700); --color-text-muted: var(--primitive-neutral-500); --color-on-accent: var(--primitive-white); /* Surfaces / background */ --color-bg-light: var(--primitive-canvas); --color-bg-tint: var(--primitive-ocre-50); --color-white: var(--primitive-white); --color-surface: var(--primitive-white); --color-surface-muted: var(--primitive-neutral-100); /* Lines & focus */ --color-border-subtle: var(--primitive-neutral-200); --color-focus-ring: rgba(98, 85, 18, 0.30); /* Status */ --color-status-success: var(--primitive-green-700); --color-status-warning: var(--primitive-amber-700); --color-status-danger: var(--primitive-red-600); /* ======================================================== LAYER 3 — COMPONENT (per-component, wired into real CSS) ======================================================== */ /* App shell */ --header-bg: var(--color-white); --header-border: var(--color-border-subtle); --footer-bg: var(--primitive-slate-deep-800); --footer-text: rgba(255, 255, 255, 0.78); --footer-heading: var(--primitive-white); --footer-line: rgba(255, 255, 255, 0.12); /* Primary button */ --btn-primary-bg: var(--color-ocean-blue); --btn-primary-bg-hover: var(--color-ocean-dark); --btn-primary-text: var(--color-on-accent); /* Outline button */ --btn-outline-fg: var(--color-ocean-blue); --btn-outline-border: var(--color-ocean-blue); --btn-outline-bg-hover: var(--color-ocean-blue); /* Surface card */ --card-surface: var(--color-surface); --card-border: var(--color-border-subtle); /* Hero (deep slate band) */ --hero-bg: var(--color-ocean-deep); --hero-text: var(--color-on-accent); /* Section bands */ --section-tint: var(--color-bg-tint); --section-muted: var(--color-surface-muted); /* Icon medallion */ --medallion-bg: var(--primitive-ocre-50); --medallion-fg: var(--color-ocean-blue); /* ======================================================== TYPOGRAPHY SCALE (rigid, semantic) ======================================================== */ --text-xs: 0.75rem; /* 12px — label small, helper text */ --text-sm: 0.8125rem; /* 13px — metric label, badge, caption */ --text-base: 1rem; /* 16px — body copy */ --text-md: 1.0625rem; /* 17px — nav links, lead-in */ --text-lg: 1.25rem; /* 20px — card title */ --text-xl: 1.5rem; /* 24px — metric value, section sub */ --text-2xl: 2rem; /* 32px — h2 inner */ --text-3xl: 2.5rem; /* 40px — h1 section */ --text-4xl: 3.75rem; /* 60px — hero h1 */ --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; /* ======================================================== MOTION (WCAG 2.1 — prefers-reduced-motion aware) ======================================================== */ --motion-easing: cubic-bezier(0.4, 0, 0.2, 1); --motion-fast: 150ms; /* hover state, micro-interactions */ --motion-base: 200ms; /* standard transitions */ --motion-open: 300ms; /* modal / panel open */ --motion-slow: 350ms; /* page transitions */ /* ======================================================== FORM ELEMENTS ======================================================== */ --input-height: 36px; --input-height-lg: 44px; --input-padding-x: 0.75rem; --input-padding-y: 0.5rem; --input-border-color: var(--color-border-subtle); --input-border-width: 0.5px; --input-border-focus: var(--color-ocean-blue); --input-focus-ring: 0 0 0 3px rgba(98, 85, 18, 0.20); --input-radius: var(--radius-md); --input-bg: var(--color-surface); --input-color: var(--color-primary-text); /* ======================================================== BORDER & RADIUS ======================================================== */ --border-width-default: 0.5px; --border-width-accent: 2px; --border-radius-sm: 6px; --border-radius-md: 8px; /* componenti */ --border-radius-lg: 12px; /* card */ --border-radius-xl: 20px; --border-radius-full: 9999px; /* Legacy aliases (existing markup compatibility) */ --radius-sm: var(--border-radius-sm); --radius-md: var(--border-radius-md); --radius-lg: var(--border-radius-lg); --radius-xl: var(--border-radius-xl); --radius-full: var(--border-radius-full); /* Spacing */ --spacing-xs: 0.5rem; --spacing-sm: 1rem; --spacing-md: 1.5rem; --spacing-lg: 2rem; --spacing-xl: 3rem; --spacing-2xl: 4rem; /* Z-Index */ --z-dropdown: 1000; --z-sticky: 1020; --z-fixed: 1030; --z-modal: 1040; --z-popover: 1050; --z-tooltip: 1060; --z-toast: 1070; /* Shadows */ --shadow-sm: 0 1px 2px rgba(22, 41, 54, 0.04), 0 1px 3px rgba(22, 41, 54, 0.06); --shadow-md: 0 2px 6px rgba(22, 41, 54, 0.05), 0 6px 16px rgba(22, 41, 54, 0.07); --shadow-lg: 0 8px 24px rgba(22, 41, 54, 0.08), 0 2px 6px rgba(22, 41, 54, 0.04); --shadow-xl: 0 20px 48px rgba(22, 41, 54, 0.12), 0 6px 16px rgba(22, 41, 54, 0.06); --shadow-glow: 0 0 0 3px var(--color-focus-ring); /* Transitions (legacy aliases) */ --transition-fast: var(--motion-fast) var(--motion-easing); --transition-base: var(--motion-base) var(--motion-easing); --transition-slow: var(--motion-slow) var(--motion-easing); } /* ============================================================ REDUCED MOTION — override all transitions globally ============================================================ */ @media (prefers-reduced-motion: reduce) { :root { --motion-fast: 0ms; --motion-base: 0ms; --motion-open: 0ms; --motion-slow: 0ms; --transition-fast: 0ms; --transition-base: 0ms; --transition-slow: 0ms; } }