/* ================================================================ CertifAI Design System — ds-tokens.css Brand token foundation. Single source of truth. All other DS files reference these variables. PREFIX: --ds- (avoids collision with legacy --c-, --sp- tokens) HOW TO USE 1. Add before any page stylesheet. 2. Reference tokens as var(--ds-primary) etc. in your CSS. 3. Do NOT hard-code any colour, spacing, or shadow value — always reference a token. ================================================================ */ :root { /* ── Colour: Brand core ──────────────────────────────────────── */ --ds-primary: #2563EB; /* trust, intelligence, brand anchor */ --ds-primary-hover: #1D4ED8; /* interactive hover state */ --ds-primary-active: #1E40AF; /* pressed / active state */ --ds-primary-light: #DBEAFE; /* = --ds-soft-blue; tinted bg, selected */ --ds-navy: #07111F; /* deep navy: dark section bg */ --ds-navy-2: #0D1F35; /* card surfaces on dark */ --ds-navy-3: #132339; /* subtle elevation on dark */ --ds-bg-dark: #030A14; /* brand-book page dark: darkest bg */ --ds-sidebar: #0F1629; /* dashboard sidebar */ /* ── Colour: AI / Accent ─────────────────────────────────────── */ /* CYAN RULE: reserve EXCLUSIVELY for AI moments. AI Tutor, AI-generated responses, live-AI indicators only. Never use for general UI decoration, numbers, or status. */ --ds-cyan: #38BDF8; --ds-cyan-dim: rgba(56, 189, 248, 0.14); --ds-cyan-border: rgba(56, 189, 248, 0.28); --ds-blue-soft: #5B8DEF; /* mid-blue for decorative/secondary use */ /* ── Colour: Light system ────────────────────────────────────── */ --ds-bg-light: #F8FAFC; /* page background (light mode) */ --ds-card-white: #FFFFFF; /* card surfaces (light mode) */ --ds-text-heading: #0F172A; /* primary heading colour */ --ds-text-body: #475569; /* body / paragraph text */ --ds-text-muted: #64748B; /* labels, captions, subdued */ --ds-text-faint: #94A3B8; /* placeholder, very subdued */ --ds-border: #E5E7EB; /* card/input borders (light) */ /* ── Colour: Dark-page system ────────────────────────────────── */ --ds-panel: rgba(255, 255, 255, 0.025); --ds-panel-2: rgba(255, 255, 255, 0.04); --ds-hairline: rgba(120, 150, 210, 0.14); --ds-hairline-strong: rgba(120, 150, 210, 0.26); --ds-border-dark: rgba(255, 255, 255, 0.08); --ds-ink: #E8EEF9; /* primary text on dark bg */ --ds-ink-dim: #9FB0CC; /* subdued text on dark bg */ --ds-ink-faint: #5E7196; /* very subdued / placeholder on dark */ /* ── Colour: Status — use ONLY for their named purpose ───────── */ /* SUCCESS: completed states, ticks, correct answers */ --ds-success: #22C55E; --ds-success-dim: rgba(34, 197, 94, 0.12); --ds-success-border: rgba(34, 197, 94, 0.28); /* XP / REWARD: XP numbers, coin icons, certificates, gold badges */ --ds-xp: #F59E0B; --ds-xp-dim: rgba(245, 158, 11, 0.12); --ds-xp-border: rgba(245, 158, 11, 0.28); /* STREAK: active streaks, urgency, count-down, error states */ --ds-streak: #EF4444; --ds-streak-dim: rgba(239, 68, 68, 0.12); --ds-streak-border: rgba(239, 68, 68, 0.28); /* BADGE / ACHIEVEMENT: badge tiers, achievement unlocks, purple */ --ds-badge-purple: #8B5CF6; --ds-badge-dim: rgba(139, 92, 246, 0.12); --ds-badge-border: rgba(139, 92, 246, 0.28); /* ── Colour: Pastel support ──────────────────────────────────── */ /* Use for: support cards, onboarding, illustrations, soft backgrounds, marketing examples. NOT for UI actions. */ --ds-soft-blue: #DBEAFE; --ds-soft-cyan: #E0F2FE; --ds-soft-mint: #DCFCE7; --ds-soft-lavender: #EDE9FE; --ds-soft-peach: #FFEDD5; --ds-soft-sand: #FEF3C7; /* ── Colour: Glass surfaces ──────────────────────────────────── */ --ds-glass-dark: rgba(13, 31, 53, 0.88); --ds-glass-darker: rgba(7, 17, 31, 0.95); --ds-glass-light: rgba(255, 255, 255, 0.75); --ds-glass-border-dark: rgba(255, 255, 255, 0.09); --ds-glass-border-light:rgba(255, 255, 255, 0.90); /* ── Typography ──────────────────────────────────────────────── */ /* Sora: headlines, display, major section titles, cert titles, brand statements, gamification numbers */ --ds-font-display: 'Sora', system-ui, sans-serif; /* Inter: body text, UI labels, dashboard text, buttons, forms, navigation, course content, mobile UI */ --ds-font-body: 'Inter', system-ui, sans-serif; /* ── Type scale ──────────────────────────────────────────────── */ /* Base: 16px (1rem). Scale: Major Third (×1.25) */ --ds-text-xs: 0.75rem; /* 12px — captions, helper text */ --ds-text-sm: 0.875rem; /* 14px — labels, nav links */ --ds-text-base: 1rem; /* 16px — body default */ --ds-text-lg: 1.125rem; /* 18px — large body */ --ds-text-xl: 1.25rem; /* 20px — subheading */ --ds-text-2xl: 1.5rem; /* 24px — H3 */ --ds-text-3xl: 1.875rem; /* 30px — H2 small */ --ds-text-4xl: 2.25rem; /* 36px — H2 */ --ds-text-5xl: 3rem; /* 48px — H1 */ --ds-text-6xl: 3.75rem; /* 60px — display */ --ds-text-7xl: 4.5rem; /* 72px — hero display */ /* ── Spacing (8px base grid) ─────────────────────────────────── */ --ds-sp-0: 0px; --ds-sp-1: 4px; --ds-sp-2: 8px; --ds-sp-3: 12px; --ds-sp-4: 16px; --ds-sp-5: 20px; --ds-sp-6: 24px; --ds-sp-7: 28px; --ds-sp-8: 32px; --ds-sp-10: 40px; --ds-sp-12: 48px; --ds-sp-14: 56px; --ds-sp-16: 64px; --ds-sp-20: 80px; --ds-sp-24: 96px; --ds-sp-32: 128px; /* ── Border radius ───────────────────────────────────────────── */ --ds-r-xs: 4px; --ds-r-sm: 6px; --ds-r-md: 10px; --ds-r-lg: 16px; --ds-r-xl: 24px; --ds-r-2xl: 32px; --ds-r-app: 18px; /* brand-book --radius: cards, panels */ --ds-r-full: 9999px; /* ── Shadows ─────────────────────────────────────────────────── */ --ds-shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.07); --ds-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.09); --ds-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.11); --ds-shadow-lg: 0 20px 56px rgba(0, 0, 0, 0.18); --ds-shadow-card: 0 18px 40px -22px rgba(0, 0, 0, 0.60); --ds-shadow-glow: 0 0 48px rgba(37, 99, 235, 0.22); --ds-shadow-cyan: 0 0 32px rgba(56, 189, 248, 0.18); --ds-shadow-xp: 0 0 24px rgba(245, 158, 11, 0.22); /* ── Z-index ─────────────────────────────────────────────────── */ --ds-z-base: 0; --ds-z-raise: 1; --ds-z-card: 10; --ds-z-sticky: 100; --ds-z-overlay: 200; --ds-z-modal: 300; --ds-z-toast: 400; --ds-z-top: 500; /* ── Motion ──────────────────────────────────────────────────── */ --ds-t-fast: 150ms ease; --ds-t-base: 250ms ease; --ds-t-slow: 400ms ease; --ds-t-spring: 500ms cubic-bezier(0.34, 1.56, 0.64, 1); /* ── Layout ──────────────────────────────────────────────────── */ --ds-nav-h: 68px; --ds-sidebar-w: 260px; --ds-max-w: 1200px; --ds-max-w-sm: 800px; --ds-max-w-xs: 560px; /* ── Breakpoints (reference — use in media queries) ──────────── */ /* --ds-bp-xs: 480px — small mobile */ /* --ds-bp-sm: 640px — mobile */ /* --ds-bp-md: 768px — tablet */ /* --ds-bp-lg: 1024px — small desktop */ /* --ds-bp-xl: 1280px — desktop */ /* --ds-bp-2xl: 1440px — wide desktop */ /* ── Touch targets (mobile) ──────────────────────────────────── */ --ds-touch-min: 44px; /* WCAG 2.5.5 minimum touch target */ --ds-touch-sm: 36px; /* compact but acceptable */ } /* ── Reduced motion: zero out all transitions ──────────────────── */ @media (prefers-reduced-motion: reduce) { :root { --ds-t-fast: 0ms; --ds-t-base: 0ms; --ds-t-slow: 0ms; --ds-t-spring: 0ms; } } /* ================================================================ CertifAI Dashboard Design System — v2 token layer From: certifai-v2/design_handoff_dashboard/styles/certifai-ds.css Light theme is the default for dashboard; dark via data-theme="dark". These tokens use bare names (no --ds- prefix) to match the handoff spec verbatim — dashboard.css consumes them directly. ================================================================ */ /* ── Brand greens (always stable; some override in [data-theme="light"]) ── */ :root { --green-300: #86EFAC; --green-400: #4ADE80; /* bright accent text / glow */ --green-500: #22C55E; /* PRIMARY — CTAs, progress */ --green-600: #16A34A; /* pressed / deep / links */ --green-700: #15803D; --mint: #7DEBA8; /* Category accent palette */ --c-partner: #6366F1; /* practice / indigo */ --c-partner-soft: #818CF8; --c-teach: #E0B84C; /* XP / gold */ --c-teach-soft: #F2D27E; --c-request: #FB7185; /* streak / rose */ --c-request-soft: #FDA4AF; /* Radius scale (handoff spec) */ --r-xs: 6px; --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-pill: 999px; /* Motion (handoff spec) */ --ease: cubic-bezier(.22,.61,.36,1); --ease-out: cubic-bezier(.16,1,.3,1); --dur-fast: .14s; --dur: .24s; --dur-slow: .5s; /* Font aliases matching handoff */ --font-sans: 'Inter', system-ui, -apple-system, sans-serif; --font-display: 'Sora', system-ui, sans-serif; } /* ── DARK theme surfaces (dashboard default is light; keep for toggle) ── */ :root, [data-theme="dark"] { --bg: #051009; --bg-elev: #0A1C12; --surface: #0B1A11; --surface-2: #112519; --surface-3: #19341F; --line: rgba(120,230,160,.12); --line-strong: rgba(140,240,180,.20); --line-green: rgba(52,211,153,.34); --text: #F4F7F4; --text-mid: #B8C4BC; --muted: #7E8C83; --faint: #56635A; --on-green: #04130A; --glow: 0 0 60px rgba(34,197,94,.25); --card-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 24px 60px -28px rgba(0,0,0,.8); --grid-dot: rgba(255,255,255,.045); } /* ── LIGHT theme surfaces ── */ [data-theme="light"] { --bg: #EBF1EC; --bg-elev: #E2EBE3; --surface: #FFFFFF; --surface-2: #F2F7F2; --surface-3: #E8F0E9; --line: rgba(11,25,15,.10); --line-strong: rgba(11,25,15,.18); --line-green: rgba(22,163,74,.30); --text: #0C160F; --text-mid: #3C4A40; --muted: #5E6E63; --faint: #93A398; --green-400: #16A34A; --mint: #15803D; --on-green: #04130A; --glow: 0 0 50px rgba(34,197,94,.18); --card-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 18px 40px -24px rgba(11,40,20,.28); --grid-dot: rgba(11,40,20,.06); } @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 0ms; --dur: 0ms; --dur-slow: 0ms; } }