/* ============================================================
* Prism Design Language — Energetic Theme
* ============================================================
*
* The "Energetic" theme: bold orange accents, clean slate
* foundations, confident typography. Built for education
* technology that feels motivating and focused.
*
* USAGE:
* 1. Add this file to your project
* 2. Link it:
* 3. Load fonts (add to ):
*
*
*
*
*
* 4. Use variables: color: var(--color-primary);
*
* ============================================================ */
:root {
/* ----------------------------------------
SPACING TOKENS (4px base unit)
---------------------------------------- */
--spacing-xs: 4px;
--spacing-sm: 8px;
--spacing-md: 12px;
--spacing-lg: 16px;
--spacing-xl: 24px;
--spacing-2xl: 32px;
--spacing-3xl: 48px;
/* Layout */
--max-content-width: 1200px;
/* ----------------------------------------
BORDER RADIUS TOKENS
---------------------------------------- */
--radius-xs: 2px;
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-xl: 16px;
--radius-full: 9999px;
/* ----------------------------------------
SHADOW TOKENS
---------------------------------------- */
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
--shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
--shadow-card: 0 1px 3px rgba(0, 0, 0, 0.1);
--shadow-primary-sm: 0 2px 8px rgba(243, 107, 7, 0.3);
--shadow-primary-md: 0 4px 12px rgba(243, 107, 7, 0.4);
--shadow-elevated: 0 4px 20px rgba(243, 107, 7, 0.08), 0 0 0 1px rgba(243, 107, 7, 0.05);
/* ----------------------------------------
LINE HEIGHTS
---------------------------------------- */
--line-height-tight: 1.25;
--line-height-normal: 1.5;
--line-height-relaxed: 1.7;
/* ----------------------------------------
TRANSITION TOKENS
---------------------------------------- */
--transition-fast: 150ms ease;
--transition-normal: 200ms ease;
/* ----------------------------------------
RESPONSIVE BREAKPOINTS (Reference Only)
CSS variables cannot be used in @media queries.
Use the literal values in media queries:
Mobile: max-width: 767px
Tablet: 768px - 1023px
Desktop: 1024px - 1899px
Large Desktop: min-width: 1900px
---------------------------------------- */
--breakpoint-mobile: 767px;
--breakpoint-tablet: 768px;
--breakpoint-desktop: 1024px;
--breakpoint-large: 1900px;
/* ----------------------------------------
FONT FAMILIES
Plus Jakarta Sans: headings, labels, nav, CTAs, badges (800/700/600)
Inter: body text, descriptions, measurements (400/500)
---------------------------------------- */
--font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--font-family-heading: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
/* ----------------------------------------
FONT SIZES - Scale
---------------------------------------- */
--font-size-2xs: 10px;
--font-size-xs: 12px;
--font-size-sm: 14px;
--font-size-base: 16px;
--font-size-lg: 18px;
--font-size-xl: 20px;
--font-size-2xl: 24px;
--font-size-3xl: 32px;
/* Font Sizes - Display (large gauge/hero numbers) */
--font-size-display-48: 48px;
--font-size-display-60: 60px;
/* Font Sizes - Heading Hierarchy */
--font-size-h1: 40px;
--font-size-h2: 32px;
--font-size-h3: 26px;
--font-size-h4: 24px;
--font-size-h5: 20px;
--font-size-h6: 18px;
--font-size-body: 16px;
/* ----------------------------------------
FONT WEIGHTS
---------------------------------------- */
--font-weight-normal: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
--font-weight-extrabold: 800;
/* ----------------------------------------
PRIMARY COLORS (Orange)
---------------------------------------- */
--color-primary: #f36b07;
--color-primary-dark: #d85e06;
--color-primary-light: #ff8c3a;
--color-primary-50: #fff7ed;
/* ----------------------------------------
CTA GREEN (Start/Continue actions)
---------------------------------------- */
--color-cta: #22C55E;
--color-cta-dark: #16A34A;
--color-cta-light: #4ADE80;
/* ----------------------------------------
SUCCESS (Green)
---------------------------------------- */
--color-success: #22C55E;
--color-success-dark: #16A34A;
--color-success-light: #4ADE80;
--color-success-50: #dcfce7;
/* ----------------------------------------
WARNING (Amber)
---------------------------------------- */
--color-warning: #F59E0B;
--color-warning-dark: #D97706;
--color-warning-light: #FBBF24;
--color-warning-50: #fef9c3;
/* ----------------------------------------
RED (Error/Fail)
---------------------------------------- */
--color-red: #F31260;
--color-red-dark: #BE123C;
--color-red-light: #FF4D8D;
--color-red-50: #fee2e2;
--color-red-500: #ef4444;
/* ----------------------------------------
PURPLE
---------------------------------------- */
--color-purple: #8B5CF6;
--color-purple-dark: #7C3AED;
--color-purple-light: #A78BFA;
/* ----------------------------------------
CYAN (Info)
---------------------------------------- */
--color-cyan: #0EA5E9;
--color-cyan-dark: #0284C7;
--color-cyan-light: #38BDF8;
/* ----------------------------------------
BLUE (Interactive states)
---------------------------------------- */
--color-blue-50: #eff6ff;
--color-blue-500: #3b82f6;
--color-blue-600: #2563eb;
/* ----------------------------------------
ORANGE (Extended primary scale)
---------------------------------------- */
--color-orange-50: #fff7ed;
--color-orange-100: #ffedd5;
--color-orange-200: #fed7aa;
--color-orange-400: #fb923c;
--color-orange-500: #f97316;
--color-orange-600: #ea580c;
--color-orange-700: #c2410c;
--color-orange-800: #9a3412;
/* ----------------------------------------
NEUTRALS (Slate)
---------------------------------------- */
--color-slate-50: #F8FAFC;
--color-slate-100: #F1F5F9;
--color-slate-200: #E2E8F0;
--color-slate-300: #CBD5E1;
--color-slate-400: #94A3B8;
--color-slate-500: #64748B;
--color-slate-600: #475569;
--color-slate-700: #334155;
--color-slate-800: #1E293B;
--color-slate-900: #0F172A;
/* ----------------------------------------
SEMANTIC COLORS
---------------------------------------- */
--text-primary: #11181C;
--text-secondary: #71717A;
--text-muted: #A1A1AA;
--text-tertiary: #9CA3AF;
--text-inverse: #FFFFFF;
--background-card: #FFFFFF;
--background-primary: #FFFFFF;
--border: #E4E4E7;
--border-default: #E4E4E7;
--border-medium: #D1D5DB;
/* Overlays & Alpha Colors (Orange-based) */
--overlay-light: rgba(0, 0, 0, 0.04);
--primary-alpha-10: rgba(243, 107, 7, 0.1);
--primary-alpha-20: rgba(243, 107, 7, 0.2);
/* ----------------------------------------
GRADIENT TOKENS
---------------------------------------- */
--gradient-primary: linear-gradient(90deg, #f36b07 0%, #ff8c3a 100%);
--gradient-primary-90: linear-gradient(90deg, #f36b07 0%, #ff8c3a 100%);
--gradient-primary-subtle: linear-gradient(135deg, rgba(243, 107, 7, 0.08) 0%, rgba(255, 140, 58, 0.04) 100%);
--gradient-hero: linear-gradient(135deg, #9A3412 0%, #EA580C 40%, #f36b07 70%, #ff8c3a 100%);
--gradient-success: linear-gradient(90deg, #22C55E 0%, #16A34A 100%);
--gradient-warning: linear-gradient(90deg, #F59E0B 0%, #D97706 100%);
--gradient-purple: linear-gradient(90deg, #8B5CF6 0%, #7C3AED 100%);
--gradient-secondary: linear-gradient(90deg, #8B5CF6 0%, #7C3AED 100%);
--gradient-red: linear-gradient(90deg, #F31260 0%, #FF4D8D 100%);
--gradient-cyan: linear-gradient(90deg, #0EA5E9 0%, #38BDF8 100%);
}