/* ============================================================================= Digital Art Factory — DESIGN TOKENS (assets/css/tokens.css) "Facet" design system for farmer.diamonds. Load FIRST in . This file defines: - @font-face for the two optionally self-hosted families (with a full system-font fallback baked into the --font-* tokens, so the site renders correctly with zero downloaded fonts — no CDN, ever); - 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). ============================================================================= */ /* ── Optionally self-hosted faces (no runtime CDN). If the WOFF2 files are absent the declared family simply falls through to the system stack in --font-ui / --font-num, so the page still looks correct. ─────────────────── */ @font-face { font-family: "Facet Sans"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fonts/facet-sans.woff2") format("woff2"); } @font-face { font-family: "Facet Mono"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("../fonts/facet-mono.woff2") format("woff2"); } :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 */ /* ── 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 */ --c-overlay: rgba(5, 8, 12, .72); /* ── 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) */ --c-text-inverse: #0b0f16; /* ── Semantic state (ALWAYS paired with sign / icon / text, never color-only) ── */ --c-up: #34d399; /* on --c-bg = 10.0:1 */ --c-up-ink: #04150f; --c-up-soft: #0d2a20; --c-down: #f4607a; /* on --c-bg = 6.2:1 */ --c-down-ink: #2a0710; --c-down-soft: #2e1019; --c-warn: #f4b740; /* on --c-bg = 10.7:1 */ --c-warn-ink: #241803; --c-warn-soft: #2c2206; --c-info: #5fb3ff; --c-info-soft: #0c2438; /* info on info-soft = 7.1:1 */ --c-ok: var(--c-up); --c-bad: var(--c-down); /* ── 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-xs: 4px; --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-pill: 999px; /* ── Spacing scale (4px base) ── */ --s-0: 0; --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; /* ── Layout ── */ --maxw: 1200px; --maxw-narrow: 720px; --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 ── */ --t-display: clamp(2.1rem, 1.4rem + 2.6vw, 3.2rem); --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; --lh-tight: 1.2; --lh-body: 1.55; --fw-reg: 400; --fw-med: 500; --fw-semi: 600; --fw-bold: 700; --ls-caps: 0.04em; /* ── Motion ── */ --dur-fast: 90ms; --dur: 160ms; --dur-slow: 280ms; --ease: cubic-bezier(.2, .6, .2, 1); /* ── Z-index ── */ --z-header: 100; --z-popover: 200; --z-toast: 300; --z-modal: 400; } /* ── 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-overlay:rgba(18, 26, 38, .4); --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-text-inverse:#ffffff; --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-up:#0a7048; --c-up-soft:#dff3ea; --c-up-ink:#ffffff; /* 5.7:1 / 5.3:1 */ --c-down:#c8324b; --c-down-soft:#fbe2e6; --c-down-ink:#ffffff; /* 4.9:1 */ --c-warn:#855c00; --c-warn-soft:#f6ecd2; --c-warn-ink:#ffffff; /* 5.6:1 / 5.1:1 */ --c-info:#1366c7; --c-info-soft:#dceafa; /* 4.6:1 on soft */ --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-overlay:rgba(18, 26, 38, .4); --c-border:#d3dce7; --c-border-strong:#b2c0d0; --c-divider:#e7ecf3; --c-text:#101623; --c-text-2:#3c4a5c; --c-text-3:#5a6b80; --c-text-inverse:#ffffff; --c-accent:#2456c4; --c-accent-hover:#1d4aae; --c-accent-press:#16409a; --c-accent-ink:#ffffff; --c-accent-soft:#dfe8fb; --c-up:#0a7048; --c-up-soft:#dff3ea; --c-up-ink:#ffffff; --c-down:#c8324b; --c-down-soft:#fbe2e6; --c-down-ink:#ffffff; --c-warn:#855c00; --c-warn-soft:#f6ecd2; --c-warn-ink:#ffffff; --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 is intentionally near-empty — it only exists so component authors have a single, predictable place for any future physical RTL override (e.g. a decorative skew that cannot be expressed logically). Numbers stay LTR via .num. ─────── */ [dir="rtl"] { --rtl: 1; } /* ── 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; } }