/* ============================================================ SGELA — DESIGN TOKENS. One system, both surfaces. Direction B, adopted 2026-10-14. The execution is borrowed from the tubik reference the founders chose; every colour and both typefaces are Sgela's own. Nothing here comes from a reference. THE LANGUAGE paper ground · every edge a 2px ink stroke · flat offset shadows with NO blur · colour-blocked cards · uppercase micro-labels · dense and high contrast. Replaces the previous light `tokens.css` and the dark `tokens-app.css`. There is one system now; the site and the platform differ in content, not in language. ============================================================ */ :root { /* --- Ground ------------------------------------------------ */ --paper: #FCFBF9; /* the everywhere ground — never #FFFFFF */ --paper-warm: #F2EFE9; /* alternate sections, inset wells */ --white: #FFFFFF; /* plain blocks only, never the page */ --ink-fixed: #14151B; /* never flips. The stroke on a light-filled block (spark, white) stays dark in both modes. */ --paper-hatch:#E7E2D7; /* the diagonal hatch in an empty photo slot. Retires the day real photography arrives. */ /* --- Ink. Type AND every outline — one near-black, no greys drawn as lines. ------------------------------------- */ --ink: #16171D; /* headings, body, and all strokes (17.3:1 on paper) */ --ink-soft: #4A4B55; /* secondary copy (8.4:1) */ --grey: #6E6F79; /* captions, micro-labels. 4.84:1 on --paper — but only 4.34:1 on --paper-warm, so on a warm section use --ink-soft instead. */ /* --- The blocks. A CLOSED SET. Each one has a single job, and using one outside its job is what breaks the scheme — colour here carries meaning, it does not decorate. --- */ --indigo: #3D59A8; /* the brand, and the primary action (white on it 6.6:1) */ --indigo-deep: #283B73; /* pressed state (white 10.7:1) */ --indigo-soft: #EEF1FA; /* quiet tint, selected rows */ --spark: #F5B400; /* anything EARNED — streak, XP, achievement (ink 9.7:1) */ --spark-soft: #FFF6DD; --growth: #1F7E47; /* completed, correct, done (white 5.1:1) */ --growth-soft: #E8F6EE; --danger: #C41F35; /* real urgency only — closing dates (white 5.8:1) */ --danger-soft: #FBE8EA; --warning: #96530A; /* needs attention, not yet urgent (5.7:1 on paper) */ --warning-soft:#FEF1E0; /* Foreground for each block. Never inherit a colour onto a block — a white label on a white pill is the classic bug. */ --on-indigo: #FFFFFF; --on-spark: #16171D; --on-growth: #FFFFFF; --on-danger: #FFFFFF; --on-ink: #FCFBF9; /* --- Surfaces. No soft elevation anywhere in this system. --- */ --stroke: 2px solid var(--ink); --stroke-thin: 1.5px solid var(--ink); /* Flat offset shadows. Zero blur is the point — a blurred shadow immediately reads as the previous system. */ --drop-sm: 3px 3px 0 var(--ink); --drop: 4px 4px 0 var(--ink); --drop-lg: 6px 6px 0 var(--ink); /* A 2px ink stroke on an indigo block measures 2.72:1 against its own fill, so it reads as an edge rather than a line. That is fine — its job is to separate the block from the PAPER (17.3:1). THE RULE IT IMPLIES: never place two dark blocks flush. Always leave at least --space-1 of paper between them. */ /* --- Spacing: one 8-point scale ---------------------------- */ --space-1: 8px; --space-2: 16px; --space-3: 24px; --space-4: 32px; --space-5: 48px; --space-6: 64px; /* --- Type: two families, unchanged ------------------------- */ --font-display: "Varela Round", "Nunito", system-ui, sans-serif; --font-body: "Lexend", system-ui, -apple-system, "Segoe UI", sans-serif; /* Varela Round ships ONE weight. This system gets its heft from SIZE and from Lexend 600 uppercase micro-labels — never from a third typeface, and never from synthesised bold. */ --text-label: 11px; /* 600 / +.10em / UPPERCASE — the micro-label */ --text-caption: 13px; --text-ui: 15px; --text-body: 17px; --text-lead: 20px; --text-h3: 22px; --text-h2: 32px; --text-h1: clamp(30px, 5.5vw, 46px); --text-stat: 62px; /* streak and XP numbers */ --text-screen: 40px; /* the full-bleed screen title, UPPERCASE */ --text-mega: clamp(34px, 6.4vw, 72px); /* a site section title, UPPERCASE */ --lh-tight: .92; --lh-heading: 1.08; --lh-body: 1.55; --track-stat: -.045em; --track-display: -.035em; --track-heading: -.02em; --track-caps: .10em; /* --- Radii: chunky, never square ---------------------------- */ --radius-sm: 12px; /* inputs, pills, small controls */ --radius-md: 16px; /* blocks, cards */ --radius-lg: 24px; /* sheets, large panels */ --radius-xl: 30px; /* a card in the stack, and the phone frame */ --radius-pill: 999px; /* The stack. Cards slide up over each other and the card behind shows as a band of its own colour — that band IS the separator, which is why a stacked card carries no stroke. */ --stack-peek: 58px; /* how much of the card behind stays visible */ --stack-overlap: -22px; /* how far the card in front rides over it */ /* --- Motion. The signature is the press INTO the shadow. ---- */ --ease: cubic-bezier(.16, 1, .3, 1); --ease-pop: cubic-bezier(.34, 1.56, .64, 1); /* rewards only */ --dur-ui: .15s; --dur-entrance: .5s; --dur-reward: .45s; --nudge: -2px; /* hover lifts up-left, shadow grows */ } /* ============================================================ DARK. Both of this system's signature devices break on a dark ground: a black stroke is invisible, and so is a black offset shadow. So they invert — the stroke becomes LIGHT and the offset shadow goes with it, keeping the hard duplicate edge that makes the language what it is. What does NOT change: the four block fills. Indigo, spark, growth and danger keep their exact light-mode values, and every foreground on them still passes. The brand is the same colour in both modes. What this costs: coloured TEXT. On the dark ground indigo measures 2.8:1, growth 3.6:1 and danger 3.1:1 — all failing. Only paper, grey and spark may carry text on dark. Declared on bare :root first (light), then redefined for the two dark states, so an unstamped document still resolves. SHIPPING NOTE, 2026-10-15: every page Sgela ships now carries data-theme="light" on , so none of this is reached in practice. It is kept, not deleted — turning dark back on is removing one attribute, and the contrast work behind it still holds. See docs/decisions.md. ============================================================ */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --paper: #14151B; --paper-warm: #1B1D25; --white: #1B1D25; --paper-hatch:#23252F; --ink: #FCFBF9; --ink-soft: #C9C9D2; --grey: #9A9CA8; --indigo-soft: rgba(61, 89, 168, .22); --spark-soft: rgba(245, 180, 0, .18); --growth-soft: rgba(31, 126, 71, .22); --danger-soft: rgba(196, 31, 53, .22); --warning-soft:rgba(150, 83, 10, .24); --warning: #E8A84F; --on-ink: #14151B; --stroke: 2px solid var(--ink); --stroke-thin: 1.5px solid var(--ink); --drop-sm: 3px 3px 0 var(--ink); --drop: 4px 4px 0 var(--ink); --drop-lg: 6px 6px 0 var(--ink); } } :root[data-theme="light"] { color-scheme: light; } :root[data-theme="dark"] { --paper: #14151B; --paper-warm: #1B1D25; --white: #1B1D25; --paper-hatch:#23252F; --ink: #FCFBF9; --ink-soft: #C9C9D2; --grey: #9A9CA8; --indigo-soft: rgba(61, 89, 168, .22); --spark-soft: rgba(245, 180, 0, .18); --growth-soft: rgba(31, 126, 71, .22); --danger-soft: rgba(196, 31, 53, .22); --warning-soft:rgba(150, 83, 10, .24); --warning: #E8A84F; --on-ink: #14151B; --stroke: 2px solid var(--ink); --stroke-thin: 1.5px solid var(--ink); --drop-sm: 3px 3px 0 var(--ink); --drop: 4px 4px 0 var(--ink); --drop-lg: 6px 6px 0 var(--ink); } /* Border-box everywhere. This system puts a 2px stroke on almost everything, so without it every width:100% element overflows. */ *, *::before, *::after { box-sizing: border-box; } body { background: var(--paper); color: var(--ink); font-family: var(--font-body); font-size: var(--text-body); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; } @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }