/* ================================================================
PassFirst NCLEX Prep — Design Tokens
tokens.css
The single source of truth for every color, spacing, type size,
shadow, radius, and timing in the design system.
HOW TO USE:
Every HTML page must link this file FIRST, before any other CSS:
Then reference variables like: color: var(--color-navy);
================================================================ */
:root {
/* ── BRAND COLORS ──────────────────────────────────────────
These are the five brand colors.
Use ONLY these. Do not introduce new colors anywhere.
── */
--brand-navy: #0E2A4A; /* Primary — headlines, nav, dark surfaces */
--brand-teal: #0B6B60; /* Action — buttons, links, highlights */
--brand-gold: #C49A2A; /* Accent — featured elements, pull quotes */
--brand-cream: #FAF7F2; /* Warm white — alternating sections */
--brand-smoke: #F2F4F7; /* Default page background */
/* ── TEXT COLORS ───────────────────────────────────────────
Three levels of text hierarchy.
── */
--text-primary: #0E2A4A; /* Headings, strong labels */
--text-secondary: #3D5166; /* Body copy, paragraph text */
--text-muted: #6A7A8A; /* Captions, placeholders, helper text */
--text-disabled: #A8B4C0; /* Disabled state text */
--text-inverse: #FFFFFF; /* Text on dark backgrounds */
--text-inverse-dim: rgba(255, 255, 255, 0.62); /* Softer text on dark backgrounds */
/* ── SURFACE COLORS ────────────────────────────────────────
Background colors for cards, panels, inputs.
── */
--surface-page: #F2F4F7; /* Page background */
--surface-card: #FFFFFF; /* Standard card / panel */
--surface-card-alt: #FAF7F2; /* Warm-white card variant */
--surface-nav: #0E2A4A; /* Top navigation */
--surface-sidebar: #0B2240; /* Sidebar (slightly darker than nav) */
--surface-input: #FFFFFF; /* Input field background */
--surface-input-focus:#F4F9F8; /* Input field on focus */
--surface-overlay: rgba(14, 42, 74, 0.55); /* Modal overlays */
/* ── BORDER / RULE COLORS ──────────────────────────────────*/
--border-default: #D5DCE6; /* Standard card/table borders */
--border-strong: #B0BCC8; /* Emphasized borders, dividers */
--border-focus: #0B6B60; /* Input focus ring */
--border-error: #8B1A1A; /* Error state border */
/* ── SEMANTIC COLORS ───────────────────────────────────────
Used for status badges, alerts, flags.
Each has a background (light), border (mid), and text (dark) variant.
── */
/* Success / Positive */
--semantic-success-bg: #E6F5EC;
--semantic-success-border: #90CBA8;
--semantic-success-text: #1A5C30;
/* Warning / Caution */
--semantic-warning-bg: #FEF3E2;
--semantic-warning-border: #E6C882;
--semantic-warning-text: #7A4A00;
/* Error / Urgent */
--semantic-error-bg: #FEE8E8;
--semantic-error-border: #D09090;
--semantic-error-text: #8B1A1A;
/* Info / Navy */
--semantic-info-bg: #EBF0F7;
--semantic-info-border: #B0C4DE;
--semantic-info-text: #0E2A4A;
/* Purple / Special */
--semantic-purple-bg: #F0E8FE;
--semantic-purple-border: #C4A8E6;
--semantic-purple-text: #4A1A6B;
/* ── NCJMM LAYER COLORS ────────────────────────────────────
One color per NCJMM layer. Used in progress bars,
badges, and the layer readout charts.
── */
--layer-1-bg: #EBF0F7; --layer-1-text: #0E2A4A; /* Recognize Cues — Navy */
--layer-2-bg: #E6F4F2; --layer-2-text: #0B6B60; /* Analyze Cues — Teal */
--layer-3-bg: #FEF3E2; --layer-3-text: #7A4A00; /* Prioritize Hypotheses — Amber */
--layer-4-bg: #F0E8FE; --layer-4-text: #4A1A6B; /* Generate Solutions — Purple */
--layer-5-bg: #E6F5EC; --layer-5-text: #1A5C30; /* Take Action — Green */
--layer-6-bg: #FEE8E8; --layer-6-text: #8B1A1A; /* Evaluate Outcomes — Red */
/* Layer solid colors (for bar fills, chart lines) */
--layer-1-solid: #0E2A4A;
--layer-2-solid: #0B6B60;
--layer-3-solid: #8B5A00;
--layer-4-solid: #4A1A6B;
--layer-5-solid: #1A5C30;
--layer-6-solid: #8B1A1A;
/* ── TYPOGRAPHY ────────────────────────────────────────────
Three fonts, three purposes.
Never use any font not listed here.
── */
--font-display: 'Fraunces', Georgia, serif; /* Page titles, hero headings, marketing copy */
--font-body: 'DM Sans', system-ui, sans-serif; /* All body text, UI labels, buttons */
--font-mono: 'DM Mono', 'Courier New', monospace; /* Scores, stats, percentages, code */
/* Type scale — use these sizes, not arbitrary numbers */
--text-xs: 0.72rem; /* 11.5px — captions, badges, eyebrow labels */
--text-sm: 0.82rem; /* 13px — helper text, secondary labels */
--text-base: 0.92rem; /* 14.7px — body copy */
--text-md: 1rem; /* 16px — emphasized body, subheadings */
--text-lg: 1.15rem; /* 18.4px — card titles, section labels */
--text-xl: 1.35rem; /* 21.6px — page subheadings */
--text-2xl: 1.65rem; /* 26.4px — section headings */
--text-3xl: 2.1rem; /* 33.6px — major headings */
--text-4xl: 2.8rem; /* 44.8px — hero headings */
--text-5xl: 3.8rem; /* 60.8px — large display text */
/* Line heights */
--leading-tight: 1.2;
--leading-snug: 1.4;
--leading-normal: 1.65;
--leading-relaxed:1.8;
/* Letter spacing */
--tracking-tight: -0.02em;
--tracking-normal: 0;
--tracking-wide: 0.06em;
--tracking-wider: 0.12em;
--tracking-widest: 0.18em;
/* Font weights */
--weight-light: 300;
--weight-normal: 400;
--weight-medium: 500;
--weight-semibold:600;
--weight-bold: 700;
/* ── SPACING SCALE ─────────────────────────────────────────
All spacing uses multiples of 4px.
Use these variables for margin, padding, gap.
Never use arbitrary pixel values.
── */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-7: 28px;
--space-8: 32px;
--space-10: 40px;
--space-12: 48px;
--space-14: 56px;
--space-16: 64px;
--space-20: 80px;
--space-24: 96px;
/* ── BORDER RADIUS ─────────────────────────────────────────*/
--radius-sm: 4px; /* Badges, pills, small chips */
--radius-md: 8px; /* Inputs, small buttons, table cells */
--radius-lg: 12px; /* Cards, panels */
--radius-xl: 16px; /* Large cards, modals */
--radius-2xl: 24px; /* Featured hero cards */
--radius-full: 9999px; /* Pills, avatars, circular elements */
/* ── SHADOWS ───────────────────────────────────────────────*/
--shadow-xs: 0 1px 3px rgba(14, 42, 74, 0.08);
--shadow-sm: 0 2px 8px rgba(14, 42, 74, 0.10);
--shadow-md: 0 4px 18px rgba(14, 42, 74, 0.12);
--shadow-lg: 0 8px 32px rgba(14, 42, 74, 0.14);
--shadow-xl: 0 16px 56px rgba(14, 42, 74, 0.18);
--shadow-2xl:0 24px 80px rgba(14, 42, 74, 0.28);
/* Colored shadows for featured/CTAs */
--shadow-teal: 0 8px 28px rgba(11, 107, 96, 0.22);
--shadow-navy: 0 8px 28px rgba(14, 42, 74, 0.30);
/* ── TRANSITIONS ───────────────────────────────────────────*/
--transition-fast: all 0.12s ease;
--transition-base: all 0.20s ease;
--transition-slow: all 0.35s ease;
--transition-spring: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
/* ── Z-INDEX SCALE ─────────────────────────────────────────*/
--z-base: 1;
--z-raised: 10;
--z-dropdown:100;
--z-sticky: 200;
--z-overlay: 300;
--z-modal: 400;
--z-toast: 500;
/* ── LAYOUT ────────────────────────────────────────────────*/
--max-width-content: 680px; /* Article / reading content */
--max-width-app: 1080px; /* Dashboard / app layout */
--max-width-wide: 1280px; /* Marketing / landing pages */
--nav-height: 58px; /* Top navigation height */
--sidebar-width: 256px; /* Dashboard sidebar width */
}
/* ── DARK SURFACE OVERRIDES ─────────────────────────────────
When inside a dark (navy/teal) container, text colors flip.
Add class="dark-surface" to a dark section and these apply.
── */
.dark-surface {
--text-primary: #FFFFFF;
--text-secondary: rgba(255, 255, 255, 0.78);
--text-muted: rgba(255, 255, 255, 0.50);
--border-default: rgba(255, 255, 255, 0.12);
--surface-card: rgba(255, 255, 255, 0.07);
}