/* * tokens.css — the single source of truth for every design value in am-theme. * * Nothing else in this project (theme CSS, templates, or Elementor) may contain a * literal colour, size, spacing, font, radius, or shadow. Everything references a * var(--am-…) defined here. Change a value here and it changes everywhere. * * ── COLOUR & TYPOGRAPHY: DECIDED ─────────────────────────────────────────────── * Colour is DECIDED (palette v2) and implemented below from the read-only snapshot * docs/color-tokens-brief.md (canonical in am-management, brand-instruction §9.1). * Heritage orange/red is evolved, not replaced: warm orange leads as the signature * accent against a warm-neutral base; orange-red is the action/CTA colour. * Two hard rules baked into the mapping below: * 1. Orange never carries body text on light — --am-color-text is always a neutral. * 2. Brand-red = action; error red (--am-color-negative) is a different, cooler red. * * Typography is DECIDED too (docs/type-tokens-brief.md, brand-instruction §9.2): the * Archivo superfamily, self-hosted as woff2 (never Google Fonts / a CDN). Archivo * Black is the display voice on LARGE headings only; Archivo carries body + UI. The * faces are declared as @font-face at the top of base.css. Because tokens are named * semantically, swapping values stays a single-file edit — no theme-wide find/replace. * * When any value here changes, the matching Elementor Global Colour/Font must be * updated BY HAND to mirror it (CLAUDE.md → "The rule that fixes it"). Flag it. * * Two tiers: * 1. Raw scales — the palette/ramps. Referenced ONLY by the semantic tokens. * 2. Semantic — what the rest of the theme actually uses. Use these. */ :root { /* ============================================================== * * 1. RAW SCALES — palette. Do not reference these outside :root. * * ============================================================== */ /* Neutral ramp — WARM neutral (not pure grey). The warm off-white -50 is the page background; white -0 lets cards pop on it. -800 body, -900 headings/ink. */ --am-neutral-0: #ffffff; /* crisp white — cards pop on the warm bg */ --am-neutral-50: #fdfaf6; /* warm off-white — PAGE BACKGROUND */ --am-neutral-100: #f6ede2; /* warm surface / alternating sections */ --am-neutral-200: #e7d9c9; /* hairlines, borders */ --am-neutral-300: #d6c4b0; --am-neutral-400: #b4a18c; --am-neutral-500: #8c7663; /* muted UI / large-text only — fails AA as body */ --am-neutral-600: #695849; /* secondary body text (AA-safe) */ --am-neutral-700: #4a3d30; --am-neutral-800: #2e2519; /* body text */ --am-neutral-900: #22190f; /* headings / warm ink / dark base */ --am-neutral-950: #160f09; /* Warm orange — the signature accent (evolved #c96104). Fills, large headings, UI, emphasis. -500 is the anchor. Never carries body text on light. */ --am-warm-100: #fbe4cc; --am-warm-300: #f3b172; --am-warm-500: #e06e12; /* ANCHOR — signature warm orange */ --am-warm-600: #c25e0c; --am-warm-700: #9a4a0a; /* Orange-red — action / CTA (evolved #ba3804). -500 is the anchor; -600 is the CTA fill that clears AA with regular-weight white labels; -700 for links/hover. */ --am-punch-100: #fad3c4; --am-punch-300: #f0876a; --am-punch-500: #e23a0c; /* ANCHOR — CTA / energy */ --am-punch-600: #c4300a; /* CTA fill — AA with white body-weight text */ --am-punch-700: #a62808; /* deep red — links on light, hover, logo depth */ /* Amber highlight — pattern glint / hover highlight. */ --am-amber-500: #f09428; /* Feedback — positive is warm-compatible green; negative is a cooler crimson, deliberately DIFFERENT from --am-punch-* so "buy" and "error" never collide. */ --am-positive-500: #3f7a52; --am-negative-500: #c1272d; /* Terminal window controls — fixed skeuomorphic colours (NOT brand tokens; they mimic the macOS traffic lights and never change with the brand). */ --am-dot-red: #ff5f56; --am-dot-yellow: #ffbd2e; --am-dot-green: #27c93f; /* ============================================================== * * 2. SEMANTIC TOKENS — use these everywhere. * * ============================================================== */ /* -- Colour ---------------------------------------------------- */ /* Contrast ratios below are on --am-color-bg (#fdfaf6) unless noted. AA = 4.5:1 body / 3:1 large. Verified at build; re-verify if any raw value changes. */ --am-color-bg: var(--am-neutral-50); /* warm off-white page */ --am-color-surface: var(--am-neutral-0); /* white cards pop on warm bg */ --am-color-surface-alt: var(--am-neutral-100); /* alternating warm sections */ --am-color-surface-soft: var(--am-warm-100); /* soft warm-tinted band (highlight) */ --am-color-text: var(--am-neutral-800); /* body — NEVER a warm token (14.5:1) */ --am-color-text-muted: var(--am-neutral-600); /* secondary body text (6.5:1) — see note */ --am-color-heading: var(--am-neutral-900); /* headings (16.6:1) */ --am-color-border: var(--am-neutral-200); /* hairlines, dividers */ /* Warm orange = emphasis / large-heading accent / UI. Large text & fills only — #e06e12 on bg is ~3.3:1, so never body copy (enforces hard rule 1). */ --am-color-accent: var(--am-warm-500); --am-color-accent-hover: var(--am-warm-600); /* Orange-red = the primary CTA fill. Mapped to punch-600 (not punch-500) so a regular-weight white label clears AA (5.6:1); punch-500 is only 4.3:1 and would need large/bold text. hover deepens to punch-700. */ --am-color-cta: var(--am-punch-600); --am-color-cta-hover: var(--am-punch-700); --am-color-on-accent: #ffffff; /* white text on cta/accent fill */ --am-color-link: var(--am-punch-700); /* deep red links on light (6.9:1) */ /* Inverse surface — dark sections / footer. Orange-dominant per the decision. */ --am-color-bg-inverse: var(--am-neutral-900); /* warm ink base */ --am-color-text-inverse: var(--am-neutral-100); /* warm off-white (14.9:1) */ --am-color-accent-inverse: #f09a3a; /* lifted warm on dark (7.7:1, large) */ --am-color-cta-inverse: #f0592a; /* lifted punch on dark (5.1:1, large) */ --am-color-on-cta-inverse: #1c140b; /* dark ink on lifted-punch fill (5.3:1) */ --am-color-focus: var(--am-warm-500); /* focus ring — signature warm */ --am-color-positive: var(--am-positive-500); --am-color-negative: var(--am-negative-500); /* cooler crimson ≠ CTA red */ /* Code & terminal surfaces (used by am-code / am-terminal). */ --am-color-code-bg: var(--am-neutral-900); /* dark code/terminal body */ --am-color-code-bar: var(--am-neutral-800); /* terminal titlebar */ --am-color-code-text: var(--am-neutral-100); /* light text on dark code */ --am-color-code-muted: var(--am-neutral-400); /* terminal title / dim */ /* -- Typography — DECIDED (Archivo superfamily, self-hosted woff2) ---------- */ /* Faces declared as @font-face at the top of base.css. Archivo Black is the display voice on LARGE headings only (>= --am-font-size-600, per base.css); smaller headings/labels/buttons use Archivo at 700/600; body is Archivo 400. Archivo Black is a single-weight face — never set 700 on it (faux-bold). */ --am-font-sans: 'Archivo', system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --am-font-heading: 'Archivo Black', 'Arial Black', system-ui, sans-serif; --am-font-mono: ui-monospace, "SFMono-Regular", "Menlo", "Consolas", monospace; /* Fluid type scale, 100 → 900. clamp(min, preferred, max) in rem/vw. */ --am-font-size-100: 0.79rem; /* fine print */ --am-font-size-200: 0.889rem; /* small */ --am-font-size-300: 1rem; /* body (base) */ --am-font-size-400: clamp(1.125rem, 1.05rem + 0.35vw, 1.266rem); --am-font-size-500: clamp(1.266rem, 1.14rem + 0.6vw, 1.602rem); --am-font-size-600: clamp(1.424rem, 1.22rem + 1vw, 2.027rem); --am-font-size-700: clamp(1.602rem, 1.28rem + 1.6vw, 2.566rem); --am-font-size-800: clamp(1.802rem, 1.30rem + 2.5vw, 3.247rem); --am-font-size-900: clamp(2.027rem, 1.25rem + 3.9vw, 4.11rem); /* hero */ --am-leading-tight: 1.15; /* headings */ --am-leading-snug: 1.3; --am-leading-normal: 1.6; /* body */ --am-weight-regular: 400; --am-weight-medium: 500; --am-weight-semibold: 600; --am-weight-bold: 700; --am-tracking-tight: -0.01em; --am-tracking-wide: 0.04em; /* -- Spacing scale, 100 → 900 (rem, ~1.5 ratio around a 1rem base) --------- */ --am-space-100: 0.25rem; --am-space-200: 0.5rem; --am-space-300: 0.75rem; --am-space-400: 1rem; --am-space-500: 1.5rem; --am-space-600: 2rem; --am-space-700: 3rem; --am-space-800: 4.5rem; --am-space-900: 7rem; /* section rhythm */ --am-space-1000: 10rem; /* roomy section rhythm */ /* -- Layout ---------------------------------------------------- */ --am-measure: 66ch; /* readable line length */ --am-container-max: 72rem; /* content max-width */ --am-container-pad: var(--am-space-500); /* gutter */ --am-content-narrow: 42rem; /* tight intro / prose column */ --am-content-wide: 46rem; /* hero content column */ --am-media-portrait: 16rem; /* person portrait cap */ /* -- Radius ---------------------------------------------------- */ --am-radius-sm: 4px; --am-radius-md: 8px; --am-radius-lg: 16px; --am-radius-full: 999px; /* -- Shadow (restrained; tinted with the warm ink #22190f = 34,25,15) --------- */ --am-shadow-sm: 0 1px 2px rgba(34, 25, 15, 0.06); --am-shadow-md: 0 4px 12px rgba(34, 25, 15, 0.08); --am-shadow-lg: 0 12px 32px rgba(34, 25, 15, 0.12); /* -- Motion ---------------------------------------------------- */ --am-transition: 160ms ease; --am-transition-slow: 280ms ease; /* -- Focus ring ------------------------------------------------ */ --am-focus-ring: 2px solid var(--am-color-focus); --am-focus-offset: 2px; } /* * Breakpoints (reference — CSS custom properties cannot be used inside media * queries, so these are documented here and hardcoded in @media rules): * --am-bp-sm: 40rem (640px) * --am-bp-md: 48rem (768px) * --am-bp-lg: 64rem (1024px) * --am-bp-xl: 80rem (1280px) * Mobile-first: write the small-screen rule, then min-width media queries up. */