/* ========================================================================== Rufio Design System — colors & type -------------------------------------------------------------------------- Single source of truth for tokens. Light is the default. Apply [data-theme="dark"] (or .dark on ) to flip surfaces. Type stack: Display + body : Geist Mono : Geist Mono Loaded via Google Fonts CDN. If you self-host later, add @font-face declarations above this block and update the import URL. ========================================================================== */ @import url("https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500;600&display=swap"); :root { /* ── Brand: gradient stops (the CLI banner) ─────────────────────────── */ --grad-pink: #FF5F82; /* hot pink — R */ --grad-coral: #FF8C46; /* coral — U */ --grad-amber: #FFC832; /* amber — F */ --grad-green: #78DC6E; /* spring grn — I */ --grad-cyan: #50C8E6; /* cyan — O */ /* The canonical primary gradient. Use only on type / hero moments. */ --gradient-primary: linear-gradient( 90deg, var(--grad-pink) 0%, var(--grad-coral) 25%, var(--grad-amber) 50%, var(--grad-green) 75%, var(--grad-cyan) 100% ); /* ── Brand: bandana accent (the hidden Hook reference) ──────────────── */ --bandana-red: #DC3232; --bandana-amber: #F0C83C; /* The hairline. Always 1ch tall, half red half amber. */ --hairline-bandana: linear-gradient(90deg, var(--bandana-red) 0 50%, var(--bandana-amber) 50% 100%); /* ── Surfaces — LIGHT (warm neutrals, off-white paper) ───────────────── */ --bg: #FAF9F7; --surface: #FFFFFF; --surface-2: #F3F1ED; --surface-sunken:#EFECE5; --border: #E5E1DA; --border-strong: #D4CFC4; --fg: #1A1714; /* near-black, warm */ --fg-muted: #6B665F; --fg-subtle: #9C968D; --fg-on-accent: #FFFFFF; /* ── Semantic colour roles ──────────────────────────────────────────── */ --accent: var(--bandana-red); --accent-hover: #C42A2A; --accent-press: #A82424; --accent-soft: #FCEAEA; /* tinted bg for accent-on-surface */ --warn: var(--bandana-amber); --warn-soft: #FCF3D2; --info: var(--grad-cyan); --info-soft: #E0F4FA; --success: #2E8F5A; --success-soft: #E1F1E8; --danger: var(--bandana-red); --danger-soft: var(--accent-soft); --link: var(--bandana-red); --link-hover: var(--accent-hover); /* Selection / focus */ --focus-ring: var(--bandana-red); /* ── Spacing (4px base) ─────────────────────────────────────────────── */ --s-0: 0; --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px; /* ── Radii ──────────────────────────────────────────────────────────── */ --radius-xs: 4px; --radius-sm: 6px; /* button, input, chip */ --radius-md: 8px; /* code block */ --radius-lg: 10px; /* card, surface */ --radius-xl: 14px; /* modal */ --radius-pill: 9999px; /* ── Shadows (used sparingly) ───────────────────────────────────────── */ --shadow-sm: 0 1px 2px rgba(20, 16, 10, 0.04), 0 0 0 0.5px rgba(20, 16, 10, 0.04); --shadow-md: 0 8px 24px rgba(20, 16, 10, 0.08); --shadow-lg: 0 24px 48px rgba(20, 16, 10, 0.12); /* ── Motion ─────────────────────────────────────────────────────────── */ --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1); --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 400ms; /* ── Type families ──────────────────────────────────────────────────── */ --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: "Geist Mono", ui-monospace, "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace; /* ── Type scale ─────────────────────────────────────────────────────── */ /* Editorial-rooted. Headings tight, body relaxed. */ --text-xs: 12px; --lh-xs: 18px; --text-sm: 14px; --lh-sm: 22px; --text-base: 16px; --lh-base: 26px; /* body */ --text-md: 18px; --lh-md: 28px; --text-lg: 20px; --lh-lg: 30px; --text-xl: 24px; --lh-xl: 32px; /* h3 */ --text-2xl: 32px; --lh-2xl: 40px; /* h2 */ --text-3xl: 44px; --lh-3xl: 52px; /* h1 */ --text-4xl: 64px; --lh-4xl: 68px; /* hero / display 2 */ --text-5xl: 88px; --lh-5xl: 92px; /* hero / display 1 */ /* Tracking */ --track-display: -0.025em; --track-tight: -0.015em; --track-normal: 0; --track-mono: -0.01em; /* Layout */ --measure: 680px; --measure-hero: 820px; --content-max: 1200px; } /* ========================================================================== Dark mode — flip surfaces, dim shadows, swap link to pink for legibility on warm-black. ========================================================================== */ :root[data-theme="dark"], .dark { --bg: #0E0D0B; --surface: #16140F; --surface-2: #1E1B15; --surface-sunken:#0A0907; --border: #2A2620; --border-strong: #3A352D; --fg: #F5F2EC; --fg-muted: #A8A299; --fg-subtle: #6B665F; --fg-on-accent: #FFFFFF; --accent: var(--grad-pink); /* pink reads better than red on warm-black */ --accent-hover: #FF7593; --accent-press: #E84771; --accent-soft: rgba(255, 95, 130, 0.12); --link: var(--grad-pink); --link-hover: #FF7593; --warn-soft: rgba(240, 200, 60, 0.12); --info-soft: rgba(80, 200, 230, 0.12); --success-soft: rgba(46, 143, 90, 0.18); --danger: var(--grad-pink); --danger-soft: rgba(255, 95, 130, 0.12); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3), 0 0 0 0.5px rgba(0, 0, 0, 0.4); --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.32); --shadow-lg: 0 24px 48px rgba(0, 0, 0, 0.45); } /* ========================================================================== Base type — semantic, not utility. Compose pages with these directly. ========================================================================== */ html, body { background: var(--bg); color: var(--fg); font-family: var(--font-sans); font-size: var(--text-base); line-height: var(--lh-base); letter-spacing: var(--track-normal); font-feature-settings: "ss01", "ss02", "cv01"; /* Geist's tabular & alt forms */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* ── Display / headings ─────────────────────────────────────────────────── */ .display-1, h1.display, .hero-title { font-family: var(--font-sans); font-weight: 600; font-size: var(--text-5xl); line-height: var(--lh-5xl); letter-spacing: var(--track-display); color: var(--fg); text-wrap: balance; } .display-2 { font-family: var(--font-sans); font-weight: 600; font-size: var(--text-4xl); line-height: var(--lh-4xl); letter-spacing: var(--track-display); color: var(--fg); text-wrap: balance; } h1 { font-family: var(--font-sans); font-weight: 600; font-size: var(--text-3xl); line-height: var(--lh-3xl); letter-spacing: var(--track-tight); color: var(--fg); text-wrap: balance; margin: 0 0 var(--s-5); } h2 { font-family: var(--font-sans); font-weight: 600; font-size: var(--text-2xl); line-height: var(--lh-2xl); letter-spacing: var(--track-tight); color: var(--fg); text-wrap: balance; margin: var(--s-8) 0 var(--s-4); } h3 { font-family: var(--font-sans); font-weight: 600; font-size: var(--text-xl); line-height: var(--lh-xl); letter-spacing: var(--track-tight); color: var(--fg); margin: var(--s-7) 0 var(--s-3); } h4 { font-family: var(--font-sans); font-weight: 600; font-size: var(--text-md); line-height: var(--lh-md); color: var(--fg); margin: var(--s-6) 0 var(--s-2); } /* ── Body, lead, caption ────────────────────────────────────────────────── */ p, .body { font-size: var(--text-base); line-height: var(--lh-base); color: var(--fg); max-width: var(--measure); text-wrap: pretty; margin: 0 0 var(--s-4); } .lead { font-size: var(--text-md); line-height: var(--lh-md); color: var(--fg-muted); max-width: var(--measure-hero); text-wrap: pretty; } .caption, small { font-size: var(--text-sm); line-height: var(--lh-sm); color: var(--fg-muted); } .eyebrow { font-family: var(--font-mono); font-size: var(--text-xs); line-height: var(--lh-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--fg-subtle); margin: 0 0 var(--s-3); } /* ── Links ──────────────────────────────────────────────────────────────── */ a, .link { color: var(--link); text-decoration: none; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color var(--dur-fast) var(--ease-out); } a:hover, .link:hover { color: var(--link-hover); text-decoration: underline; } a:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: 2px; } /* ── Mono / code ────────────────────────────────────────────────────────── */ code, kbd, samp, pre, .mono { font-family: var(--font-mono); font-feature-settings: "tnum", "ss01"; letter-spacing: var(--track-mono); } /* Inline code */ :not(pre) > code { font-size: 0.9em; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-xs); padding: 1px 6px; color: var(--fg); } /* Block code */ pre { font-size: var(--text-sm); line-height: 1.6; color: var(--fg); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--s-5); overflow-x: auto; margin: 0 0 var(--s-5); } pre > code { background: transparent; border: 0; padding: 0; } /* ── Selection ──────────────────────────────────────────────────────────── */ ::selection { background: var(--bandana-amber); color: var(--fg); } :root[data-theme="dark"] ::selection, .dark ::selection { background: var(--grad-pink); color: #1A1714; } /* ── Utility: gradient text (use ONLY on hero / wordmark) ───────────────── */ .text-gradient, .wordmark-gradient { background: var(--gradient-primary); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* ── Wordmark ───────────────────────────────────────────────────────────── */ .wordmark { font-family: var(--font-sans); font-weight: 600; letter-spacing: -0.04em; text-transform: lowercase; line-height: 1; } /* ── Hairline rule (the bandana) ────────────────────────────────────────── */ .hairline-bandana { height: 1px; background: var(--hairline-bandana); border: 0; margin: 0; }