/* Sacred Studios design tokens (Brand Kit v1.1). Drop this in first; build everything from these. Source of truth: the Brand Bible and references/brand-kit.md. Do not add colors, fonts or shadows here without a brand ruling. */ :root { /* ── Color: primary ─────────────────────────────────────────────── */ --crimson: #C41230; /* Sacred Crimson. The one accent: marks, fills, buttons, display type */ --void: #0A0B10; /* default background; the ink on Linen */ --linen: #EDE7DA; /* text and logo on dark; paper color */ /* ── Color: secondary ───────────────────────────────────────────── */ --crimson-deep: #8B0A20; /* red on Linen and in print; pressed states. Never a foreground on dark */ --obsidian: #14151A; /* card surfaces on Void */ --graphite: #22252E; /* raised surfaces, inputs, dividers */ --linen-mute: #D8D1C0; /* body copy and deck lines on dark */ --linen-soft: #B8B2A6; /* captions, labels, secondary text on dark */ /* ── Color: signal (restrained) ─────────────────────────────────── */ --crimson-bright: #E63950; /* screen only: red that passes AA for small text on Void; one emphasized headline word */ --gilt: #C8A158; /* earned, booked, complete. Never in the logo, never text on Linen, never decoration */ --live: #6BB179; /* a real, live status in product UI. Nothing else */ /* ── Lines ──────────────────────────────────────────────────────── */ --hairline: rgba(237, 231, 218, 0.14); --hairline-strong:rgba(237, 231, 218, 0.24); --hairline-on-linen: rgba(10, 11, 16, 0.20); /* ── Type: Montserrat only. Gorgias Black lives inside the logo artwork, never in CSS headlines ── */ --font: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --font-mono: ui-monospace, 'SF Mono', Menlo, monospace; /* ONLY inside terminal and log mockups (ruling 2026-10-15) */ --fw-regular: 400; --fw-medium: 500; --fw-semi: 600; --fw-bold: 700; --fw-xbold: 800; --fw-black: 900; /* size · line-height · letter-spacing travel together: tracking tightens as type grows, leading tightens too */ --display-size: clamp(3.5rem, 8vw, 8.25rem); --display-lh: 0.94; --display-ls: -0.02em; /* Black 900, CAPS */ --h1-size: clamp(3rem, 5.5vw, 5rem); --h1-lh: 1.04; --h1-ls: -0.012em; /* ExtraBold 800, CAPS */ --h2-size: clamp(1.75rem, 3vw, 2.5rem); --h2-lh: 1.18; --h2-ls: -0.008em; /* ExtraBold 800, CAPS */ --h2-open-size: clamp(2.25rem, 4.2vw, 3.5rem); /* a section's opening heading: up to 56 px (ruling 2026-10-15) */ --h3-size: clamp(1.25rem, 1.6vw, 1.5rem); --h3-lh: 1.28; --h3-ls: 0; /* Bold 700, sentence case */ --deck-size: clamp(1.25rem, 1.6vw, 1.5rem); --deck-lh: 1.4; --deck-ls: 0; /* Medium 500: the plain line under a headline */ --lead-size: clamp(1.25rem, 1.6vw, 1.5rem); --lead-lh: 1.5; --body-size: 1.0625rem; --body-lh: 1.62; --body-ls: 0; /* Medium 500 on dark, Regular 400 on Linen */ --caption-size: 0.8125rem; --caption-lh: 1.45; --caption-ls: 0.015em; --eyebrow-size: 0.75rem; --eyebrow-ls: 0.3em; /* SemiBold 600, CAPS, crimson dash before it */ --button-size: 0.8125rem; --button-ls: 0.1em; /* Bold 700, CAPS */ --measure: 62ch; /* max line length for body copy */ /* ── Space: 8 px base. Use these; do not invent in-between values ── */ --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 1rem; --s-4: 1.5rem; --s-5: 2rem; --s-6: 3rem; --s-7: 4rem; --s-8: 5rem; --s-9: 7.5rem; --s-10: 10rem; /* ── Shape: slight roundness. Never pills, never 0 ─────────────── */ --r-button: 8px; --r-card: 10px; --r-panel: 14px; /* ── Depth: flat. No glow on buttons, cards, inputs, badges or the logo ── */ --shadow-none: none; --shadow-float: 0 20px 60px rgba(0, 0, 0, 0.45); /* ONLY for surfaces that truly float above content: menus, sheets, modals */ --scrim: rgba(10, 11, 16, 0.6); /* behind a modal; behind a logo on a photo */ --chrome-bg: rgba(10, 11, 16, 0.72); /* translucent nav/toolbar ground, with the blur below */ --chrome-blur: saturate(160%) blur(20px); /* ── Motion: explains a change, never decorates. transform + opacity only ── */ --press-scale: 0.97; --t-press: 100ms; /* pointer-down feedback */ --t-feedback: 160ms; /* hover, focus, small state changes: must finish inside 200 ms */ --t-move: 360ms; /* panels, menus, section transitions: must finish inside 500 ms */ --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1); /* entrances and feedback */ --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* on-screen moves */ /* a critically damped spring curve (no overshoot) for use with --t-move: transition: transform var(--t-move) var(--spring) */ --spring: linear(0, 0.0151 2%, 0.0535 4%, 0.1373 7%, 0.2359 10%, 0.3704 14%, 0.4947 18%, 0.6262 23%, 0.7471 29%, 0.8442 36%, 0.9128 44%, 0.959 54%, 0.984 66%, 0.9948 80%, 1); --tap: 44px; /* minimum tap target */ } /* Base behaviors every Sacred interface gets for free */ html { font-family: var(--font); background: var(--void); color: var(--linen); font-optical-sizing: auto; -webkit-font-smoothing: antialiased; } :where(button, [role="button"], a.btn, .btn) { transition: transform var(--t-press) var(--ease-out), background-color var(--t-feedback) var(--ease-out), border-color var(--t-feedback) var(--ease-out), opacity var(--t-feedback) var(--ease-out); min-height: var(--tap); border-radius: var(--r-button); box-shadow: none; } :where(button, [role="button"], a.btn, .btn):active { transform: scale(var(--press-scale)); } /* responds on pointer-down */ :where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--linen); outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; } * { transition-property: opacity, color, background-color, border-color !important; transition-duration: 120ms !important; } /* movement becomes a short cross-fade */ } @media (prefers-reduced-transparency: reduce) { :root { --chrome-bg: var(--void); --chrome-blur: none; --scrim: rgba(10, 11, 16, 0.92); } } @media (prefers-contrast: more) { :root { --hairline: rgba(237, 231, 218, 0.5); --linen-soft: #D8D1C0; } }