/* ===================================================================== Tora design tokens — single source of truth for every page. Layers, top to bottom: 1. primitives raw values; never referenced by components 2. semantic what components use (--ink, --accent, --surface…) 3. scales type, space, radius, layout, motion 4. root scaling the one rule that makes the whole system fluid Web type/spacing scale in rem; exported app geometry keeps its px values. ===================================================================== */ :root{ /* App export: app-swift/ui-system/tokens.css, Mono dark, 2026-09-26. Geometry and neutral roles retained; Chrome Steel ink, fill and brand overrides follow the settled captain palette (2026-09-28). Web aliases preserve consumers. */ --color-background: #141414FF; --color-surface: #1C1E21FF; --color-surface-raised: #232528FF; --color-text-primary: #EEF3F6FF; --color-text-secondary: #A5ABB4FF; --color-text-tertiary: #646A74FF; --color-primary-fill: #EEF3F6FF; --color-ink-on-primary: #141414FF; --color-stroke: #FFFFFF14; --color-stroke-soft: #FFFFFF0A; --color-state-danger: #EA8189FF; --glass-blur: 18px; --glass-sheen-opacity: 0.16; --glass-shadow-opacity: 0.28; --glass-shadow-radius: 22px; --radius-card-capped: 37.52px; --radius-card-132: 22.11px; --radius-control-44: 14px; --hit-min: 44px; --opacity-soft: 0.16; --surface:var(--color-surface); --surface-raised:var(--color-surface-raised); --radius-control:var(--radius-control-44); /* HouseButton.prominent: DESIGN.md; translucent chrome uses surface ink. */ --hit-prominent:3.5rem; --chrome-fill:color-mix(in srgb,var(--surface) calc(100% - var(--opacity-soft) * 100%),transparent); /* ---------- 1. colour primitives ---------------------------------- Channel triplets (space-separated) so any alpha can be derived: rgb(var(--c-cyan) / .4) */ --c-black: 0 0 0; --c-white: 255 255 255; --c-carbon: 20 20 20; /* #141414 page ground */ --c-obsidian: 10 10 12; /* #0A0A0C text on light controls */ --c-ink: 238 243 246; /* Chrome Steel ice */ --c-ash-300: 165 171 180; /* Mono dark app palette */ --c-ash-500: 165 171 180; /* Mono dark app palette */ --c-ash-700: 100 106 116; /* Mono dark app palette */ /* Chrome Steel, settled captain palette 2026-09-28. Legacy aliases preserve consumers. */ --c-cyan: 221 229 234; /* #DDE5EA UI accent */ --c-teal: 143 179 203; /* #8FB3CB light steel */ --c-ice: 238 243 246; /* #EEF3F6 ice highlight */ --c-mint: var(--c-ice); /* legacy brand alias; no mint */ --c-success: 110 207 153; /* #6ECF99 semantic success stays green */ --c-rust: 234 129 137; --c-lavender: var(--c-ice); /* legacy primary fill alias */ /* Shared by CSS and the hero / CTA / member-card shaders. */ --steel-0:#141414; --steel-1:#0E1114; --steel-2:#151D24; --steel-3:#1B2833; --steel-4:#344E62; --steel-5:#5D8199; --steel-6:#8FB3CB; --steel-7:#EEF3F6; --teal-0:var(--steel-0); --teal-1:var(--steel-1); --teal-2:var(--steel-2); --teal-3:var(--steel-3); --teal-4:var(--steel-4); --teal-5:var(--steel-5); --teal-6:var(--steel-6); /* ---------- 2. semantic colour ------------------------------------ */ --bg: var(--color-background); --ink: rgb(var(--c-ink)); --body: rgb(var(--c-ash-300)); --muted: rgb(var(--c-ash-500)); --faint: var(--color-text-secondary); /* small supporting text needs contrast */ --on-accent: var(--color-ink-on-primary); --cyan: rgb(var(--c-cyan)); --cyan-dim: rgb(var(--c-cyan) / .4); --cyan-glow: rgb(var(--c-cyan) / .16); --cyan-faint: rgb(var(--c-cyan) / .08); --brand: rgb(var(--c-teal)); --teal: rgb(var(--c-mint)); /* legacy brand alias: ice */ --teal-dim: rgb(var(--c-mint) / .4); --rust: rgb(var(--c-rust)); --rust-dim: rgb(var(--c-rust) / .4); --lavender: rgb(var(--c-lavender)); --lavender-dim: rgb(var(--c-lavender) / .4); --hairline: var(--color-stroke); --glass: rgb(var(--c-lavender) / .035); --scrim: rgb(var(--c-carbon) / .78); /* deprecated aliases — "gold" has been rust since the palette change */ --gold:var(--rust); --gold-dim:rgb(var(--c-rust) / .38); --gold-faint:rgb(var(--c-rust) / .12); /* ---------- 3a. type ---------------------------------------------- */ --display:'Orbitron',sans-serif; --sans:'DM Sans',-apple-system,BlinkMacSystemFont,sans-serif; --label:var(--sans); /* the site uses only Orbitron and DM Sans (founder 2026-10-11): the old mono role now reads DM Sans */ --mono:'DM Sans',system-ui,sans-serif; --text-2xs:.6875rem; /* 11 app micro */ --text-xs:.6875rem; /* 11 captions, tags */ --text-sm:.8125rem; /* 13 nav, buttons, meta */ --text-md:.9375rem; /* 15 app body */ --text-body:.9375rem; /* 15 card copy */ --text-base:.9375rem; /* 15 app body */ --text-lg:1.0625rem; /* 17 app headline */ --text-xl:1.375rem; /* 22 app title */ --text-2xl:1.375rem; /* 22 app title */ --text-3xl:2.125rem; /* 34 app readout */ --text-lede:1.0625rem; --text-h2:clamp(1.375rem,3vw,2.125rem); --text-h1:clamp(2.125rem,4vw,3rem); --text-hero:clamp(2.125rem,5vw,3rem); /* one rung for every section title (founder 2026-10-11, review F07): 56 on desktop, 32 on phones */ --text-section:clamp(2rem,3.9vw,3.5rem); --leading-tight:1.06; --leading-snug:1.16; --leading-body:1.72; /* ---------- 3b. space (4px base) ---------------------------------- */ --space-1:.25rem; --space-2:.5rem; --space-3:.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:6rem; --section-y:5rem; /* vertical rhythm between sections */ --section-y-lg:6rem; /* before the footer */ --section-y-xl:6rem; /* above a visually heavy row */ /* ---------- 3c. radius -------------------------------------------- */ --radius-xs:.25rem; /* app radius-chip-8 */ --radius-sm:var(--radius-control); /* exported app geometry */ --radius-md:var(--radius-control); /* exported app geometry */ --radius-lg:var(--radius-card-132); /* exported app geometry */ --radius-xl:var(--radius-card-capped); /* exported app geometry */ --radius-2xl:var(--radius-card-capped); /* exported app geometry */ --radius-pill:999px; /* ---------- 3d. layout -------------------------------------------- */ --container:70rem; /* reading column (1120) */ --container-wide:90rem; /* header / media / foot (1440) */ --gutter:1.25rem; /* reading column inset */ --gutter-wide:1.25rem; /* edge-to-edge frame inset */ --gutter-wide-sm:1.25rem; /* same frame on phones */ --header-h:5rem; /* ---------- 3e. motion -------------------------------------------- */ --rev-ease:cubic-bezier(.22,1,.36,1); /* every entrance on the page */ --dur-fast:.15s; --dur:.2s; --dur-slow:.75s; } /* ---------- 4. root scaling ------------------------------------------- Up to a 1440 viewport 1rem = the user's default (16px), so the design renders exactly as drawn. Past 1440 the root grows linearly to 22px at 2560, and because every size, gap and container is in rem the whole layout scales with it instead of floating as a small island on a big display. Respects a user's own browser font-size setting. */ html{font-size:clamp(100%,calc(100% + (100vw - 1440px) * .00536),137.5%)} /* Breakpoints (media queries can't read custom properties — use these): sm 480px single-column controls md 820px stacked layouts, nav collapses nav 720px header links collapse (the one exception) */ /* Supporting palette: Space Blue (captain, 2026-09-30). From the Cassini ring light used in Research and tora PRO; it sits beside Chrome Steel as a secondary colour, never as the main one. Values are provisional until the brand guide defines them. */ :root{--space-deep:#060b14;--space-navy:#0f1f38;--space-blue:#345888;--space-glow:#7fa6d6} /* Design rule: containers never get borders (founder, 2026-10-05). Cards, panes, tiles, chips and frames are separated by light and shading only: a lit top edge (inset 0 1px 0), soft drop shadows and background tone. Do not add border, outline or 1px box-shadow rings to containers. Lines that are part of a drawing (phone hardware, diagram strokes, the lock's rings) are not containers. */ /* Shapes (2026-10-06): the app's Apple-style convention. Cards 24px, cards nested in a card concentric (never below 12px), inputs 12px, buttons, chips, tags and the nav capsules, rows inside a rounded container flat; circles stay circles. The rule and its reasons live in assets/shape.css, loaded last on every page. */