/* ========================================================================== Free to Build — Design Tokens Source of truth: design/free-to-build/ (Claude design export). Ink is PRIMARY, not a mode. Brass is precious — ~one brass element per viewport. Body 19px minimum, nothing below 14px, no weight below 400. The reader is 45-60, on a phone, in bad light. Legibility beats elegance. ========================================================================== */ :root { /* --- Locked brand palette --- */ --ink: #1B1A17; --brass: #A8813B; --brass-light: #C9A45F; --brass-deep: #8A6A30; --paper: #F6F3EC; /* --- Ink surface ramp (primary) — separated by lightness --- */ --ink-sunken: #131210; --ink-base: #1B1A17; --ink-raised: #24221E; --ink-overlay: #2E2B25; /* --- Paper surface ramp (secondary light) --- */ --paper-sunken: #ECE7DB; --paper-base: #F6F3EC; --paper-raised: #FBF9F3; --paper-panel: #EFEADF; /* --- Legacy names mapped onto the new system --- The theme's CSS + section templates reference these throughout, so they stay as the public API. Only the VALUES changed (FlowCraft -> Free to Build). */ --color-accent: var(--brass); --color-accent-dark: var(--brass-deep); --color-bg: var(--ink-base); --color-surface: var(--ink-raised); --color-surface-dark: var(--ink-overlay); --color-text: #F6F3EC; /* primary — 15.8:1 AAA */ --color-body: #C7C3B8; /* secondary — 10.0:1 AAA */ --color-muted: #37342E; /* borders, dividers */ --color-muted-text: #9C968A; /* captions — 6.0:1 AA */ --color-white: #FFFFFF; --color-star: var(--brass-light); --color-black: #000000; --color-footer-bg: var(--ink-sunken); /* --- Borders --- */ --border-hairline: #2A2823; --border-default: #37342E; --border-strong: #4B463E; /* --- Brass usage aliases — brass reads brighter on dark --- */ --brass-on-ink: var(--brass-light); --brass-on-paper: var(--brass); --brass-hover: var(--brass-light); --brass-pressed: var(--brass-deep); --focus-ring: var(--brass-light); /* --- Semantic states — muted so they live inside the palette --- */ --success: #5E7346; --success-on-ink: #9DB47E; --error: #9E3B2E; --error-on-ink: #D68B7E; --warning: #9A7A2E; --warning-on-ink: #D6B463; --info: #4E6472; --info-on-ink: #96AEBC; /* --- Semantic surface tints — the quiet backgrounds behind Alerts/Badges. Straight from the Claude Design export (tokens/colors.css). --- */ --success-surface-ink: #212a1c; --success-surface-paper: #E9ECDD; --error-surface-ink: #2b1c19; --error-surface-paper: #F1E1DC; --warning-surface-ink: #2a2417; --warning-surface-paper: #EFE7D2; --info-surface-ink: #1c242a; --info-surface-paper: #E1E8ED; /* --- Canonical export token names ------------------------------------ The names above (--color-text, --border-default, …) are the LEGACY FlowCraft API that global.css and the SCF sections still reference. These are the names the Claude Design export actually uses, so the design-system.css primitives resolve natively instead of via fallback. Same values, two names — do not let them drift apart. --- */ --white: #FFFFFF; /* Text on Ink */ --ink-text: #F6F3EC; /* 15.8:1 AAA */ --ink-text-secondary: #C7C3B8; /* 10.0:1 AAA */ --ink-text-muted: #9C968A; /* 6.0:1 AA */ /* Text on Paper */ --paper-text: #1B1A17; /* 15.8:1 AAA */ --paper-text-secondary: #4A463F; /* 8.4:1 AAA */ --paper-text-muted: #6B665C; /* 5.2:1 AA */ /* Borders on Ink */ --ink-border-hairline: #2A2823; --ink-border: #37342E; --ink-border-strong: #4B463E; /* Borders on Paper */ --paper-border-hairline: #E6E1D6; --paper-border: #D8D3C8; --paper-border-strong: #C4BDAE; /* Dividers on ink brass fields */ --brass-hairline: #4A3C1E; /* --- Typography --- */ --font-primary: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif; --font-mono: 'Space Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace; /* Type scale — display 60 / h1 44 / h2 34 / h3 26 / h4 21 / body 19. Fluid at the top end so the hero holds on small screens. */ /* 60px is the design system's display size. The hero is the one place that earns more: raised to 76px so the headline lands with the weight the old site had, while everything else stays on the system scale. */ --font-size-display: clamp(42px, 6.4vw, 76px); --font-size-h1: clamp(32px, 5.5vw, 44px); --font-size-h2: clamp(27px, 4vw, 34px); --font-size-h3: clamp(23px, 3vw, 26px); --font-size-h4: 21px; --font-size-h5: 19px; --font-size-h6: 17px; --font-size-body-lg: 21px; --font-size-body: 19px; /* MINIMUM — never go below */ --font-size-small: 16px; --font-size-xs: 14px; /* floor for the whole site */ /* Headings run at 700. The design system caps weight at 600 to stop BODY text getting shouty — at display sizes on Ink that cap leaves the headline looking thin, so headings take the extra step. Body/UI stay 400/500/600. */ --font-weight-heading: 700; --font-weight-body: 400; /* nothing below 400, ever */ --font-weight-medium: 500; --font-weight-bold: 700; --line-height-heading: 1.08; --line-height-body: 1.7; --line-height-tight: 1.14; --letter-spacing-heading: -0.02em; --letter-spacing-tight: -0.02em; --letter-spacing-normal: 0; --letter-spacing-wide: 0.05em; --letter-spacing-wider: 0.16em; /* mono labels */ /* --- Spacing — 4px base --- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; --space-32: 128px; /* --- Section padding — measured and unhurried, 96px rhythm --- */ --section-padding-y: clamp(64px, 8vw, 96px); --section-padding-x: clamp(20px, 5vw, 40px); /* --- Container --- */ --container-max: 1200px; --container-wide: 1440px; --container-narrow: 760px; /* long-form reading measure */ --gutter: 32px; --gutter-mobile: 20px; /* --- Radii — small and machined, never soft --- */ --radius-xs: 3px; --radius-sm: 4px; --radius-md: 6px; --radius-lg: 10px; --radius-xl: 10px; /* capped: nothing softer than 10px in this system */ --radius-full: 999px; /* --- Icon sizes --- */ --icon-sm: 16px; --icon-md: 24px; --icon-lg: 32px; /* --- Minimum tap target --- */ --tap-min: 48px; --nav-font-size: 17px; --btn-font-size: 17px; /* --- Shadows — restrained. On Ink prefer raised surface + hairline. --- */ --shadow-sm: 0 1px 2px rgba(0,0,0,.35); --shadow-md: 0 1px 3px rgba(0,0,0,.35), 0 12px 32px rgba(0,0,0,.45); --shadow-lg: 0 2px 8px rgba(0,0,0,.4), 0 32px 72px rgba(0,0,0,.55); --shadow-xl: 0 2px 8px rgba(0,0,0,.45), 0 40px 90px rgba(0,0,0,.6); --shadow-focus: 0 0 0 3px rgba(201,164,95,.45); /* --- Motion — a plumb bob settles, it does not bounce --- */ --transition-fast: 150ms cubic-bezier(.2,0,0,1); --transition-base: 200ms cubic-bezier(.2,0,0,1); --transition-slow: 250ms cubic-bezier(.2,0,0,1); /* No overshoot anywhere in this system. Kept only so any legacy reference resolves to something sane rather than springing. */ --transition-spring: 250ms cubic-bezier(.2,0,0,1); --ease-settle: cubic-bezier(.2,0,0,1); /* --- Z-index --- */ --z-below: -1; --z-base: 0; --z-raised: 10; --z-overlay: 100; --z-modal: 200; --z-nav: 300; --z-toast: 400; /* --fc-* aliases — design-system.css uses these. Repointed at the new palette so both token systems still share one source of truth. */ --fc-base: var(--ink-base); --fc-base-2: var(--ink-raised); --fc-base-3: var(--ink-overlay); --fc-base-4: var(--ink-overlay); --fc-primary: var(--brass); --fc-primary-dark: var(--brass-deep); --fc-primary-light: var(--brass-light); --fc-primary-dim: rgba(168, 129, 59, .12); --fc-secondary: var(--color-muted-text); --fc-neutral: var(--border-default); --fc-neutral-light: var(--color-muted-text); --fc-white: var(--color-white); --fc-text: var(--color-text); --fc-text-muted: var(--color-body); --fc-text-faint: var(--color-muted-text); --fc-font-sans: var(--font-primary); --fc-font-mono: var(--font-mono); } /* ========================================================================== Paper surface — long-form / interior pages. Secondary surface, NOT a light "mode". Apply .is-light-page to . Note: brass goes to full --brass here (it reads washed on light), and NEVER appears on pure white — this surface is warm Paper, not #FFF. ========================================================================== */ .is-light-page { --color-bg: var(--paper-base); --color-surface: var(--paper-raised); --color-surface-dark: var(--paper-panel); --color-text: #1B1A17; /* 15.8:1 AAA */ --color-body: #4A463F; /* 8.4:1 AAA */ --color-muted: #D8D3C8; --color-muted-text: #6B665C; /* 5.2:1 AA */ --color-accent: var(--brass); --border-hairline: #E6E1D6; --border-default: #D8D3C8; --border-strong: #C4BDAE; --shadow-sm: 0 1px 2px rgba(27,26,23,.06); --shadow-md: 0 1px 3px rgba(27,26,23,.08), 0 8px 24px rgba(27,26,23,.08); --shadow-lg: 0 2px 6px rgba(27,26,23,.10), 0 24px 60px rgba(27,26,23,.12); /* Flip the design-system primitives to Paper too, so a light page gets correct buttons/cards/fields without tagging each one .ftb-on-paper. Mirrors the .ftb-on-paper block in design-system.css. */ --ftb-fg: var(--paper-text); --ftb-fg-secondary: var(--paper-text-secondary); --ftb-fg-muted: var(--paper-text-muted); --ftb-surface-base: var(--paper-base); --ftb-surface-sunken: var(--paper-sunken); --ftb-surface-raised: var(--paper-raised); --ftb-surface-overlay:var(--paper-panel); --ftb-bd-hairline: var(--paper-border-hairline); --ftb-bd: var(--paper-border); --ftb-bd-strong: var(--paper-border-strong); --ftb-brass-fg: var(--brass); --ftb-field-bg: var(--white); } /* Breakpoints (reference — use in media queries): Desktop: 1200px Tablet: 810px Mobile: <810px */