/* ============================================================================ BRAND · ghost-installations — GENERATED, DO NOT EDIT ============================================================================ Compiled from DESIGN-ghost-installations.md by tools/brand.php. Edit the kit and run `php tools/brand.php --compile=ghost-installations`. CI runs `--check`, so an edit made here instead of there fails the build. ============================================================================ */ :root { /* --------------------------------------------------------------------- 1 · PRIMITIVES --------------------------------------------------------------------- */ /* Neutral ramp, biased very slightly cool so it sits under the accent without turning muddy. A flat grey is the giveaway of a palette nobody chose. */ --n-0: #ffffff; --n-25: #fafbfc; --n-50: #f3f5f7; --n-100: #e8ebee; --n-200: #d5dadf; --n-300: #b3bcc4; --n-400: #8b959f; --n-500: #67717b; --n-600: #4c555e; --n-700: #353d45; --n-800: #222930; --n-900: #14181d; --n-950: #0b0e12; /* Accent. Deliberately restrained: it marks and rules, it does not shout. The primary button uses ink, not this — black buttons read as commerce, coloured ones read as a template. */ --a-50: #eef4f6; --a-100: #d3e3e8; --a-300: #7aa8b4; --a-500: #2f6b7c; --a-600: #245565; --a-700: #1a404c; /* Semantic status hues, kept away from the accent so meaning stays clear. */ /* Highlight grounds. Pale enough that ink stays legible on top — the contrast is doing the work, not the saturation. */ /* Channels for the on-inverse ink, so translucent rules and washes on a dark band can be expressed without a second hard-coded colour. Three sections used to write rgba(255,255,255,0.14) inline, which is invisible until a brand's inverse band is not dark and the hairline vanishes. */ --on-inverse-rgb: 255 255 255; --mark-neutral: #fdf3c4; --mark-ok: #e3f1e6; --mark-warn: #fbe6d8; --ok-500: #2f6b4a; --warn-500: #8a6420; --err-500: #a3301f; /* Type. Georgia and the system sans are on effectively every machine and are both properly drawn — a considered pairing beats a webfont the page has to wait for. Self-host the client's real faces with `php tools/assets.php --font=` and swap the stacks here. */ --font-display: Georgia, 'Iowan Old Style', 'Palatino Linotype', 'Book Antiqua', serif; --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-mono: ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, Consolas, monospace; /* Fluid type scale, ~1.2 at 360px opening to ~1.28 at 1200px. Every size on the page comes from here; a section inventing its own px value is how a library drifts out of tune. */ --text-2xs: clamp(0.688rem, 0.67rem + 0.08vw, 0.75rem); --text-xs: clamp(0.75rem, 0.73rem + 0.10vw, 0.813rem); --text-sm: clamp(0.875rem, 0.85rem + 0.12vw, 0.938rem); --text-base: clamp(1rem, 0.97rem + 0.16vw, 1.125rem); --text-lg: clamp(1.125rem, 1.07rem + 0.28vw, 1.313rem); --text-xl: clamp(1.25rem, 1.15rem + 0.48vw, 1.563rem); --text-2xl: clamp(1.5rem, 1.33rem + 0.80vw, 2rem); --text-3xl: clamp(1.813rem, 1.55rem + 1.25vw, 2.625rem); --text-4xl: clamp(2.125rem, 1.72rem + 1.95vw, 3.375rem); --leading-tight: 1.12; --leading-snug: 1.28; --leading-normal: 1.55; --leading-relaxed: 1.68; --tracking-tight: -0.022em; --tracking-snug: -0.012em; --tracking-wide: 0.08em; --tracking-caps: 0.14em; --weight-normal: 400; --weight-medium: 500; --weight-semi: 600; --weight-bold: 700; /* Space scale. One ratio, so vertical rhythm holds across 36 sections. */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 2.5rem; --space-8: 3rem; --space-9: 4rem; --space-10: 5rem; --space-11: 6.5rem; --radius-none: 0; --radius-sm: 2px; --radius-md: 4px; --radius-lg: 8px; --radius-full: 999px; /* Shadows are layered rather than single-blur — one soft ambient plus one tight contact shadow is what stops a card looking like it was stuck on. */ --shadow-sm: 0 1px 2px rgba(20, 24, 29, 0.05), 0 1px 1px rgba(20, 24, 29, 0.04); --shadow-md: 0 4px 12px rgba(20, 24, 29, 0.07), 0 1px 3px rgba(20, 24, 29, 0.06); --shadow-lg: 0 16px 40px rgba(20, 24, 29, 0.10), 0 3px 8px rgba(20, 24, 29, 0.06); --shadow-up: 0 -3px 16px rgba(20, 24, 29, 0.10); --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 380ms; /* ------------------------------------------------------------------- FROM THE KIT. Everything above is the default primitive tier; what follows is what DESIGN-ghost-installations.md changes. ------------------------------------------------------------------- */ /* Palette, from the kit. */ --n-900: #000000; /* ink */ --n-600: #000000; /* body */ --n-400: #6b6b6b; /* muted */ --n-0: #ffffff; /* canvas */ --n-50: #f8f8f8; /* canvas-tint */ --n-950: #000000; /* band-charcoal */ --a-500: #ed392c; /* primary */ --a-700: #e12c21; /* primary-active */ --err-500: #c0392b; /* semantic-error */ /* Ramp steps interpolated between the kit's own greys, so a re-skin does not leave half the neutrals on the default. */ --n-25: #fcfcfc; --n-100: #d5d5d5; --n-200: #b2b2b2; --n-300: #8e8e8e; --n-500: #363636; --n-700: #000000; --n-800: #000000; /* Type. Families and scale derived from the kit's roles. Self-host the faces with `php tools/assets.php --font=`. */ --font-display: 'Nunito', sans-serif; --font-body: 'Nunito Sans', sans-serif; --text-2xs: clamp(0.481rem, 0.47rem + 0.05vw, 0.506rem); --text-xs: clamp(0.635rem, 0.62rem + 0.06vw, 0.669rem); --text-sm: clamp(0.831rem, 0.812rem + 0.08vw, 0.875rem); --text-base: clamp(0.95rem, 0.929rem + 0.1vw, 1rem); --text-lg: clamp(1.238rem, 1.179rem + 0.26vw, 1.375rem); --text-xl: clamp(1.238rem, 1.126rem + 0.5vw, 1.5rem); --text-2xl: clamp(1.36rem, 1.086rem + 1.22vw, 2rem); --text-3xl: clamp(1.785rem, 1.425rem + 1.6vw, 2.625rem); --text-4xl: clamp(3.06rem, 2.443rem + 2.74vw, 4.5rem); --weight-normal: 400; --weight-medium: 400; --weight-semi: 600; --weight-bold: 700; --leading-tight: 1.188; --leading-normal: 1.318; --leading-relaxed: 1.7; /* Corner geometry. */ --radius-none: 0; --radius-sm: 5px; --radius-md: 20px; --radius-lg: 20px; --radius-full: 100px; /* Space scale. */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 40px; --space-8: 56px; --space-9: 144px; --space-10: 144px; --space-11: 144px; /* Depth. A brand that uses hairlines instead should set these to `none` explicitly rather than leaving the defaults in place. */ --shadow-sm: none; --shadow-md: none; /* --------------------------------------------------------------------- 2 · SEMANTIC — what sections actually use --------------------------------------------------------------------- */ --color-ink: var(--n-900); --color-body: var(--n-600); --color-muted: var(--n-400); --color-surface: var(--n-0); --color-surface-2: var(--n-50); --color-surface-3: var(--n-100); --color-inverse: var(--n-900); --color-on-inverse: var(--n-0); --color-on-inverse-soft: var(--n-300); --color-rule: var(--n-100); --color-rule-strong: var(--n-200); --color-rule-on-inverse: rgb(var(--on-inverse-rgb) / 0.14); --color-wash-on-inverse: rgb(var(--on-inverse-rgb) / 0.12); --color-accent: var(--a-500); --color-accent-ink: var(--a-700); --color-accent-wash: var(--a-50); --color-mark: var(--mark-neutral); --color-mark-ok: var(--mark-ok); --color-mark-warn: var(--mark-warn); --color-ok: var(--ok-500); --color-warn: var(--warn-500); --color-err: var(--err-500); /* The action colour. Ink by default — see the note on --a-500. */ --color-action: var(--n-900); --color-action-hover:var(--n-700); --color-on-action: var(--n-0); --focus-ring: 2px solid var(--color-accent); --focus-offset: 3px; /* Layout */ --measure: 37rem; /* ~66 characters — the comfortable reading band */ --width-prose: 46rem; --width-wide: 74rem; --gutter: clamp(1.25rem, 4vw, 2.5rem); /* Section rhythm. Sections use these rather than picking their own padding, which is what keeps a 24-section page feeling like one document. */ --band-y: clamp(2.75rem, 6vw, 5rem); --band-y-lg: clamp(3.5rem, 8vw, 7rem); --stack: var(--space-5); /* --------------------------------------------------------------------- 3 · LEGACY ALIASES The 36 sections were written against these names. Mapping rather than renaming means the whole library re-skins from this file today, and the rename can happen as its own mechanical pass without a flag day. --------------------------------------------------------------------- */ --ink: var(--color-ink); --body: var(--color-body); --muted: var(--color-muted); --canvas: var(--color-surface); --tint: var(--color-surface-2); --dark: var(--color-inverse); --on-dark: var(--color-on-inverse); --on-dark-soft: var(--color-on-inverse-soft); --line: var(--color-action); --hairline: var(--color-rule); --err: var(--color-err); --ok: var(--color-ok); --wide: var(--width-wide); --prose: var(--width-prose); --gap: var(--gutter); /* --------------------------------------------------------------------- KIT OVERRIDES — semantic tokens this brand sets explicitly. --------------------------------------------------------------------- */ --color-rule: #bbbbbb; --color-rule-strong: #bbbbbb; --color-surface-3: #f8f8f8; --color-inverse: #000000; --color-on-inverse: #ffffff; --color-action: #ed392c; --color-action-hover: #e12c21; --color-on-action: #ffffff; --color-accent: #ed392c; --width-wide: 1280px; }