/* ============================================================ tokens.css — VidForge AI Design Token System Architecture: Primitive → Semantic → Component (GFD §25.1) Rule: NEVER use primitive tokens directly in components. Use semantic or component tokens only. ============================================================ */ :root { /* ════════════════════════════════════════════════════════ TIER 1 — PRIMITIVE TOKENS Raw values. Never referenced directly in component rules. ════════════════════════════════════════════════════════ */ /* ─── PRIMITIVE: COLOR — Matte Grey Scale ──────────────── */ --primitive-grey-950: #0d0d0d; --primitive-grey-900: #141414; --primitive-grey-850: #1a1a1a; --primitive-grey-800: #222222; --primitive-grey-700: #2e2e2e; --primitive-grey-600: #3d3d3d; --primitive-grey-500: #555555; --primitive-grey-400: #737373; --primitive-grey-300: #a3a3a3; --primitive-grey-200: #d4d4d4; --primitive-grey-100: #f0f0f0; --primitive-grey-50: #f7f7f7; /* ─── PRIMITIVE: COLOR — Burnt Orange Scale ─────────────── */ --primitive-orange-900: #5c1a00; --primitive-orange-700: #c23b00; --primitive-orange-600: #e04500; --primitive-orange-500: #f05214; /* ← Brand Primary CTA */ --primitive-orange-400: #f5703a; --primitive-orange-300: #f99068; --primitive-orange-100: rgba(240, 82, 20, 0.12); /* ─── PRIMITIVE: COLOR — Off-White Scale ────────────────── */ --primitive-white-pure: #ffffff; --primitive-white-warm: #faf9f7; --primitive-white-cool: #f5f6fa; --primitive-white-muted: #e8e8ec; /* ─── PRIMITIVE: COLOR — Status ─────────────────────────── */ --primitive-success: #22c55e; --primitive-warning: #f59e0b; --primitive-error: #ef4444; --primitive-info: #3b82f6; /* ─── PRIMITIVE: TYPOGRAPHY ──────────────────────────────── */ --primitive-font-display: 'Syne', 'Space Grotesk', sans-serif; --primitive-font-body: 'Space Grotesk', 'Inter', sans-serif; --primitive-font-mono: 'JetBrains Mono', 'Fira Code', monospace; /* ─── PRIMITIVE: SPACING (8pt Grid — GFD §1.1) ───────────── */ --primitive-space-1: 4px; --primitive-space-2: 8px; --primitive-space-3: 12px; --primitive-space-4: 16px; --primitive-space-5: 20px; --primitive-space-6: 24px; --primitive-space-8: 32px; --primitive-space-10: 40px; --primitive-space-12: 48px; --primitive-space-16: 64px; --primitive-space-20: 80px; --primitive-space-24: 96px; --primitive-space-32: 128px; /* ─── PRIMITIVE: BORDER RADIUS ───────────────────────────── */ --primitive-radius-none: 0px; --primitive-radius-sm: 4px; --primitive-radius-md: 8px; --primitive-radius-lg: 12px; --primitive-radius-xl: 16px; --primitive-radius-2xl: 20px; --primitive-radius-3xl: 28px; --primitive-radius-pill: 9999px; /* ─── PRIMITIVE: MOTION ───────────────────────────────────── */ --primitive-duration-fast: 150ms; --primitive-duration-base: 250ms; --primitive-duration-slow: 400ms; --primitive-duration-slower: 600ms; --primitive-ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --primitive-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --primitive-ease-out: cubic-bezier(0, 0, 0.2, 1); /* ════════════════════════════════════════════════════════ TIER 2 — SEMANTIC TOKENS Contextual meaning. Used in layout and component rules. ════════════════════════════════════════════════════════ */ /* ─── SEMANTIC: BACKGROUNDS ──────────────────────────────── */ /* 60% dominant surface — Matte Dark (GFD §3.1 — 60-30-10 Rule) */ --bg-base: var(--primitive-grey-950); /* Page background */ --bg-elevated: var(--primitive-grey-850); /* Cards, panels */ --bg-overlay: var(--primitive-grey-800); /* Modals, drawers */ --bg-hover: var(--primitive-grey-700); /* Hover states */ --bg-active: var(--primitive-grey-600); /* Active / selected */ --bg-surface: var(--primitive-grey-900); /* 30% secondary (sidebar, nav) */ /* ─── SEMANTIC: TEXT ──────────────────────────────────────── */ --text-primary: var(--primitive-white-warm); /* ~97% white — GFD §3.2 */ --text-secondary: var(--primitive-grey-300); --text-tertiary: var(--primitive-grey-500); --text-disabled: var(--primitive-grey-600); --text-inverse: var(--primitive-grey-950); /* On orange buttons */ /* ─── SEMANTIC: ACCENT (10% — GFD §3.1) ──────────────────── */ --accent-primary: var(--primitive-orange-500); --accent-primary-hover: var(--primitive-orange-400); --accent-primary-muted: var(--primitive-orange-100); --accent-glow: rgba(240, 82, 20, 0.30); /* ─── SEMANTIC: BORDERS ───────────────────────────────────── */ --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.10); --border-strong: rgba(255, 255, 255, 0.18); --border-accent: var(--primitive-orange-500); /* ─── SEMANTIC: STATUS ────────────────────────────────────── */ --color-success: var(--primitive-success); --color-success-bg: rgba(34, 197, 94, 0.10); --color-warning: var(--primitive-warning); --color-warning-bg: rgba(245, 158, 11, 0.10); --color-error: var(--primitive-error); --color-error-bg: rgba(239, 68, 68, 0.10); --color-info: var(--primitive-info); --color-info-bg: rgba(59, 130, 246, 0.10); /* ─── SEMANTIC: FOCUS ─────────────────────────────────────── */ --focus-ring: 0 0 0 3px rgba(240, 82, 20, 0.45); /* ─── SEMANTIC: SHADOWS (GFD §4.1 Elevation Scale) ───────── */ --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.06), 0 4px 8px rgba(0, 0, 0, 0.04); --shadow-2: 0 2px 4px rgba(0, 0, 0, 0.06), 0 6px 12px rgba(0, 0, 0, 0.08), 0 12px 24px rgba(0, 0, 0, 0.06); --shadow-3: 0 4px 8px rgba(0, 0, 0, 0.08), 0 12px 24px rgba(0, 0, 0, 0.10), 0 24px 48px rgba(0, 0, 0, 0.08); --shadow-4: 0 8px 16px rgba(0, 0, 0, 0.08), 0 24px 48px rgba(0, 0, 0, 0.12), 0 48px 96px rgba(0, 0, 0, 0.14); --shadow-accent: 0 0 0 1px var(--primitive-orange-500), 0 8px 32px rgba(240, 82, 20, 0.30); /* ─── SEMANTIC: LAYOUT ────────────────────────────────────── */ --container-max: 1200px; --container-wide: 1440px; --container-narrow: 560px; --page-px: clamp(16px, 5vw, 80px); --section-py: clamp(64px, 10vw, 128px); --hero-py: clamp(96px, 14vw, 192px); --nav-height: 72px; /* ─── SEMANTIC: TYPOGRAPHY SCALE (GFD §2.2) ──────────────── */ --text-display-2xl: clamp(48px, 8vw, 112px); --text-display-xl: clamp(36px, 6vw, 88px); --text-display-lg: clamp(28px, 4.5vw, 64px); --text-h1: clamp(26px, 4vw, 52px); --text-h2: clamp(22px, 3.2vw, 44px); --text-h3: clamp(18px, 2.5vw, 32px); --text-h4: clamp(16px, 2vw, 24px); --text-body-xl: clamp(17px, 1.5vw, 20px); --text-body-lg: clamp(15px, 1.3vw, 17px); --text-body-md: clamp(13px, 1.1vw, 15px); --text-body-sm: clamp(11px, 1vw, 13px); --text-eyebrow: clamp(10px, 0.9vw, 12px); /* ════════════════════════════════════════════════════════ TIER 3 — COMPONENT TOKENS Component-scoped values. Consume semantic tokens. ════════════════════════════════════════════════════════ */ /* ─── COMPONENT: BUTTON ──────────────────────────────────── */ --btn-radius: var(--primitive-radius-md); --btn-height-sm: 36px; --btn-height-md: 44px; --btn-height-lg: 52px; --btn-px-sm: var(--primitive-space-4); --btn-px-md: var(--primitive-space-6); --btn-px-lg: var(--primitive-space-8); --btn-font-weight: 600; --btn-letter-spacing: 0.06em; /* ─── COMPONENT: INPUT ───────────────────────────────────── */ --input-height: 48px; --input-radius: var(--primitive-radius-md); --input-px: var(--primitive-space-4); --input-bg: var(--bg-elevated); --input-border: var(--border-default); --input-focus-ring: var(--focus-ring); /* ─── COMPONENT: CARD ────────────────────────────────────── */ --card-radius: var(--primitive-radius-xl); --card-padding: clamp(16px, 3vw, 32px); --card-border: var(--border-subtle); --card-bg: var(--bg-elevated); --card-shadow: var(--shadow-1); /* ─── COMPONENT: BADGE ───────────────────────────────────── */ --badge-radius: var(--primitive-radius-pill); --badge-px: var(--primitive-space-3); --badge-py: var(--primitive-space-1); --badge-fs: var(--text-body-sm); --badge-fw: 600; --badge-tracking: 0.08em; /* ─── COMPONENT: TRANSITION SHORTHANDS ───────────────────── */ --transition-fast: all var(--primitive-duration-fast) var(--primitive-ease-standard); --transition-base: all var(--primitive-duration-base) var(--primitive-ease-standard); --transition-slow: all var(--primitive-duration-slow) var(--primitive-ease-out); }