/* ============================================================= Creative Factory — Design Token System Dark premium aesthetic inspired by ecomflows.io / Linear / Vercel Import this file FIRST in every page's : ============================================================= */ /* Self-hosted fonts */ @font-face { font-family: 'Monument Extended'; src: url('/fonts/monument-extended-regular.otf') format('opentype'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Monument Extended'; src: url('/fonts/monument-extended-ultrabold.otf') format('opentype'); font-weight: 800; font-style: normal; font-display: swap; } @font-face { font-family: 'Figtree'; src: url('/fonts/figtree-latin.woff2') format('woff2'); font-weight: 300 900; font-style: normal; font-display: swap; } :root { /* ── Surface Colors ─────────────────────────────────────── */ --color-bg: #080a10; /* deepest background */ --color-bg-alt: #0c0f19; /* slightly lighter sections */ --color-bg-tertiary: #0e121d; /* card-section backgrounds */ --color-bg-surface: #151a29; /* cards, elevated surfaces */ /* ── Text Colors ────────────────────────────────────────── */ --color-text: #ffffff; --color-text-secondary: #c9d0e8; --color-text-muted: #68709f; /* ── Accent Colors ──────────────────────────────────────── */ --color-accent: #86a4ff; /* soft blue-purple */ --color-accent-vivid: #6944ff; /* vivid purple highlights */ /* ── Borders ────────────────────────────────────────────── */ --color-border: #4a4e72; --color-border-subtle: rgba(201, 208, 232, 0.2); /* ── Button Gradients ───────────────────────────────────── */ --btn-primary-gradient: linear-gradient(135deg, #4672fe, #2050e7); --btn-secondary-bg: transparent; /* ── Typography ─────────────────────────────────────────── */ --font-heading: 'Figtree', system-ui, sans-serif; --font-body: 'Figtree', system-ui, sans-serif; --font-accent: 'Instrument Serif', Georgia, serif; /* Font weights */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-ultrabold: 800; /* Font sizes */ --text-xs: 0.75rem; /* 12px */ --text-sm: 0.875rem; /* 14px */ --text-base: 1rem; /* 16px */ --text-lg: 1.125rem; /* 18px */ --text-xl: 1.25rem; /* 20px */ --text-2xl: 1.5rem; /* 24px */ --text-3xl: 2rem; /* 32px */ --text-4xl: 2.5rem; /* 40px */ --text-5xl: 3.5rem; /* 56px */ /* ── Spacing Scale (8px base) ──────────────────────────── */ --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-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ --space-20: 5rem; /* 80px */ --space-24: 6rem; /* 96px */ /* ── Layout ────────────────────────────────────────────── */ --container-max: 1200px; --container-pad: 40px; --section-pad-y: 96px; /* ── Border Radius ─────────────────────────────────────── */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 16px; --radius-xl: 100px; /* pill buttons */ --radius-card: 1.5rem; /* 24px — cards */ /* ── Transitions ───────────────────────────────────────── */ --transition-fast: 150ms ease; --transition-normal: 250ms ease; --transition-slow: 400ms ease; }