/** * ============================================================================== * AZ LEARN WEB PORTAL — DESIGN SYSTEM TOKENS (css/tokens.css) * ============================================================================== * * Aesthetic Thesis: "Clinical Operations Studio" * Direct adaptation of the AZ Learn Clinical Study Studio design language. * * Core Principles: * 1. Warm Obsidian & Bone Paper Hierarchy: * Deep, warm ink tones (#12100E) with soft bone paper text (#F4EFE6), * eliminating harsh blue/cyan monitor fatigue. * 2. Radiant Clinical Orange Accent: * Vibrant clinical orange (#EA580C) as primary interactive driver, * replacing legacy cool blue, cyan, and teal styling. * 3. Self-Hosted Inter Typography: * Zero external CDN fonts (Rule 2). High legibility tabular figures for metrics. * 4. 100% Backward Compatibility: * Maps all legacy portal variables (--bg-base, --brand-primary, etc.) directly * to new semantic tokens so dynamic JS renders cleanly with zero regressions. * ============================================================================== */ /* --- Self-Hosted Local Inter Font Face (Zero CDNs) --- */ @font-face { font-family: 'Inter'; src: url('../fonts/Inter.var.woff2') format('woff2'); font-weight: 100 900; font-display: swap; font-style: normal; } /* ============================================================================== 1. DEFAULT THEME — WARM OBSIDIAN DARK MODE ============================================================================== */ :root, [data-theme="dark"] { /* --- Canvas Ground & Layered Surfaces --- */ --ground: #12100E; /* Deep warm obsidian canvas */ --surface-1: #1A1714; /* Base card, stage panels, headers */ --surface-2: #24201C; /* Elevated cards, table rows, list items */ --surface-3: #302B26; /* Active items, hover wells, inputs */ --surface-4: #3D3630; /* Popovers, modals, dropdown menus */ /* --- Ink & Typography --- */ --ink: #F4EFE6; /* High-contrast bone paper primary text */ --ink-2: #C8C0B4; /* Warm stone secondary reading text */ --ink-3: #A89F90; /* Muted metadata, captions, placeholders */ /* --- Hairline Structural Borders --- */ --hairline: rgba(244, 239, 230, 0.09); /* Default subtle divider */ --hairline-2: rgba(244, 239, 230, 0.16); /* Card borders, table grid */ --hairline-3: rgba(244, 239, 230, 0.26); /* Hover & focused borders */ /* --- Brand Accent — Radiant Clinical Orange --- */ --foil: #EA580C; /* Primary interactive brand accent */ --foil-hover: #C2410C; /* Interactive hover state */ --foil-dim: rgba(234, 88, 12, 0.14); /* Subtle active background wash */ --foil-bright: #FB923C; /* High-visibility active indicator */ /* --- Semantic Clinical & Administrative Accents --- */ --success: #3D8B6E; /* Green for verified, active, passing */ --success-bg: rgba(61, 139, 110, 0.14); --success-border: rgba(61, 139, 110, 0.32); --warn: #D97706; /* Amber for warning, pending, admin badge */ --warn-bg: rgba(217, 119, 6, 0.14); --warn-border: rgba(217, 119, 6, 0.32); --error: #C45C4A; /* Wine red for danger, revoked, errors */ --error-bg: rgba(196, 92, 74, 0.14); --error-border: rgba(196, 92, 74, 0.32); --tutor-purple: #A855F7; /* Warm violet for tutor badges */ --tutor-purple-bg: rgba(168, 85, 247, 0.14); --tutor-purple-border: rgba(168, 85, 247, 0.32); /* --- Typography Families --- */ --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-display: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-body: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; /* --- Metrics & Radii --- */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 20px; --radius-full: 9999px; /* --- Shadows --- */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.28); --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.36); --shadow-lg: 0 12px 36px rgba(0, 0, 0, 0.48); --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.35); --shadow-elevated: 0 10px 30px rgba(0, 0, 0, 0.55); /* ========================================================================== BACKWARD COMPATIBILITY ALIAS BRIDGES Directly maps legacy azlearn-portal variables so existing scripts, classes, and styles continue working seamlessly. ========================================================================== */ --bg-base: var(--ground); --bg-surface: var(--surface-1); --bg-surface-elevated: var(--surface-2); --bg-surface-subtle: var(--surface-3); --border-subtle: var(--hairline); --border-strong: var(--hairline-2); --border-accent: rgba(234, 88, 12, 0.35); --brand-primary: var(--foil); --brand-primary-hover: var(--foil-hover); --brand-accent: var(--foil-bright); --brand-glow: rgba(234, 88, 12, 0.2); --admin-gold: var(--warn); --admin-gold-bg: var(--warn-bg); --admin-gold-border: var(--warn-border); --success-green: var(--success); --success-green-bg: var(--success-bg); --danger-red: var(--error); --danger-red-bg: var(--error-bg); --text-primary: var(--ink); --text-secondary: var(--ink-2); --text-muted: var(--ink-3); } /* ============================================================================== 2. LIGHT THEME — PARCHMENT STUDIO PALETTE ============================================================================== */ [data-theme="light"] { --ground: #F3EEE4; --surface-1: #FCFAF6; --surface-2: #E8E1D4; --surface-3: #DDD5C6; --surface-4: #C8BFB0; --ink: #1A1714; --ink-2: #4A443C; --ink-3: #6B6458; --hairline: rgba(26, 23, 20, 0.08); --hairline-2: rgba(26, 23, 20, 0.14); --hairline-3: rgba(26, 23, 20, 0.24); --foil: #C2410C; --foil-hover: #9A3412; --foil-dim: rgba(194, 65, 12, 0.12); --foil-bright: #EA580C; --success: #2F745B; --success-bg: rgba(47, 116, 91, 0.12); --success-border: rgba(47, 116, 91, 0.25); --warn: #B45309; --warn-bg: rgba(180, 83, 9, 0.12); --warn-border: rgba(180, 83, 9, 0.25); --error: #B34735; --error-bg: rgba(179, 71, 53, 0.12); --error-border: rgba(179, 71, 53, 0.25); --shadow-sm: 0 1px 2px rgba(26, 23, 20, 0.06); --shadow-md: 0 4px 12px rgba(26, 23, 20, 0.08); --shadow-lg: 0 12px 32px rgba(26, 23, 20, 0.12); --shadow-card: 0 4px 16px rgba(26, 23, 20, 0.08); --shadow-elevated: 0 10px 24px rgba(26, 23, 20, 0.12); --bg-base: var(--ground); --bg-surface: var(--surface-1); --bg-surface-elevated: var(--surface-2); --bg-surface-subtle: var(--surface-3); --border-subtle: var(--hairline); --border-strong: var(--hairline-2); --border-accent: rgba(194, 65, 12, 0.35); --brand-primary: var(--foil); --brand-primary-hover: var(--foil-hover); --brand-accent: var(--foil-bright); --brand-glow: rgba(194, 65, 12, 0.15); --text-primary: var(--ink); --text-secondary: var(--ink-2); --text-muted: var(--ink-3); }