/* ============================================================================ delEat — design tokens The single source of truth. Nothing below this file may invent a colour, a size or a radius; it picks one from here. Palette anchors are the four brand colours and nothing else: black #000000 orange #FF6B3D dark gray #4D4D4D light gray #DEDEDE Every other value is derived from those and validated for contrast. ========================================================================= */ :root { /* ---- brand anchors ---------------------------------------------------- */ --brand-black: #000000; --brand-orange: #FF6B3D; --brand-gray-dark: #4D4D4D; --brand-gray-light: #DEDEDE; /* ---- orange ramp ------------------------------------------------------ Tints mix toward a warm white so they stay orange instead of going pink- gray. Shades mix toward a deep ember. Contrast on white is noted because it decides where each step is allowed to be used. */ --o-50: #FFF0E9; /* washes only */ --o-100: #FFE4DA; /* wash, hover on light */ --o-200: #FFCEBD; /* borders on light */ --o-300: #FFB298; /* decorative rules, chart fills */ --o-400: #FF906D; /* hover face of the primary key */ --o-500: #FF6B3D; /* THE brand fill. 6.34:1 under ink — not a text colour on a light ground. */ --o-600: #E25D34; /* pressed state, focus ring */ --o-700: #C14D2A; /* the hard bottom edge under a key */ --o-800: #A13D20; /* orange TEXT on light lives here (5.93:1 on bone) */ --o-900: #802D16; /* deepest ember */ /* ---- neutral ramp ------------------------------------------------------ Warm-neutral, anchored on the three grays from the brand palette. */ --n-0: #FFFFFF; --n-25: #FBFAF9; --n-50: #F6F4F2; --n-100: #EFEDEA; --n-200: #DEDEDE; /* brand light gray */ --n-300: #C7C6C4; --n-400: #A3A2A0; --n-500: #6E6D6B; --n-600: #4D4D4D; /* brand dark gray */ --n-700: #333333; --n-800: #242424; --n-900: #000000; /* brand black */ --n-950: #0D0D0D; --bone: #F7F3EE; /* the warm paper the light pages are printed on */ /* ---- semantic ---------------------------------------------------------- Kept away from the brand orange in both hue and lightness so a warning never reads as branding. Each is always paired with an icon or a word, never colour alone. */ --ok: #1A7F5A; --ok-ink: #0E5C40; --ok-wash: #E7F4EE; --warn: #B57A0A; --warn-ink: #8A5C05; --warn-wash: #FBF1DC; --bad: #B3211A; --bad-ink: #8C1712; --bad-wash: #FBEAE8; --info: #1E5FBF; --info-ink: #174992; --info-wash: #E8EFFB; /* ---- chart palette ----------------------------------------------------- Eight ordered slots. Validated for WCAG contrast and simulated for protanopia, deuteranopia and tritanopia: worst-case pairwise distance is ΔE 52 across all four vision models, so no two series collide. Use in order. Past slot four, add a direct label as well. */ --c-1: #FF6B3D; /* ember — always the series that matters most */ --c-2: #3B4FB8; /* indigo */ --c-3: #12796B; /* teal */ --c-4: #C98A0B; /* gold */ --c-5: #9C4FD1; /* violet */ --c-6: #5AA9D6; /* sky */ --c-7: #8C5A3C; /* clay */ --c-8: #333333; /* graphite */ /* ---- type -------------------------------------------------------------- Inter sets every headline (2026-09-05: the client preferred the system grotesque the artifact fell back to; Inter is its cross-platform twin, set tight). Manrope and Rubik Black did this job before. The wordmark is Archivo (del at 400, Eat at 900), outlined to paths in the logo pack, so it carries no font dependency at all. Rubik is gone. Inter runs the interface, because it is what the product itself uses. JetBrains Mono is the machine's voice: totals, timestamps, labels, anything the till would have printed. */ --font-display: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --font-ui: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* A fifth-major scale, clamped so it holds from 360px to 1600px without a single media query. */ --t-xs: clamp(0.72rem, 0.70rem + 0.10vw, 0.78rem); --t-sm: clamp(0.82rem, 0.79rem + 0.15vw, 0.90rem); --t-base: clamp(0.95rem, 0.91rem + 0.20vw, 1.06rem); --t-md: clamp(1.08rem, 1.02rem + 0.30vw, 1.25rem); --t-lg: clamp(1.30rem, 1.18rem + 0.60vw, 1.70rem); --t-xl: clamp(1.65rem, 1.40rem + 1.20vw, 2.45rem); /* --t-2xl and --t-3xl's ceilings (the desktop/wide end of the clamp only -- the mobile-side minimum is untouched, per the Apple-port pass's own rule) are nudged from 57.6px/86.4px to Apple's own measured chapter- headline and top-hero-claim sizes, 56px and 80px (see the port's typeramp.txt) -- a 1.6px and 6.4px difference, invisible on its own, precise rather than approximate now that a real benchmark exists. */ --t-2xl: clamp(2.10rem, 1.60rem + 2.40vw, 3.50rem); --t-3xl: clamp(2.70rem, 1.80rem + 4.20vw, 5.00rem); --t-4xl: clamp(3.20rem, 1.70rem + 7.00vw, 8.00rem); --lh-tight: 1.02; --lh-head: 1.08; --lh-snug: 1.30; --lh-body: 1.60; --tr-tight: -0.032em; /* display sizes (Inter wants it tighter than Manrope did) */ --tr-head: -0.014em; --tr-body: -0.006em; --tr-caps: 0.09em; /* the small all-caps eyebrow */ /* ---- space — a 4px base, doubling where it matters --------------------- */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 40px; --s-8: 56px; --s-9: 72px; --s-10: 96px; --s-11: 128px; --s-12: 176px; --gutter: clamp(20px, 4.5vw, 56px); --measure: 62ch; --page: 1240px; --page-wide: 1440px; /* ---- one vertical rhythm ----------------------------------------------- Every `.section` reads its top/bottom padding off this one variable (css/base.css), so the whole site shares a single scale by construction instead of each page hand-tuning its own clamp(). 2026-09: the home page used to redefine this to a MORE generous budget on the theory that twenty-plus chapters in a row needed more room (see the removed overrides that used to live in css/apple.css and the mobile block of css/site.css) — in practice that doubled up (every `.section` pads both its own bottom AND the next section's top) into 300px+ gaps between a chapter's cards and the next chapter. There is now exactly ONE value, used everywhere, with no page-scoped exception. */ --sec-y: clamp(56px, 5.5vw, 80px); /* Round 23, item 4: one figure for the air between a section head and the grid under it, so the highlights bento, the modules wall, the format bento, the offline tiles, the dashboard stage and every module page's feature bento all breathe the same. */ --bento-top: 56px; /* ---- radii ------------------------------------------------------------- One family from 4 to 36. Cards and tiles take the scale; the nav, its CTAs, the call-to-action buttons and the capsule logo are pills, by design. The bite belongs to the logo artwork (the capsule, the dE key, the app icon) and is never cut in CSS: the staircase keycap that did so was retired on 2026-09-24. */ --r-1: 4px; --r-2: 8px; --r-3: 12px; --r-4: 16px; --r-5: 22px; --r-6: 28px; --r-7: 36px; --r-full: 999px; /* Round 10: one radius for every bento and card tile on the home page, so a photo tile, a stat tile and a UI-fragment tile read as one family (Apple's own bentos hold a single corner across the whole grid). */ --r-lg: 24px; /* ---- lines and lift ---------------------------------------------------- */ --hair: 1px solid var(--n-200); --hair-strong: 1px solid var(--n-300); --lift-1: 0 1px 2px rgba(0,0,0,.05), 0 1px 1px rgba(0,0,0,.04); --lift-2: 0 2px 4px rgba(0,0,0,.05), 0 6px 14px rgba(0,0,0,.06); --lift-3: 0 4px 8px rgba(0,0,0,.05), 0 16px 34px rgba(0,0,0,.09); --lift-4: 0 8px 16px rgba(0,0,0,.06), 0 32px 64px rgba(0,0,0,.12); /* ---- night greys (Round 60 cleanup) ---------------------------------- The grey ramp the black grounds use: the display gradient's stops, the secondary copy on a raised dark surface, and the raised surface itself. */ --hl-1: #E5E5EA; --hl-2: #8E8E93; --nt-ink-2: #C7C7CC; --nt-surface: #1D1D1F; --nt-surface-2: #0D0D0F; --nt-line: #2A2A2C; --nt-ink-3: #A1A1A6; --nt-hair: rgba(255,255,255,.08); --nt-hair-2: rgba(255,255,255,.14); --nt-on-photo: rgba(255,255,255,.88); /* captions over a darkened photo */ --nt-lift-1: inset 0 1px 0 rgba(255,255,255,.04), 0 14px 34px rgba(0,0,0,.42); --nt-lift-2: inset 0 1px 0 rgba(255,255,255,.06), 0 18px 40px rgba(0,0,0,.5); /* the warm dark highlights card, from the reference palette */ --masala: #403D39; --masala-ink: #F6F1E6; --ring: 0 0 0 3px rgba(255,107,61,.38); /* ---- gradient text ---------------------------------------------------- The one gradient the big tile values are set in, on both grounds. It is the brand orange family and nothing else -- the same ramp the vermilion plus button is filled from, so a number and a control read as one system. Used with background-clip: text. Never purple. */ --grad-text: linear-gradient(135deg, #FF5A1F 0%, #FF8A5B 55%, #FFB088 100%); /* ---- motion ------------------------------------------------------------ Two curves only. `snap` for anything the user pressed — it should feel like a key bottoming out. `glide` for anything that moves on its own. */ --snap: cubic-bezier(.2, .9, .28, 1); --glide: cubic-bezier(.22, .61, .36, 1); --d-1: 120ms; --d-2: 200ms; --d-3: 340ms; --d-4: 620ms; /* ---- surfaces (light is the default, everywhere) ----------------------- */ --ground: var(--bone); --surface: var(--n-0); --surface-2: var(--n-50); --surface-sunk:var(--n-100); --ink: var(--n-900); --ink-2: var(--n-600); --ink-3: var(--n-500); --line: var(--n-200); --line-soft: var(--n-100); --accent: var(--o-500); --accent-text: var(--o-800); --on-accent: var(--n-900); /* ink on orange is 6.34:1 — white is 2.83 */ } /* ---- Product-UI mocks (css/product-ui.css) ------------------------------ Every colour a mock uses is named here so the rule above -- nothing invents a colour -- holds for the mocks too. Ratios are against the surface each one sits on; all text clears 4.5:1 (2026-09-23). */ :root { --ui-sunk: #F0EDE8; /* inset panels */ --ui-line: #E4E0DA; /* hairlines */ --ui-ink-2: #5C5A57; /* 6.87 on white */ --ui-ink-3: #6E6D6B; /* = --n-500; 5.17 on white. Was #8C8985 (3.48). */ --ui-on-acc: #201812; /* text on the orange tile, 6.18 on --ui-acc */ --ui-on-acc-2: #2E2117; /* its secondary, 5.51 */ --ui-ink-tile-1: #E6E3DF; /* text on the black tile: 16.4 */ --ui-ink-tile-2: #C9C6C2; /* 12.3 */ --ui-ink-tile-3: #A8A5A1; /* 8.6 */ --ui-warn-line: #F0DCA8; --ui-go-line: #BCE0D0; --ui-ph: #E9E2D8; /* photo placeholder */ --ui-on-teal: #EAF6F3; --ui-on-indigo: #ECEEFB; --ui-on-gold: #FFF8E8; --ui-on-violet: #F6EDFC; } @media (max-width: 700px) { :root { --sec-y: clamp(52px, 11vw, 68px); --bento-top: 40px; } } /* ---- inverted sections ----------------------------------------------------- Not a theme toggle: a band of the page that is printed on black. Anything inside it inherits these without knowing it moved. */ .on-dark { --ground: var(--n-900); --surface: var(--n-800); --surface-2: #1E1E1E; --surface-sunk:var(--n-950); --ink: var(--bone); --ink-2: #A1A1A6; /* Apple's secondary-on-black value, 7.5:1 on #000 */ --ink-3: #6E6E73; /* LARGE OR MONO TEXT ONLY: 4.14:1 on black, 3.06 on the band -- small captions on a dark ground use --ink-2 (8.16 / 6.03) */ --line: #313131; --line-soft: #262626; --accent: var(--o-500); --accent-text: var(--o-400); /* 8.1:1 on #000000 */ --on-accent: var(--n-900); --hair: 1px solid #313131; --lift-2: 0 2px 4px rgba(0,0,0,.4), 0 8px 20px rgba(0,0,0,.45); --lift-3: 0 6px 14px rgba(0,0,0,.45), 0 22px 48px rgba(0,0,0,.55); --lift-4: 0 10px 22px rgba(0,0,0,.5), 0 40px 80px rgba(0,0,0,.6); color: var(--ink); background: var(--ground); } /* ---- the orange band ------------------------------------------------------- The hero, printed on the Astig ground: a warm bloom behind the machine falling off to a deep ember at the edges. Copy sits on the darker side, where bone clears 5.1:1 — the bright stop is only ever behind the machine. */ .on-orange { /* The band used to run down to V48 and read heavy. It now stays in the V91–100 range the reference palettes live in, and carries CHARCOAL type rather than bone — which is how Tangerine Tango, Vivid Vermillion and Apocalyptic Orange are all paired. Ink clears 4.96:1 on the darkest stop. */ --hero-bloom: #FF8154; --hero-mid: #FA6A34; --hero-edge: #F05B28; --ground: var(--hero-mid); --surface: rgba(255,255,255,.30); --surface-2: rgba(255,255,255,.42); --surface-sunk:rgba(0,0,0,.07); --ink: #201812; /* 5.19 on the darkest stop copy ever sits on */ --ink-2: #2E2117; /* 4.63 — the last step that still clears AA */ --ink-3: #2E2117; /* no third step exists on this ground */ --line: rgba(32,24,18,.22); --line-soft: rgba(32,24,18,.12); --accent: #201812; --accent-text: #201812; --on-accent: #FFF7F0; --hair: 1px solid rgba(32,24,18,.22); color: var(--ink); background: radial-gradient(78% 62% at 68% 22%, var(--hero-bloom) 0%, transparent 62%), linear-gradient(168deg, var(--hero-mid) 0%, var(--hero-edge) 100%); } /* ---- the paper band was removed 2026-09 -------------------------------- Every section ground is now exactly two colours: --bone (eggshell) or .on-dark's charcoal. The Picco illustrations sit on --bone like every other section; there is no third tint left to match them to. */