/* 2nd Star — website design tokens (self-contained for standalone deploy). Inlined into a single file so the browser doesn't walk a chain of nested @imports before it can render. Webfonts now load via in each page's (with preconnect). Mirrors the design-system tokens at the project root. */ /* ============================================================ COLOR — brand palette derived from the 2SO badge + vendor graphic: deep navy, royal/sky blue, star gold, cannabis-leaf green, RSO amber. ============================================================ */ :root { /* ---- Navy (primary ink + dark surfaces) ---- */ --navy-900: #081B3D; --navy-800: #0E2A5E; /* core brand navy */ --navy-700: #143372; --navy-600: #1C4288; /* ---- Blue (secondary brand / interactive) ---- */ --blue-700: #1559A8; --blue-600: #1E6FCB; --blue-500: #2B7CD6; /* royal brand blue (ring, links) */ --blue-400: #5199E4; --blue-300: #8FC0F0; --blue-200: #CBE2F8; --blue-100: #E6F1FC; --blue-50: #F3F8FE; /* ---- Gold (the star) ---- */ --gold-600: #D99A00; --gold-500: #F7B500; /* star gold */ --gold-400: #FCC734; --gold-100: #FDF1CF; /* ---- Green (cannabis leaf — sparing accent) ---- */ --green-700: #246A20; --green-600: #2F7D2A; --green-500: #3C8A2E; --green-100: #E3F1DD; /* ---- Amber (RSO oil — rare, imagery only) ---- */ --amber-700: #6B4E10; --amber-600: #8A6A12; /* ---- Neutrals ---- */ --white: #FFFFFF; --paper: #F7FAFD; /* cool off-white page */ --mist: #ECF3FB; /* faint sky wash */ --line: #DCE6F2; /* hairline / divider */ --line-soft: #EAF1F9; --ink-700: #2A3A5C; /* body text on light */ --ink-500: #54648A; /* muted text */ --ink-400: #8593B0; /* placeholder / caption */ /* ---- Semantic aliases ---- */ --brand-primary: var(--navy-800); --brand-secondary: var(--blue-500); --brand-accent: var(--gold-500); --brand-leaf: var(--green-600); --surface-page: var(--paper); --surface-card: var(--white); --surface-sky: var(--blue-100); --surface-ink: var(--navy-800); --surface-ink-deep:var(--navy-900); --text-strong: var(--navy-800); --text-body: var(--ink-700); --text-muted: var(--ink-500); --text-on-dark: var(--white); --text-on-dark-mut:#B7C8E4; --text-link: var(--blue-600); --border-default: var(--line); --border-strong: var(--blue-200); --focus-ring: var(--blue-400); /* Gradients seen in brand art: sky wash + dark night sky */ --grad-sky: linear-gradient(160deg, #F3F8FE 0%, #DCEBFA 55%, #C3DFF7 100%); --grad-night: linear-gradient(165deg, #143372 0%, #0E2A5E 55%, #081B3D 100%); --grad-gold: linear-gradient(90deg, #FCC734 0%, #F7B500 100%); /* ============================================================ TYPOGRAPHY ============================================================ */ /* Families */ --font-display: 'Anton', 'Arial Narrow', sans-serif; /* heavy condensed all-caps headlines */ --font-sans: 'Montserrat', 'Helvetica Neue', Arial, sans-serif; /* body, UI, labels */ --font-script: 'Satisfy', 'Brush Script MT', cursive; /* warm script accent */ /* Weights (Montserrat) */ --fw-regular: 400; --fw-medium: 500; --fw-semibold:600; --fw-bold: 700; --fw-extra: 800; /* Type scale (display uses Anton; text uses Montserrat) */ --fs-display-xl: 92px; /* hero headline */ --fs-display-lg: 64px; --fs-display-md: 44px; --fs-display-sm: 32px; --fs-h1: 34px; --fs-h2: 26px; --fs-h3: 20px; --fs-lead: 19px; /* intro paragraph */ --fs-body: 16px; --fs-sm: 14px; --fs-xs: 12.5px; --fs-label: 12px; /* letterspaced eyebrow / label */ --fs-script-lg: 46px; --fs-script-md: 30px; /* Line heights */ --lh-tight: 1.02; --lh-snug: 1.18; --lh-normal: 1.5; --lh-relaxed:1.65; /* Letter spacing */ --ls-display: 0.005em; --ls-label: 0.18em; --ls-eyebrow: 0.14em; --ls-tight: -0.01em; /* ============================================================ SPACING · RADIUS · SHADOW · LAYOUT · MOTION ============================================================ */ /* Spacing scale (4px base) */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; /* Radius — friendly, soft. Pills for buttons/badges, gentle cards. */ --radius-sm: 8px; --radius-md: 14px; --radius-lg: 20px; --radius-xl: 28px; --radius-pill: 999px; --radius-circle: 50%; /* Shadows — soft, cool, blue-tinted (matches the airy sky aesthetic) */ --shadow-xs: 0 1px 2px rgba(14, 42, 94, 0.06); --shadow-sm: 0 2px 8px rgba(14, 42, 94, 0.08); --shadow-md: 0 8px 24px rgba(14, 42, 94, 0.10); --shadow-lg: 0 18px 48px rgba(14, 42, 94, 0.14); --shadow-ring: 0 0 0 4px rgba(43, 124, 214, 0.18); /* focus / emphasis halo */ /* Layout */ --container: 1160px; --container-narrow: 780px; --gutter: 24px; /* Motion */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-soft: cubic-bezier(0.4, 0, 0.2, 1); --dur-fast: 140ms; --dur-base: 220ms; --dur-slow: 420ms; }