/* ========================================================================== DRYSHOD — TOKENS Single source of truth. Never override a token in a page file. ========================================================================== */ :root { /* --- Color: core ------------------------------------------------------- Two surfaces only: light (paper) and dark (ink). Orange is an ACTION and an ACCENT RULE. It is never a background for body copy. */ --ds-ink: #1b1d1f; /* primary text on light; dark surface bg */ --ds-ink-2: #3c4044; /* secondary text on light */ --ds-ink-3: #55595d; /* body copy, long-form */ --ds-ink-4: #62676c; /* labels, de-emphasized UI — 5.1:1 on paper */ --ds-ink-5: #6f7377; /* faint meta, tile category — 4.8:1 on white */ --ds-paper: #f2f1ee; /* page background */ --ds-paper-raised: #ffffff; /* cards, tiles, product stage */ --ds-paper-sunk: #e8e6e1; /* inset wells, skeletons */ --ds-rule: #d5d2cb; /* hairline on light */ --ds-rule-strong: #1b1d1f; /* structural rule on light (2–3px) */ --ds-orange: #e2551f; /* RULES, BORDERS, ACTIVE INDICATORS — never text or a text bg */ --ds-orange-action: #b8430f; /* filled buttons + orange TEXT on light — 5.5:1 on white, 4.8:1 on paper */ --ds-orange-on-dark: #ef6a33; /* orange TEXT on ink — 5.5:1 (see §2) */ --ds-orange-press: #93350b; /* pressed/hover on --ds-orange-action */ --ds-orange-active: #7a2c08; --ds-orange-tint: #fbeae3; /* orange on paper, backgrounds only */ /* --- Color: dark surface ---------------------------------------------- */ --ds-dark-bg: #1b1d1f; --ds-dark-bg-2: #22262a; /* raised block on dark */ --ds-dark-rule: #34383b; --ds-dark-rule-2: #4a4f53; /* input borders on dark */ --ds-dark-text: #f2f1ee; --ds-dark-text-2: #c8ccd0; --ds-dark-text-3: #9a9ea2; --ds-dark-text-4: #868c91; /* meta on dark — 4.9:1 on ink */ /* --- Color: semantic --------------------------------------------------- */ --ds-ok: #2f6b3f; --ds-ok-tint: #e6f0e8; --ds-warn: #8a5a12; --ds-warn-tint: #fbf1dc; --ds-error: #a32718; --ds-error-tint: #fae9e6; --ds-focus: #1b6fd4; /* focus ring only — never decorative */ /* --- Type families ------------------------------------------------------ Three families. Oswald = display. Barlow Condensed = UI + labels. Barlow = body. No monospace (see DESIGN-SYSTEM.md §3). */ --ds-font-display: Oswald, "Arial Narrow", sans-serif; --ds-font-ui: "Barlow Condensed", "Arial Narrow", sans-serif; --ds-font-body: Barlow, system-ui, -apple-system, sans-serif; /* --- Type scale (desktop) --------------------------------------------- Display sizes are Oswald 600/700, uppercase, tight leading. */ /* Fluid so the authored line breaks hold at every viewport width. Ported from 5.4cqi (THEME-PHASE1 §5): the theme has no query container, so this is vw. Floor 40 = the mobile size. */ --ds-t-display-1: clamp(40px, 5.4vw, 72px); --ds-lh-display-1: 0.94; --ds-t-display-2: 56px; --ds-lh-display-2: 0.98; --ds-t-h1: 44px; --ds-lh-h1: 1.02; --ds-t-h2: 34px; --ds-lh-h2: 1.06; --ds-t-h3: 26px; --ds-lh-h3: 1.12; --ds-t-h4: 20px; --ds-lh-h4: 1.2; --ds-t-body-lg: 19px; --ds-lh-body-lg: 1.55; --ds-t-body: 16.5px; --ds-lh-body: 1.62; --ds-t-body-sm: 15px; --ds-lh-body-sm: 1.55; --ds-t-meta: 13.5px; --ds-lh-meta: 1.4; --ds-t-label: 16px; /* Barlow Condensed, uppercase, +0.10em */ --ds-t-label-sm: 13px; /* eyebrow, uppercase, +0.20em */ --ds-t-label-xs: 11px; /* micro label, uppercase, +0.22em */ --ds-track-label: 0.10em; --ds-track-eyebrow: 0.20em; --ds-track-micro: 0.22em; /* --- Spacing: 4px base -------------------------------------------------- */ --ds-s-1: 4px; --ds-s-2: 8px; --ds-s-3: 12px; --ds-s-4: 16px; --ds-s-5: 20px; --ds-s-6: 24px; --ds-s-8: 32px; --ds-s-10: 40px; --ds-s-12: 48px; --ds-s-14: 56px; --ds-s-16: 64px; --ds-s-20: 80px; --ds-s-24: 96px; --ds-s-30: 120px; --ds-section-y: var(--ds-s-20); /* vertical rhythm between sections */ --ds-section-y-lg: var(--ds-s-24); /* --- Layout ------------------------------------------------------------- */ --ds-max: 1440px; /* content max width */ --ds-max-prose: 760px; /* long-form measure */ --ds-gutter: 24px; --ds-pad-x: 40px; /* page padding, desktop */ --ds-pad-x-sm: 20px; /* page padding, mobile */ /* --- Borders + radius --------------------------------------------------- Direction A is a hard-edged system. Radius is 0 with two exceptions: the cart count pill and the focus ring. */ --ds-radius: 0; --ds-radius-pill: 999px; --ds-border: 1px; --ds-border-strong: 2px; --ds-border-struct: 3px; /* --- Elevation ---------------------------------------------------------- Almost none. Rules do the work. Shadow only for layers that float. */ --ds-shadow-menu: 0 18px 40px rgba(0,0,0,0.18); --ds-shadow-modal: 0 24px 70px rgba(0,0,0,0.34); /* --- Motion -------------------------------------------------------------- */ --ds-dur-fast: 120ms; --ds-dur: 180ms; --ds-dur-slow: 320ms; --ds-ease: cubic-bezier(0.2, 0, 0.2, 1); /* --- Controls ------------------------------------------------------------ */ --ds-control-h: 48px; /* buttons, inputs — desktop */ --ds-control-h-sm: 40px; --ds-tap-min: 44px; /* never below this on touch */ --ds-focus-ring: 0 0 0 2px var(--ds-paper), 0 0 0 4px var(--ds-focus); --ds-focus-ring-dark:0 0 0 2px var(--ds-dark-bg), 0 0 0 4px #6aa9f0; /* --- Z-index ------------------------------------------------------------- */ --ds-z-mega: 40; --ds-z-header: 50; --ds-z-drawer: 60; --ds-z-modal: 70; } /* Mobile type scale — applied by container query in components.css. Values live here so the scale stays in one file. */ :root { --ds-t-display-1-sm: 40px; --ds-t-display-2-sm: 34px; --ds-t-h1-sm: 30px; --ds-t-h2-sm: 25px; --ds-t-h3-sm: 21px; --ds-t-body-lg-sm: 17px; }