/* * IAA Brand Tokens v2.1 * Single source of truth for all IAA design tokens. * Import via: * * Architecture: * Tier 1: Brand Action (--cta-primary) → universal CTA color (yellow) * Tier 2: Division Identity (--div-*) → 12 tokens per division (sales/organic/paid) * Tier 3: Semantic & Utility → text, backgrounds, states * Tier 4: Responsive Layout → spacing, sizing (mobile-first) * * Division switching: set data-division="organic" or data-division="paid" on * Fonts: Sales=Inter, Organic=JetBrains Mono, Paid=Alata * Backgrounds: MD3 dark (never pure #000) * * Breakpoints (mobile-first, min-width): * sm: 480px — large phones landscape * md: 768px — tablets * lg: 1024px — small laptops * xl: 1280px — desktops * 2xl: 1536px — wide monitors */ :root { /* --- Tier 1: Brand Action Color (yellow CTA) --- */ --cta-primary: #fbbf24; --cta-primary-light: #fcd34d; --cta-text: #000000; /* --- Tier 2: Division Identity --- */ /* Organic (TikTok) */ --accent-blue: #38bdf8; --accent-blue-light: #7dd3fc; /* Paid Ads (GYP) */ --accent-purple: #c084fc; --accent-purple-light: #d8b4fe; /* Legacy amber (form accents, section labels, bold text) */ --accent-amber: #fbbf24; --accent-amber-light: #fcd34d; --accent-orange: #fed7aa; /* --- Tier 3: Semantic & Utility --- */ --accent-green: #86efac; --accent-rose: #fda4af; /* Semantic States */ --state-success: #86efac; --state-danger: #fda4af; --state-warning: #f59e0b; --state-info: #60a5fa; /* Text */ --text-primary: #ffffff; --text-secondary: #e5e5e5; --text-muted: #b5b5b5; --text-dark: #8a8a8a; /* Backgrounds */ --bg-deep: #121212; --bg-primary: #1a1a1a; --bg-elevated: #242424; --bg-surface: rgba(84, 52, 15, 0.15); /* Borders */ --border: rgba(180, 83, 9, 0.2); --border-light: rgba(180, 83, 9, 0.35); --border-purple: rgba(168, 85, 247, 0.2); /* Signature gradient (two pillars) */ --gradient-signature: linear-gradient(135deg, #38bdf8, #c084fc); /* --- Division Tokens (default: Sales/Yellow) --- */ /* Override these per-product to shift the entire UI to a division identity */ --div-cta: #fbbf24; --div-cta-hover: #fcd34d; --div-cta-text: #000000; --div-accent: #fbbf24; --div-accent-light: #fcd34d; --div-glow: rgba(251, 191, 36, 0.06); --div-surface: rgba(84, 52, 15, 0.15); --div-border: rgba(180, 83, 9, 0.2); --div-border-light: rgba(180, 83, 9, 0.35); --div-chart: #fbbf24; --div-chart-area: rgba(251, 191, 36, 0.1); --div-font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; /* --- Tier 4: Responsive Layout (mobile-first base) --- */ --container-padding: 16px; --container-max: 1140px; --section-padding: 48px; --grid-gap: 16px; --card-padding: 20px; --card-radius: 12px; --heading-xl: 2rem; --heading-lg: 1.4rem; --heading-md: 1.1rem; --body-size: 0.9rem; --label-size: 0.7rem; --stat-size: 2rem; --touch-min: 44px; --sidebar-width: 0px; --grid-cols-stat: 1; --grid-cols-card: 1; } /* --- Responsive: Tablet (768px+) --- */ @media (min-width: 768px) { :root { --container-padding: 24px; --section-padding: 64px; --grid-gap: 20px; --card-padding: 28px; --card-radius: 14px; --heading-xl: 2.5rem; --heading-lg: 1.6rem; --heading-md: 1.2rem; --stat-size: 2.25rem; --sidebar-width: 220px; --grid-cols-stat: 2; --grid-cols-card: 2; } } /* --- Responsive: Desktop (1024px+) --- */ @media (min-width: 1024px) { :root { --container-padding: 32px; --section-padding: 80px; --grid-gap: 24px; --card-padding: 32px; --heading-xl: 3.5rem; --heading-lg: 2rem; --body-size: 0.95rem; --stat-size: 2.5rem; --sidebar-width: 256px; --grid-cols-stat: 4; --grid-cols-card: 3; } } /* --- Responsive: Wide (1280px+) --- */ @media (min-width: 1280px) { :root { --grid-cols-card: 4; } } /* --- Division: Organic (Blue) --- */ /* Apply: data-division="organic" on or product root */ [data-division="organic"] { --div-cta: #0284c7; --div-cta-hover: #0ea5e9; --div-cta-text: #ffffff; --div-accent: #38bdf8; --div-accent-light: #7dd3fc; --div-glow: rgba(56, 189, 248, 0.06); --div-surface: rgba(15, 52, 84, 0.15); --div-border: rgba(56, 189, 248, 0.2); --div-border-light: rgba(56, 189, 248, 0.35); --div-chart: #38bdf8; --div-chart-area: rgba(56, 189, 248, 0.1); --div-font: 'JetBrains Mono', monospace; } /* --- Division: Paid (Purple) --- */ /* Apply: data-division="paid" on or product root */ [data-division="paid"] { --div-cta: #7c3aed; --div-cta-hover: #8b5cf6; --div-cta-text: #ffffff; --div-accent: #c084fc; --div-accent-light: #d8b4fe; --div-glow: rgba(192, 132, 252, 0.06); --div-surface: rgba(52, 15, 84, 0.15); --div-border: rgba(168, 85, 247, 0.2); --div-border-light: rgba(168, 85, 247, 0.35); --div-chart: #c084fc; --div-chart-area: rgba(192, 132, 252, 0.1); --div-font: 'Alata', sans-serif; }