/* ============================================================================ redskia.dev — design tokens ("Red shadow") RedSkia: red + skia, Greek for shadow. The mark is a little ghost, and the whole system follows it: surfaces are deep shadow-black with a faint red undertone, and the one thing that glows is the ghost's red shadow — under the home hero, behind product covers, beneath a card you point at. Red is the brand, not just a button colour: the mark, the primary action, focus, the active page and the shadow. Everything else stays quiet so the red always reads as intentional. Two tiers: palette raw values, never referenced outside this file semantic the only names components may use [data-theme="light"] overrides the semantic tier and nothing else. ========================================================================== */ @layer tokens, base, primitives, components, pages; @layer tokens { :root { /* ---- Palette: shade (near-black with a red undertone) --------------- */ --shade-0: #ffffff; --shade-25: #fbf9f9; --shade-50: #f5f1f1; --shade-100: #ece6e6; --shade-150: #e2dadb; --shade-200: #d3c9ca; --shade-300: #b4a8a9; --shade-400: #aa9ea0; --shade-500: #88797c; --shade-600: #5e5254; --shade-700: #413739; --shade-800: #2c2426; --shade-850: #231c1e; --shade-900: #1b1617; --shade-925: #151112; --shade-950: #0f0c0d; --shade-990: #0a0808; /* ---- Palette: RedSkia red (white text on 600 passes AA at 4.7:1) ----- */ --red-300: #ffb0ab; --red-400: #ff5c54; --red-500: #ee3b33; --red-600: #dc2f29; --red-700: #b82520; --red-800: #911c18; --red-900: #5c100e; --emerald-400: #3ddc97; --emerald-700: #077a52; --emerald-800: #066b48; /* 5.4:1 on the light ok tint: status text passes AA */ --amber-400: #f5b93d; --amber-700: #a55a06; --azure-400: #5cb4ff; --azure-700: #0b62b0; /* ---- Type ------------------------------------------------------------ */ --font-display: 'Bricolage Grotesque', 'Inter', -apple-system, 'Segoe UI', sans-serif; --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace; /* A 1.25 scale from 16px, with a jump at the top for display type. */ --text-2xs: 0.6875rem; --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: 1.375rem; --text-2xl: 1.75rem; --text-3xl: 2.5rem; --text-4xl: 3.5rem; --text-5xl: 5.25rem; /* ---- Space, on a 4px base ------------------------------------------- */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 7rem; /* ---- Geometry: radius grows with the size of the thing ------------- */ --radius-sm: 6px; --radius: 8px; --radius-lg: 12px; --radius-xl: 18px; --radius-full: 999px; /* ---- Controls: every input, select and button shares one height, so a field and its button always line up on the same row. ---------------------------------- */ --control-h-sm: 28px; --control-h: 34px; --control-h-lg: 40px; --icon-stroke: 1.9; --maxw: 1200px; --measure: 68ch; --header-h: 64px; --ease: cubic-bezier(0.2, 0.8, 0.2, 1); /* @semantic-dark */ --surface-page: var(--shade-950); --surface-scan: var(--shade-0); /* always white: QR codes must scan in both themes */ --surface-sunken: var(--shade-990); --surface-1: var(--shade-925); --surface-2: var(--shade-900); --surface-3: var(--shade-850); --surface-hover: var(--shade-900); --surface-header: rgba(15, 12, 13, 0.8); --surface-inverse: var(--shade-50); --border-subtle: rgba(255, 228, 228, 0.07); --border-default: rgba(255, 228, 228, 0.1); --border-strong: rgba(255, 228, 228, 0.16); --border-hover: rgba(255, 228, 228, 0.27); --text-primary: #f5efef; --text-secondary: var(--shade-400); --text-tertiary: var(--shade-500); --text-inverse: var(--shade-950); --action-primary-bg: var(--red-600); --action-primary-hover: var(--red-500); --action-primary-active: var(--red-700); --action-primary-fg: var(--shade-0); --action-primary-soft: rgba(238, 59, 51, 0.13); --action-primary-line: rgba(238, 59, 51, 0.4); --action-secondary-bg: var(--shade-50); --action-secondary-hover: var(--shade-200); --action-secondary-fg: var(--shade-950); --accent-text: var(--red-400); --focus-ring: var(--red-400); --overlay: rgba(6, 4, 4, 0.74); --overlay-soft: rgba(255, 228, 228, 0.03); --overlay-firm: rgba(255, 228, 228, 0.06); --overlay-line: rgba(255, 255, 255, 0.14); --glass-bg: rgba(15, 12, 13, 0.8); --glass-line: rgba(255, 228, 228, 0.09); --status-ok-fg: var(--emerald-400); --status-ok-bg: rgba(61, 220, 151, 0.1); --status-ok-border: rgba(61, 220, 151, 0.28); --status-warn-fg: var(--amber-400); --status-warn-bg: rgba(245, 185, 61, 0.1); --status-warn-border: rgba(245, 185, 61, 0.28); --status-error-fg: var(--red-400); --status-error-bg: rgba(238, 59, 51, 0.1); --status-error-border: rgba(238, 59, 51, 0.32); --status-info-fg: var(--azure-400); --status-info-bg: rgba(92, 180, 255, 0.1); --status-info-border: rgba(92, 180, 255, 0.28); --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.45); --shadow-2: 0 1px 2px rgba(0, 0, 0, 0.4), 0 6px 16px rgba(0, 0, 0, 0.35); --shadow-3: 0 2px 6px rgba(0, 0, 0, 0.45), 0 24px 56px rgba(0, 0, 0, 0.6); --shadow-up: 0 -8px 24px rgba(0, 0, 0, 0.5); --shadow-hover: 0 2px 4px rgba(0, 0, 0, 0.4), 0 14px 32px rgba(0, 0, 0, 0.5); --skeleton-from: var(--shade-925); --skeleton-to: var(--shade-850); /* The red shadow. Page heads get a faint red haze from above; the home hero, covers and hovered cards get the real thing. */ --hero-glow-a: rgba(220, 47, 41, 0.16); --hero-glow-b: rgba(220, 47, 41, 0.1); --grid-line: rgba(255, 228, 228, 0.05); --edge-light: rgba(255, 255, 255, 0.1); --redshadow-haze: rgba(145, 28, 24, 0.35); --redshadow-glow: rgba(220, 47, 41, 0.55); --redshadow-core: rgba(255, 92, 84, 0.75); --redshadow-line: rgba(255, 120, 112, 0.8); --redshadow-card: rgba(220, 47, 41, 0.35); --mark-shadow: var(--red-600); /* Brand panels (login, the portfolio monogram): the dark red-shadow scene, the same in both themes. */ --brand-panel-bg: var(--surface-sunken); --brand-panel-glow: var(--redshadow-glow); --brand-panel-text: var(--text-primary); --brand-panel-muted: var(--text-secondary); --brand-panel-line: var(--border-subtle); --mask-opaque: var(--shade-0); } /* @semantic-light */ [data-theme="light"] { --surface-page: #f7f4f3; --surface-scan: var(--shade-0); --surface-sunken: #f1ecea; --surface-1: var(--shade-0); --surface-2: var(--shade-25); --surface-3: var(--shade-50); --surface-hover: #f4eeed; --surface-header: rgba(255, 255, 255, 0.82); --surface-inverse: var(--shade-950); --border-subtle: rgba(60, 20, 20, 0.09); --border-default: rgba(60, 20, 20, 0.14); --border-strong: rgba(60, 20, 20, 0.22); --border-hover: rgba(185, 37, 32, 0.4); --text-primary: var(--shade-950); --text-secondary: #54484a; --text-tertiary: #6c5f61; --text-inverse: var(--shade-0); --action-primary-bg: var(--red-600); --action-primary-hover: var(--red-700); --action-primary-active: var(--red-800); --action-primary-fg: var(--shade-0); --action-primary-soft: rgba(220, 47, 41, 0.08); --action-primary-line: rgba(220, 47, 41, 0.32); --action-secondary-bg: var(--shade-950); --action-secondary-hover: var(--shade-800); --action-secondary-fg: var(--shade-0); --accent-text: var(--red-700); --focus-ring: var(--red-600); --overlay: rgba(15, 12, 13, 0.4); --overlay-soft: rgba(60, 20, 20, 0.025); --overlay-firm: rgba(60, 20, 20, 0.06); --overlay-line: rgba(255, 255, 255, 0.2); --glass-bg: rgba(255, 255, 255, 0.8); --glass-line: rgba(60, 20, 20, 0.09); --status-ok-fg: var(--emerald-800); --status-ok-bg: rgba(7, 122, 82, 0.07); --status-ok-border: rgba(7, 122, 82, 0.24); --status-warn-fg: var(--amber-700); --status-warn-bg: rgba(165, 90, 6, 0.07); --status-warn-border: rgba(165, 90, 6, 0.24); --status-error-fg: var(--red-700); --status-error-bg: rgba(220, 47, 41, 0.06); --status-error-border: rgba(220, 47, 41, 0.26); --status-info-fg: var(--azure-700); --status-info-bg: rgba(11, 98, 176, 0.06); --status-info-border: rgba(11, 98, 176, 0.22); --shadow-1: 0 1px 2px rgba(60, 20, 20, 0.06), 0 2px 8px rgba(60, 20, 20, 0.04); --shadow-2: 0 1px 3px rgba(60, 20, 20, 0.08), 0 10px 24px rgba(60, 20, 20, 0.08); --shadow-3: 0 2px 8px rgba(60, 20, 20, 0.07), 0 28px 60px rgba(60, 20, 20, 0.13); --shadow-up: 0 -4px 16px rgba(60, 20, 20, 0.06); --shadow-hover: 0 2px 6px rgba(60, 20, 20, 0.06), 0 18px 40px rgba(185, 37, 32, 0.14); --skeleton-from: var(--shade-100); --skeleton-to: var(--shade-200); --hero-glow-a: rgba(220, 47, 41, 0.09); --hero-glow-b: rgba(220, 47, 41, 0.04); --grid-line: rgba(60, 20, 20, 0.05); --edge-light: rgba(255, 255, 255, 0.9); --redshadow-haze: rgba(220, 47, 41, 0.035); --redshadow-glow: rgba(220, 47, 41, 0.12); --redshadow-core: rgba(238, 59, 51, 0.16); --redshadow-line: rgba(220, 47, 41, 0.5); --redshadow-card: rgba(220, 47, 41, 0.18); --mark-shadow: var(--red-600); --brand-panel-bg: var(--shade-925); --brand-panel-glow: rgba(220, 47, 41, 0.5); --brand-panel-text: var(--shade-25); --brand-panel-muted: var(--shade-300); --brand-panel-line: rgba(60, 20, 20, 0.2); --mask-opaque: var(--shade-0); } /* ---- Generated product covers ------------------------------------------- Eight covers, one family, keyed off the product id by ProductCover.razor. Each is a dark field with a pool of red shadow; the monogram casts a hard red shadow of its own, like the mark. Variation is where the light pools, how deep the red goes and which way the shadow falls. Dark in both themes, like an album cover on a white page. ------------------------------------------------------------------------ */ .cover-h0 { --cover-base: hsl(350 14% 7%); --cover-glow: hsl(2 76% 48% / 0.55); --cover-x: 78%; --cover-y: 100%; --cover-sx: 0.05em; --cover-sy: 0.05em; --cover-shadow: hsl(2 76% 50%); --cover-ink: hsl(0 20% 97%); } .cover-h1 { --cover-base: hsl(355 18% 8%); --cover-glow: hsl(356 80% 44% / 0.6); --cover-x: 20%; --cover-y: 100%; --cover-sx: -0.05em; --cover-sy: 0.05em; --cover-shadow: hsl(356 78% 46%); --cover-ink: hsl(0 20% 97%); } .cover-h2 { --cover-base: hsl(0 10% 6%); --cover-glow: hsl(6 82% 50% / 0.5); --cover-x: 88%; --cover-y: 20%; --cover-sx: 0.06em; --cover-sy: 0.04em; --cover-shadow: hsl(6 82% 52%); --cover-ink: hsl(0 20% 97%); } .cover-h3 { --cover-base: hsl(348 16% 9%); --cover-glow: hsl(350 70% 40% / 0.65); --cover-x: 50%; --cover-y: 110%; --cover-sx: 0.04em; --cover-sy: 0.06em; --cover-shadow: hsl(350 72% 44%); --cover-ink: hsl(0 20% 97%); } .cover-h4 { --cover-base: hsl(5 12% 7%); --cover-glow: hsl(0 84% 52% / 0.45); --cover-x: 12%; --cover-y: 12%; --cover-sx: -0.06em; --cover-sy: 0.04em; --cover-shadow: hsl(0 80% 50%); --cover-ink: hsl(0 20% 97%); } .cover-h5 { --cover-base: hsl(352 20% 6%); --cover-glow: hsl(354 76% 46% / 0.6); --cover-x: 70%; --cover-y: 90%; --cover-sx: 0.05em; --cover-sy: 0.05em; --cover-shadow: hsl(354 76% 48%); --cover-ink: hsl(0 20% 97%); } .cover-h6 { --cover-base: hsl(0 6% 8%); --cover-glow: hsl(4 72% 42% / 0.7); --cover-x: 30%; --cover-y: 95%; --cover-sx: -0.04em; --cover-sy: 0.06em; --cover-shadow: hsl(4 74% 46%); --cover-ink: hsl(0 20% 97%); } .cover-h7 { --cover-base: hsl(346 14% 8%); --cover-glow: hsl(358 86% 54% / 0.45); --cover-x: 95%; --cover-y: 60%; --cover-sx: 0.06em; --cover-sy: 0.05em; --cover-shadow: hsl(358 84% 52%); --cover-ink: hsl(0 20% 97%); } }