/* ========================================================================== Astrocaffe — design tokens Generated from Stage 1 extraction + consolidation, decided 2026-08-03. Source of measured facts: docs/02-design-system.md Source pack: docs/_design-pack/css/style.css Do not add a literal colour, font-size, spacing value, radius or shadow anywhere else in this project without checking this file first. ========================================================================== */ /* Source Sans 3, the body face, SELF-HOSTED since 2026-10-20 (was Google Fonts). Loading it from Google sends every visitor's address there before they have agreed to anything, the same reason Klaro is self-hosted. One variable file per style and alphabet covers every weight from 200 to 900, so the old wght@100;200;400;500;600;700 list is gone (100 never existed in this font). latin-ext carries č, š, ž; the browser fetches it only for a page that has one. Files from @fontsource-variable/source-sans-3 5.2.8, OFL licence in fonts/source-sans-3-LICENSE. */ @font-face { font-family: "Source Sans 3"; src: url("fonts/source-sans-3-latin-ext-wght-normal.woff2") format("woff2"); font-weight: 200 900; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Source Sans 3"; src: url("fonts/source-sans-3-latin-wght-normal.woff2") format("woff2"); font-weight: 200 900; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Source Sans 3"; src: url("fonts/source-sans-3-latin-ext-wght-italic.woff2") format("woff2"); font-weight: 200 900; font-style: italic; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Source Sans 3"; src: url("fonts/source-sans-3-latin-wght-italic.woff2") format("woff2"); font-weight: 200 900; font-style: italic; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "PlutoLight"; src: url("fonts/plutocondextralightwebfont.woff") format("woff"), url("fonts/plutocondextralightwebfont.ttf") format("truetype"); font-weight: 200; font-style: normal; font-display: swap; } @font-face { font-family: "Pluto"; src: url("fonts/plutoheavywebfont.woff") format("woff"), url("fonts/plutoheavywebfont.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; } :root { /* ---- Colour — brand ---- */ --c-orange: #ffa257; --c-orange-50: rgba(255, 162, 87, .5); --c-orange-200: #FF923B; --c-orange-400: #FF811B; --c-orange-red: #ef5f3a; --c-orange-gradient-200: linear-gradient(to top, var(--c-orange) 0%, var(--c-orange-200) 100%); --c-orange-gradient-400: linear-gradient(to top, var(--c-orange) 0%, var(--c-orange-400) 100%); --border-orange-5: 5px solid var(--c-orange); --border-orange-7: 7px solid var(--c-orange); /* ---- Colour — feedback ---- Added 2026-08-03. The pack had no error colour token at all — form validation borrowed --c-orange-red, which also styles the primary CTA, so "buy this" and "this field is wrong" were the same colour. */ --c-red: #F60C4C; /* ---- Colour — text & neutrals ---- */ --c-text: #34495e; --c-text-soft: rgba(52, 73, 94, .7); --c-border: rgba(52, 73, 94, .5); --c-grey-text: #424242; --c-black-25: rgba(0, 0, 0, .25); --c-header: rgba(28, 51, 73, .7); --c-green: #14a085; /* ---- Colour — white / cream ---- */ --c-white: #fff; --c-white-75: hsla(0, 0%, 100%, .75); --c-white-85: rgba(255, 255, 255, 0.85); /* Quieter than the nav links, for a line that is information rather than a destination — the signed-in address at the top of the account menu. Measured on both grounds it lands on: 6.16:1 over --c-blue-950 where the menu floats, 5.65:1 over --c-blue-900 where it sits inside the drawer. Added 2026-09-12. */ --c-white-55: hsla(0, 0%, 100%, .55); /* A divider on a dark ground: the rules between the summary rows on the cart and checkout pages. The footer typed this value by hand twice (.footer-nav, .payment-methods li) before it had a name. Added 2026-09-21. */ --c-white-25: hsla(0, 0%, 100%, .25); --c-white-soft: #FEFDFB; --c-cream: #e6e4d7; --c-tan: #c7c5b9; --c-form-input: #fff3d0; --c-cream-soft: hsla(49, 25%, 87%, .7); --c-cream-light: hsla(49, 25%, 87%, .4); /* Added 2026-08-06 with the product-page rebuild, following the existing --c-blue-gradient-900-rev precedent. The reorder put two light sections next to each other (#marsa above #book-reviews); without a cream-first gradient the seam between them steps from cream straight back to white. This one runs cream -> white so the pair reads as one continuous ground. */ --c-white-gradient-cream: linear-gradient(to top, var(--c-cream) 0%, var(--c-white-soft) 100%); --c-white-gradient-cream-rev: linear-gradient(to bottom, var(--c-cream) 0%, var(--c-white-soft) 100%); --c-gradient-cream: linear-gradient(to top, var(--c-tan) 0%, var(--c-cream) 100%); --c-form-gradient: linear-gradient(to top, #F0EFE4 0%, #F5F4EF 100%); /* ---- Colour — blue palette ---- */ /* --c-blue-star RESTORED 2026-08-04, reversing the 2026-08-03 merge into --c-blue-950. The two are close but not the same, and this one is the backdrop the magic-hands starfield photo sits on — it has to match the image, so it is a distinct colour with a job rather than a near- duplicate to be tidied away. */ /* The aspect types, for the chart sheet (2026-10-01). The live site's six colours (style.css .aspect1c–6c), taken darker so they read on the light chart overlay: conjunction, sextile, square, trine, inconjunct, opposition. And the PDF's table line, #d9d9d9. */ --c-aspect-conjunction: #34495e; --c-aspect-sextile: #3d68a8; --c-aspect-square: #b04a3c; --c-aspect-trine: #a8860b; --c-aspect-inconjunct: #3f8a3d; --c-aspect-opposition: #8e3f86; --c-line-light: #d9d9d9; --c-blue-star: #111b24; --c-blue-950: #061522; --c-blue-950-80: rgba(6, 21, 34, .8); --c-blue-900: #09243a; --c-blue-850: #0c304c; --c-blue-800: #10415f; --c-blue-700: #185978; --c-blue-500: #2f7fa1; --c-blue-gradient-950: linear-gradient(to top, var(--c-blue-900) 0%, var(--c-blue-950) 100%); --c-blue-gradient-950-rev: linear-gradient(to bottom, var(--c-blue-900) 0%, var(--c-blue-950) 100%); --c-blue-gradient-900: linear-gradient(to top, var(--c-blue-850) 0%, var(--c-blue-900) 100%); --c-blue-gradient-900-rev: linear-gradient(to top, var(--c-blue-900) 0%, var(--c-blue-850) 100%); --c-blue-gradient-800: linear-gradient(to top, var(--c-blue-800) 0%, var(--c-blue-850) 100%); --c-blue-gradient-800-rad: radial-gradient(circle at center, var(--c-blue-800) 50%, var(--c-blue-850) 100%); --c-blue-gradient-700: linear-gradient(to top, var(--c-blue-800) 0%, var(--c-blue-700) 100%); --c-blue-gradient-700-rad: radial-gradient(circle at center, var(--c-blue-700) 50%, var(--c-blue-800) 100%); --border-blue-5: 5px solid var(--c-blue-500); --border-blue-7: 7px solid var(--c-blue-850); /* ---- Colour — overlays (new, 2026-08-03) ---- Collapsed from 13 hand-typed black-alpha stops in the source pack down to the 3 shadow tokens below plus these 2. See docs/02-design-system.md "Consolidation — decided" for the full before/after mapping. */ --overlay-scrim: rgba(0, 0, 0, .6); /* ---- Type ---- */ --font-heading: "PlutoLight", Georgia, serif; --font-heading-fat: "Pluto", Georgia, serif; --font-body: "Source Sans 3", system-ui, sans-serif; /* Font-size scale — replaces 37 hand-typed px/rem/em values. */ --fs-xs: 0.75rem; --fs-sm: 0.875rem; --fs-base: 1rem; --fs-md: 1.125rem; --fs-lg: 1.25rem; --fs-xl: 1.5rem; --fs-2xl: 1.75rem; --fs-3xl: 2rem; --fs-4xl: 2.5rem; --fs-4xxl: 3rem; --fs-5xl: 3.5rem; /* Line-height scale — replaces 21 hand-typed px/%/unitless values. */ --lh-tiny: 1.1; --lh-tight: 1.25; --lh-snug: 1.3; --lh-relaxed: 1.45; --lh-loose: 1.5; /* Font-weight scale — replaces 8 values (300 -> 200, 800 -> 700). */ --fw-thin: 100; --fw-light: 200; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* ---- Spacing ---- Replaces 72 hand-typed atomic margin/padding/gap values. Exemptions per 2026-08-03 decision: values > 100px stay px, vw/vh/% values stay in their native unit — not part of this rem scale. */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-6: 1.5rem; --space-8: 2rem; --space-12: 3rem; --space-14: 3.5rem; --space-16: 4rem; --space-18: 4.5rem; --space-20: 5rem; /* ---- Layout ---- */ --container-w: 940px; --max-form-width: 548px; /* ---- Radius ---- Replaces 17 hand-typed values. 50% (circles) and 0 (explicit resets) are not part of this scale — see docs/02-design-system.md. */ --radius-sm: 4px; --radius: 7px; --radius-lg: 12px; --radius-pill: 100px; /* ---- Shadow ---- --shadow-soft / --shadow-raised / --shadow-text existed already. --shadow-tight is new, 2026-08-03, absorbing the .25/.35 box-shadow one-offs that had drifted from the other three. */ --shadow-soft: 0 18px 55px rgb(0 0 0 / 0.20); --shadow-tight: 0 0 12px 0 rgba(0, 0, 0, .3); --shadow-raised: 0 32px 90px rgb(0 0 0 / 0.34); --shadow-text: 1px 1px 1px rgb(0 0 0 / 0.75); /* ---- Transition ---- */ --transition: .25s ease; /* For controls the reader presses and expects an answer from at once — toggles, chips, the size bars. Added 2026-10-01: at .25s the celebrity tools felt "stuck" (Zlatan). */ --transition-fast: .12s ease; } /* ========================================================================== Breakpoints — NOT custom properties. Plain CSS custom properties cannot be read inside an `@media` condition in any current browser without a build step (`@custom-media` needs PostCSS, which this project does not use — see docs/02-design-system.md, "Where code lives"). These numbers are documented here as the single source of truth; every `@media` rule in the project's CSS must hand-type one of them, written with a space after the colon: `(max-width: 767px)`. Canonical tiers (3): 600px — small (2 rules: the floating bar, the confirm product line) 768px — tablet (down: max-width: 767px / up: min-width: 768px) 900px — large (the nav drawer, and every hero rule) Kept as their own special cases, not folded into the tiers above — each backs one component, not a layout tier. RE-COUNTED 2026-09-13 against the CSS, because the list here had gone stale: 540px — product cards go two-up 868px — the quote card's indent 1052px — carousel arrows move outside the container. DERIVED, not chosen: 940px container + 2 x 56px of clear space. 1200px — the celebrity wall goes to six columns (celeb-wall.css, Zlatan's count, 2026-09-30). The wall also uses 540 and 768. 425px and 700px were on this list and are no longer used by any media query (1200px was too, until the wall, above). 1052px was in use and was not on the list. BOTH BOUNDARIES ARE NOW WRITTEN THE SAME WAY: down is one pixel below up, 767 / 768 and 899 / 900. Never `max-width: 900px` against `min-width: 900px` — both match at exactly 900, and until 2026-09-13 they did: a viewport of exactly 900px opened the mobile nav drawer over a desktop-laid-out hero. Measured at the time, 899 was fully mobile, 901 fully desktop, and 900 was a mix of the two. ========================================================================== */