/* ============================================================================= Digital Art Factory — DESIGN TOKENS (assets/css/tokens.css) "Facet" design system for farmer.diamonds. Load FIRST in . This file defines: - system-only typography (NO @font-face, no downloaded fonts, no CDN — the --font-* tokens lead with a brand name that falls through to the native system stack, so there is never a font request or 404); - all custom properties on :root (dark = default); - the light-theme override block (explicit toggle + OS-preference fallback); - a [dir="rtl"] block (logical properties carry most RTL work; this block holds the few physical fixes); - a prefers-reduced-motion guard for the motion tokens. Components reference ONLY these variables — never raw hex / magic numbers. All contrast pairs are verified >= WCAG 2.1 AA (ratios noted inline). ============================================================================= */ /* ── Fonts: SYSTEM ONLY — no downloaded web fonts, no @font-face, no CDN. The --font-ui / --font-num tokens below lead with an (uninstalled) brand family name purely as a hook: with no @font-face it never triggers a fetch, so it silently falls through to the native system stack. This keeps the page warning-free (zero font requests / no 404s) and dependency-free by design. ── */ :root { /* ── Brand / accent (diamond blue) ── */ --c-accent: #8ab4ff; /* on --c-bg = 9.2:1 AAA */ --c-accent-hover: #a6c6ff; --c-accent-press: #6d9df2; --c-accent-ink: #071326; /* text ON accent fills = 8.9:1 AAA */ --c-accent-soft: #16233a; /* tinted panel / badge bg on dark */ /* ── Secondary accent (analogous orchid — the "refraction" hue). Used only as a companion to diamond blue in gradients and the hero motif; also verified as text on --c-bg (9.3:1 AAA) so it may safely carry a label if ever wanted. */ --c-accent-2: #c4a5ff; /* on --c-bg = 9.3:1 AAA */ --c-accent-2-soft: #221a38; /* tinted panel / badge bg on dark */ /* ── Signature facet wash (blue → orchid). Decorative only: the .cap__glyph box and the closing CTA band. The full-strength --grad-facet was deleted with its last consumer (the .cap::before accent rail, MOVE 3). ── */ --grad-facet-soft: linear-gradient(115deg, color-mix(in srgb, var(--c-accent) 16%, transparent), color-mix(in srgb, var(--c-accent-2) 16%, transparent)); /* ── Surfaces (dark) ── */ --c-bg: #0b0f16; /* page background */ --c-surface: #131a24; /* cards / panels */ --c-surface-2: #1a2330; /* raised: header, footer, popovers */ --c-surface-3: #232e3e; /* hover fills / input wells */ /* ── Borders / lines ── */ --c-border: #29374a; --c-border-strong: #3b5066; --c-divider: #1c2634; /* ── Text ── */ --c-text: #eef3f9; /* on --c-bg = 17.2:1 AAA */ --c-text-2: #aebccd; /* on --c-bg = 9.9:1 AAA */ --c-text-3: #8295a9; /* on --c-bg = 6.2:1 AA (muted floor) */ /* ── Semantic state (ALWAYS paired with sign / icon / text, never color-only). Each hue is used as TEXT on --c-bg or on its own *-soft fill; there are no filled state chips, so the matching *-ink tokens were never consumed. ───── */ --c-up: #34d399; /* on --c-bg = 10.0:1 */ --c-up-soft: #0d2a20; --c-down: #f4607a; /* on --c-bg = 6.2:1 */ --c-down-soft: #2e1019; --c-warn: #f4b740; /* on --c-bg = 10.7:1 */ --c-warn-soft: #2c2206; --c-info: #5fb3ff; --c-info-soft: #0c2438; /* info on info-soft = 7.1:1 */ /* ── Focus ── */ --c-focus: #9cc2ff; /* on --c-bg = 10.6:1 */ /* ── Elevation / shadow ── */ --shadow-1: 0 1px 2px rgba(0, 0, 0, .4); --shadow-2: 0 4px 14px rgba(0, 0, 0, .45); --shadow-3: 0 12px 40px rgba(0, 0, 0, .55); --shadow-focus: 0 0 0 3px color-mix(in srgb, var(--c-focus) 55%, transparent); /* ── Radius ── */ --r-sm: 6px; --r-md: 10px; --r-lg: 14px; /* --r-pill died with .pill (MOVE 5) */ /* ── Facet cut (the gem geometry, tokenized so no component hardcodes it). --cut is the depth of the clipped corner; --clip-facet is the finished polygon: a 45° cut — the rhombus's own edge slope — taken out of the BLOCK-START / INLINE-END corner, the rest of the box left square. Applying it costs one declaration (clip-path: var(--clip-facet)) and the [dir="rtl"] block below re-cuts the mirrored corner, so direction is free. NOTE: clip-path clips a focus ring — put this on a wrapper or a pseudo, never on the focusable element itself. ────────────────────────────────── */ --cut: 18px; --clip-facet: polygon( 0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%); /* ── Spacing scale (4px base) ── */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; /* ── Fluid vertical rhythm. The type scale has always been fluid while the spacing under it was frozen at one value for every viewport, so a phone got desktop-sized voids. These two clamp between existing steps of the scale above — they add no new magic numbers, they just interpolate the ones that were already there. Rhythm must be SINGLE-SOURCED: adjacent block margins collapse, so if a section sets margin-block-end and its neighbour also sets margin-block-start, the larger silently wins and the token looks broken. --s-section section-to-section 48px phone → 96px desktop (--s-7→--s-9) --s-block group-within-section 24px phone → 48px desktop (--s-5→--s-7) ─────────────────────────────────────────────────────────────────────────── */ --s-section: clamp(var(--s-7), 5vw + 22px, var(--s-9)); --s-block: clamp(var(--s-5), 2.5vw + 15px, var(--s-7)); /* ── Layout ── */ --maxw: 1200px; --maxw-narrow: 720px; --measure: 65ch; /* body copy line length — the readable optimum */ --header-h: 64px; --tap: 44px; /* min interactive target (WCAG 2.5.5) */ /* ── Type families (optional self-hosted face + system fallback; NO CDN) ── */ --font-ui: "Facet Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; --font-num: "Facet Mono", ui-monospace, "SF Mono", "Cascadia Mono", "JetBrains Mono", "Roboto Mono", Consolas, monospace; /* ── Type scale. There is no webfont and there never will be, so ALL of the typographic personality has to be earned here: size, weight, tracking, leading, measure. --t-display used to bottom out at 2.1rem/33.6px, which on a 360px phone — the primary viewport — is a large paragraph, not a display. It now opens at 2.6rem/41.6px and is already off its floor at 360px. ───── */ --t-display: clamp(2.6rem, 1.9rem + 3.4vw, 4rem); /* 42.6px @360 → 64px @988+ */ --t-h1: clamp(1.6rem, 1.3rem + 1.2vw, 2.1rem); --t-h2: clamp(1.35rem, 1.2rem + 0.7vw, 1.65rem); --t-h3: 1.25rem; --t-h4: 1.0625rem; --t-body: 1rem; --t-sm: 0.875rem; --t-xs: 0.75rem; /* Leading tightens as size grows — 1.2 is correct for a heading and far too airy for 64px, where the line gap starts to read as a gutter. */ --lh-display: 1.06; --lh-tight: 1.2; --lh-body: 1.55; /* The weight jump is deliberate and it is the whole voice of the page: system stacks are ordinary at 500/600, so display goes to --fw-bold and body sits at --fw-reg. The distance between them is the contrast a webfont would otherwise buy. Do not close it by setting body copy to --fw-med. */ --fw-reg: 400; --fw-med: 500; --fw-semi: 600; --fw-bold: 700; /* Tracking. System UI faces are spaced for paragraphs, so they go loose and gappy at display sizes; --ls-display pulls them back into one object. It is scoped to LARGE type only — applying negative tracking at --t-body costs legibility and buys nothing. --ls-caps opens uppercase back up. */ --ls-display: -0.02em; --ls-caps: 0.04em; /* The hero payoff line (home.hero.formats) is tracked and spaced at display size so the five format names span the rule the rays land on, and set in --font-num because they are data. BOTH are Latin-only devices: - inter-letter tracking pulls a CURSIVE script apart and breaks its joins — it is not a style choice in Arabic, it is a spelling error; - --font-num is a monospace stack with poor Arabic coverage. Neutralised for the Arabic-script locales below. Tracking uplift lives on :root so the lang override (0,1,1) outranks it (0,1,0) in BOTH ranges; the 900px boundary mirrors .hero__formats' display-size step in base.css. */ --ls-formats: var(--ls-caps); --ws-formats: normal; --font-formats: var(--font-num); /* ── Motion ── */ --dur-fast: 90ms; --dur: 160ms; --dur-slow: 280ms; --ease: cubic-bezier(.2, .6, .2, 1); /* ── Z-index ── */ --z-header: 100; --z-toast: 300; --z-modal: 400; } /* At display size the payoff line earns its tracking (Latin only — see above). */ @media (min-width: 900px) { :root { --ls-formats: 0.14em; --ws-formats: 0.5em; } } /* ar/ur/fa are cursive: inter-LETTER tracking pulls the joins apart, so it goes. --ws-formats deliberately STAYS — word-spacing acts on the spaces between words, never inside them, so it cannot break a join and the line still spans the rule the rays land on. Attribute selectors (0,1,1) beat :root (0,1,0), so this holds at every viewport. Deliberately NOT the [dir="rtl"] block — Hebrew is RTL but non-joining and has no quarrel with tracking. */ html[lang|="ar"], html[lang|="ur"], html[lang|="fa"] { --ls-formats: normal; --font-formats: var(--font-ui); } /* ── Light theme: explicit toggle wins; OS preference is the fallback. ───── */ :root[data-theme="light"] { --c-bg:#f5f7fb; --c-surface:#ffffff; --c-surface-2:#edf1f7; --c-surface-3:#e2e8f2; --c-border:#d3dce7; --c-border-strong:#b2c0d0; --c-divider:#e7ecf3; --c-text:#101623; /* on --c-bg = 16.9:1 AAA */ --c-text-2:#3c4a5c; /* = 8.4:1 AAA */ --c-text-3:#5a6b80; /* = 5.1:1 AA */ --c-accent:#2456c4; --c-accent-hover:#1d4aae; --c-accent-press:#16409a; --c-accent-ink:#ffffff; /* white on this accent = 6.6:1 AA+ */ --c-accent-soft:#dfe8fb; /* accent on soft = 5.3:1 */ --c-accent-2:#6d3fc0; /* orchid on --c-bg = 6.3:1 AA */ --c-accent-2-soft:#ece2fb; --c-up:#0a7048; --c-up-soft:#dff3ea; /* on bg 5.7:1 / on soft 5.3:1 */ --c-down:#c8324b; --c-down-soft:#fbe2e6; /* on bg 4.9:1 */ --c-warn:#855c00; --c-warn-soft:#f6ecd2; /* on bg 5.6:1 / on soft 5.1:1 */ --c-info:#1366c7; --c-info-soft:#dceafa; /* on soft 4.6:1 */ --c-focus:#2456c4; --shadow-1:0 1px 2px rgba(20, 30, 45, .10); --shadow-2:0 4px 14px rgba(20, 30, 45, .12); --shadow-3:0 12px 40px rgba(20, 30, 45, .16); --shadow-focus: 0 0 0 3px color-mix(in srgb, var(--c-focus) 50%, transparent); } /* OS preference fallback — applies the same light values when the user has not explicitly chosen a theme (i.e. the document is neither data-theme="dark" nor data-theme="light"). Values DUPLICATED from the block above by design. */ @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]):not([data-theme="light"]) { --c-bg:#f5f7fb; --c-surface:#ffffff; --c-surface-2:#edf1f7; --c-surface-3:#e2e8f2; --c-border:#d3dce7; --c-border-strong:#b2c0d0; --c-divider:#e7ecf3; --c-text:#101623; --c-text-2:#3c4a5c; --c-text-3:#5a6b80; --c-accent:#2456c4; --c-accent-hover:#1d4aae; --c-accent-press:#16409a; --c-accent-ink:#ffffff; --c-accent-soft:#dfe8fb; --c-accent-2:#6d3fc0; --c-accent-2-soft:#ece2fb; --c-up:#0a7048; --c-up-soft:#dff3ea; --c-down:#c8324b; --c-down-soft:#fbe2e6; --c-warn:#855c00; --c-warn-soft:#f6ecd2; --c-info:#1366c7; --c-info-soft:#dceafa; --c-focus:#2456c4; --shadow-1:0 1px 2px rgba(20, 30, 45, .10); --shadow-2:0 4px 14px rgba(20, 30, 45, .12); --shadow-3:0 12px 40px rgba(20, 30, 45, .16); --shadow-focus: 0 0 0 3px color-mix(in srgb, var(--c-focus) 50%, transparent); } } /* ── RTL physical fixes. Layout uses logical properties everywhere, so this stays near-empty — it exists so component authors have a single, predictable place for any physical RTL override that cannot be expressed logically. Numbers stay LTR via .num. clip-path is exactly that case: its polygon takes physical coordinates and ignores writing direction, so the cut is re-cut here on the mirrored corner. That keeps the facet on the INLINE-END in all 45 locales while components write one direction-agnostic declaration. ──────────────────────────────── */ [dir="rtl"] { --rtl: 1; --clip-facet: polygon( var(--cut) 0, 100% 0, 100% 100%, 0 100%, 0 var(--cut)); } /* ── Reduced-motion: collapse the motion durations to ~0 at the token level so even tokenized transitions become instant. A global *,*::before guard also lives in base.css (second layer). ───────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 0.001ms; --dur: 0.001ms; --dur-slow: 0.001ms; } }