/* ──────────────────────────────────────────────────────────────────────────── SURI Studios — Brand colors & type The single source of truth for STUDIO BRAND tokens. This file covers identity-layer surfaces only: logo lockups, marketing, store pages, social, splash, brand-internal docs. In-product / game tokens (warmth gradient, semantic colors, game UI components) live in a separate "game" design system, owned by the games. Don't mix the two without explicit reason. ──────────────────────────────────────────────────────────────────────── */ /* ── Web fonts ─────────────────────────────────────────────────────────── */ /* General Sans is the wordmark face (Fontshare). Bricolage Grotesque is the secondary option we explored — kept available behind the same stack so the wordmark renders consistently. Rubik is loaded for Hebrew + Latin body copy in marketing & docs. All three load from CDN — no self-hosted files yet. */ @import url("https://api.fontshare.com/v2/css?f[]=general-sans@500,600,700&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,600;12..96,700&family=Rubik:wght@300;400;500;600;700&display=swap"); :root { /* ── BRAND PALETTE ──────────────────────────────────────────────────── */ --pebble-amber: #e69234; /* the pebble itself */ --pebble-amber-deep: #c97520; /* pressed / shadow side of the pebble */ --pebble-amber-soft: #f5b573; /* highlight / hover fill */ --ink-brown: #2a261f; /* wordmark + brand body text */ --ink-brown-soft: #5b524a; /* secondary brand text on cream */ --cream: #faf7f2; /* warm splash / marketing background */ --cream-deep: #f1ece2; /* divider on cream / card-on-cream */ --night: #0f0d18; /* dark-theme brand background */ /* Tokens for brand body copy (alias so consumers don't re-pick) */ --bg-brand: var(--cream); --fg-brand: var(--ink-brown); --fg-brand-muted: var(--ink-brown-soft); --border-brand: var(--cream-deep); /* ── TYPE STACKS ────────────────────────────────────────────────────── */ /* Display: SURI wordmark + brand display headings only. The fallback chain lets you swap General Sans → Bricolage by editing a single line in your consumer's CSS. */ --font-display: "General Sans", "Bricolage Grotesque", "Plus Jakarta Sans", system-ui, sans-serif; /* Body: marketing copy, About pages, store descriptions, doc text. Rubik because it speaks Hebrew + Latin equally and matches the warmth of the brand palette. */ --font-body: "Rubik", "Rubik Hebrew", ui-sans-serif, system-ui, sans-serif; /* Mono: kept for code samples, version stamps, file headers. */ --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* ── TYPE WEIGHTS ───────────────────────────────────────────────────── */ --w-medium: 500; --w-semibold: 600; --w-bold: 700; /* ── BRAND TYPE SCALE ───────────────────────────────────────────────── */ /* The brand voice is quiet — these stop at 56 px. For poster / billboard work, scale `--display-xl` up at the consumer site, don't add new tokens here. */ --display-xl-size: 56px; --display-xl-line: 60px; --display-xl-weight: var(--w-semibold); --display-xl-track: -0.02em; --display-lg-size: 40px; --display-lg-line: 46px; --display-lg-weight: var(--w-semibold); --display-lg-track: -0.02em; --h1-size: 32px; --h1-line: 38px; --h1-weight: var(--w-semibold); --h1-track: -0.015em; --h2-size: 24px; --h2-line: 30px; --h2-weight: var(--w-semibold); --h2-track: -0.01em; --h3-size: 18px; --h3-line: 24px; --h3-weight: var(--w-semibold); --h3-track: 0; --body-size: 16px; --body-line: 24px; --body-weight: 400; --small-size: 14px; --small-line: 20px; --eyebrow-size: 11px; --eyebrow-line: 14px; --eyebrow-track: 0.16em; /* uppercase, all-caps */ --wordmark-tagline-size: 12px; --wordmark-tagline-track: 0.32em; /* "STUDIOS" under SURI */ /* ── SPACING (4-pt grid) ────────────────────────────────────────────── */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px; /* ── RADII ──────────────────────────────────────────────────────────── */ --r-sm: 8px; --r-md: 12px; --r-card: 16px; --r-pill: 9999px; /* ── SHADOWS ────────────────────────────────────────────────────────── */ /* Brand surfaces are mostly flat. These are kept for the rare card / elevated lockup. Never use a harder shadow than --shadow-card on brand work. */ --shadow-card: 0 1px 2px rgba(42, 38, 31, 0.04), 0 8px 24px -12px rgba(42, 38, 31, 0.08); --shadow-elev: 0 1px 2px rgba(42, 38, 31, 0.05), 0 18px 40px -24px rgba(42, 38, 31, 0.18); } /* ── UTILITY CLASSES ─────────────────────────────────────────────────── */ /* Drop-in classes for prototypes / brand decks. Production code should inherit the tokens above through Tailwind / styled-components instead. */ .display-xl { font: var(--display-xl-weight) var(--display-xl-size)/var(--display-xl-line) var(--font-display); letter-spacing: var(--display-xl-track); color: var(--fg-brand); } .display-lg { font: var(--display-lg-weight) var(--display-lg-size)/var(--display-lg-line) var(--font-display); letter-spacing: var(--display-lg-track); color: var(--fg-brand); } .h1 { font: var(--h1-weight) var(--h1-size)/var(--h1-line) var(--font-display); letter-spacing: var(--h1-track); color: var(--fg-brand); } .h2 { font: var(--h2-weight) var(--h2-size)/var(--h2-line) var(--font-display); letter-spacing: var(--h2-track); color: var(--fg-brand); } .h3 { font: var(--h3-weight) var(--h3-size)/var(--h3-line) var(--font-display); color: var(--fg-brand); } .body { font: var(--body-weight) var(--body-size)/var(--body-line) var(--font-body); color: var(--fg-brand); } .small { font: 400 var(--small-size)/var(--small-line) var(--font-body); color: var(--fg-brand-muted); } .eyebrow { font: var(--w-bold) var(--eyebrow-size)/var(--eyebrow-line) var(--font-body); letter-spacing: var(--eyebrow-track); text-transform: uppercase; color: color-mix(in oklch, var(--fg-brand-muted) 75%, transparent); }