/* ============================================================= DATABEAUTY TRIBE — DESIGN TOKENS (variables.css) Single source of truth for the light-theme design system. Imported FIRST, before every other stylesheet. ============================================================= */ /* Fonts are loaded via a single in views/partials/head.ejs. A CSS @import here would be discovered only after this file parses, serialising the request and delaying first paint. */ :root { /* ── COLOUR ────────────────────────────────────────────────── Brand blue values taken from the existing CSS (tokens.css): navy-mid #0F2D5C, electric #1B6EF3, electric-dim #1553C0. */ --color-primary: #0F2D5C; /* brand dark blue */ --color-primary-light: #1B4C8A; /* lighter navy — primary hover */ --color-accent: #1B6EF3; /* electric blue — pops for CTAs */ --color-accent-hover: #1553C0; /* darker electric — CTA hover */ --color-white: #ffffff; --color-off-white: #f8f9fc; --color-text-dark: #111827; /* primary body text on light bg */ --color-text-medium: #4b5563; /* secondary text */ --color-text-light: #9ca3af; /* muted / captions */ --color-background-dark: #030D1A; /* deep navy — dark sections */ --color-background-mid: #0F2D5C; /* mid navy — dark section variant */ --color-surface: #ffffff; /* cards / panels */ --color-border: #e5e7eb; --color-success: #10b981; --color-warning: #f59e0b; --color-error: #ef4444; /* ── TYPOGRAPHY ──────────────────────────────────────────────── */ --font-display: 'Space Grotesk', sans-serif; --font-body: 'Inter', sans-serif; --font-size-xs: 0.75rem; /* 12px */ --font-size-sm: 0.875rem; /* 14px */ --font-size-base: 1rem; /* 16px */ --font-size-lg: 1.125rem; /* 18px */ --font-size-xl: 1.25rem; /* 20px */ --font-size-2xl: 1.5rem; /* 24px */ --font-size-3xl: 1.875rem; /* 30px */ --font-size-4xl: 2.25rem; /* 36px */ --font-size-5xl: 3rem; /* 48px */ --font-size-6xl: 3.75rem; /* 60px */ --line-height-tight: 1.2; --line-height-normal: 1.6; --line-height-relaxed: 1.8; --font-weight-normal: 400; --font-weight-semibold: 600; --font-weight-bold: 700; --font-weight-extrabold: 800; /* ── SPACING ─────────────────────────────────────────────────── */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ --space-24: 6rem; /* 96px */ --space-32: 8rem; /* 128px */ /* ── BORDER RADIUS ───────────────────────────────────────────── */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 16px; --radius-xl: 24px; --radius-pill: 9999px; /* ── SHADOWS ─────────────────────────────────────────────────── */ --shadow-sm: 0 1px 3px rgba(0,0,0,0.1); --shadow-md: 0 4px 16px rgba(0,0,0,0.12); --shadow-lg: 0 8px 32px rgba(0,0,0,0.16); --shadow-hover: 0 12px 40px rgba(0,0,0,0.2); /* ── BREAKPOINTS (reference — use in media queries) ────────────── Mobile: 375px (default, no media query needed) Tablet: 768px Desktop: 1024px Wide: 1280px */ } /* ============================================================= DARK THEME — activated by data-theme="dark" on (Phase 3 toggle). Overrides the light content tokens back to the original deep-navy palette. Nav/hero/footer already stay dark in both themes via the dark-zone block in components.css; this flips the CONTENT. :root[data-theme] outspecifies the light :root above. ============================================================= */ :root[data-theme="dark"] { --color-bg-base: #030D1A; --color-bg-surface: #071120; --color-bg-elevated: #0C1E3D; --color-bg-hover: #102650; --color-off-white: #030D1A; /* body canvas in dark mode */ --color-surface: #071120; --color-text-primary: #FFFFFF; --color-text-dark: #FFFFFF; /* body text token */ --color-text-medium: rgba(255,255,255,0.72); --color-text-muted: rgba(255,255,255,0.58); --color-text-light: rgba(255,255,255,0.50); --color-sky: #93C5FD; --color-electric-bright: #4D8EFF; --color-cta: #4D8EFF; --color-teal-light: #4D8EFF; --color-violet-light: #93C5FD; --color-border: rgba(147,197,253,0.14); --color-divider: rgba(147,197,253,0.09); --btn-outline-border: rgba(255,255,255,0.28); --btn-outline-border-strong: rgba(255,255,255,0.55); --btn-outline-hover: rgba(255,255,255,0.06); color-scheme: dark; }