/* ============================================================================ * tokens.css — design tokens for the capsule project (Maju section library) * * OPTIONAL. Every section stylesheet declares literal fallbacks on each var(), * so a section renders correctly with this file absent. Link it first and the * values below win; edit it to re-brand a whole project without touching any * section CSS. * * Source of truth: web/app/themes/maju-agency/resources/css/app.css (@theme, * lines 6-72) plus the hex values actually used across the 58 catalog sections. * ========================================================================== */ :root { /* ---------------------------------------------------------------- fonts */ --font-sans: Inter, ui-sans-serif, system-ui, sans-serif; /* Capsule brand faces — Figma "Heading font" / "Body font" both resolve to * Space Grotesk. No .woff2 ships with this repo (assets/fonts/ is empty by * design), so the pages load Space Grotesk from Google Fonts and fall back to * the system stack when offline. */ --font-heading: "Space Grotesk", ui-sans-serif, system-ui, sans-serif; --font-body: "Space Grotesk", ui-sans-serif, system-ui, sans-serif; --font-serif: Merriweather, ui-serif, Georgia, serif; --font-mono: "Fira Code", ui-monospace, SFMono-Regular, monospace; /* --------------------------------------------------------- type scale -- * NOTE: the source theme OVERRIDES the Tailwind defaults. These are not the * stock values — text-2xl is 50px, text-5xl is 70px. Do not "correct" them. */ --fs-xxs: 10px; /* 0.625rem */ --fs-xs: 11px; --fs-sm: 14px; --fs-base: 16px; --fs-md: 18px; --fs-lg: 20px; --fs-xl: 24px; --fs-2xl: 50px; --fs-3xl: 56px; --fs-4xl: 64px; --fs-5xl: 70px; --fs-6xl: 80px; --fs-7xl: 100px; --fs-8xl: 120px; --fs-9xl: 180px; /* Capsule additions — sizes the Maju scale above has no step for. Named by * their px value because the existing ladder (10/11/14/16/18/20/24/50/56/…) * has no free rung between 24 and 50, and forking a near-duplicate --fs-2xl * would be worse. Figma: Boukan — Capsule, "Heading/Desktop/*" + "Body/*". * 12 → Body/Text xs 30 → Heading H5 48 → Heading H3 * 36 → mobile H2 28 → panel label 40 → section H2 * 44 → mobile H1 60 → Heading H2 72 → Heading H1 */ --fs-12: 12px; --fs-30: 30px; --fs-28: 28px; --fs-36: 36px; --fs-40: 40px; --fs-44: 44px; --fs-48: 48px; --fs-60: 60px; --fs-72: 72px; --line-height-primary: 4.9rem; /* Implicit line-heights. * In the source theme each font-size utility also carries a paired * line-height, and those pairs survived the size override — so they are the * stock Tailwind ratios applied to the theme's non-stock sizes. A section * that sets no explicit leading inherits these: * * xs 1.3333 sm 1.4286 base 1.5 lg 1.5556 xl 1.4 * 2xl 1.3333 3xl 1.2 4xl 1.1111 5xl 1 6xl 1 * * --fs-md (18px) has NO pair, so `text-md` alone leaves line-height * inherited. Match whatever the source produced; do not invent a value. */ /* -------------------------------------------------------------- palette -- * Neutral ramp (Untitled UI grays) — the backbone of the catalog. */ --color-gray-50: #F9FAFB; --color-gray-100: #F2F4F7; --color-gray-200: #EAECF0; --color-gray-300: #D0D5DD; --color-gray-400: #98A2B3; --color-gray-500: #667085; --color-gray-600: #475467; --color-gray-700: #344054; --color-gray-800: #1D2939; --color-gray-900: #101828; /* Capsule brand palette — Figma variables (Brand/*, Base/*). The Gray/* * ramp in the Figma file matches the Untitled UI ramp above hex-for-hex. */ --color-brand-dark-gray: #21262A; /* Brand/dark gray — promo bar, buttons */ --color-brand-dark-grey: #4C5155; /* Brand/dark grey — muted body copy */ --color-brand-red: #FF0031; /* Brand/red — feature icons */ --color-brand-gray: #DBDBDB; /* Brand/gray */ --color-brand-light-grey: #F6F6F6; /* Brand/light grey — footer ground */ --color-black: #000000; /* Base/black */ /* Blue accent */ --color-blue-400: #3B82F6; --color-blue-500: #2E90FA; --color-blue-600: #1570EF; --color-blue-700: #175CD3; /* Error */ --color-red-500: #F04438; --color-red-600: #D92D20; /* Warm neutrals used by the darker/editorial sections */ --color-warm-50: #FAF9F5; --color-warm-300: #BFBDBB; --color-warm-500: #787A7A; --color-warm-900: #2E2D2E; /* Theme colors carried over from app.css:49-50 (rarely referenced) */ --color-primary: #F69983; --color-secondary: #5C605E; /* ------------------------------------------------------------ semantic -- * What section CSS actually references. Aliases of the palette above. */ --color-surface: #FFFFFF; --color-surface-muted: var(--color-gray-50); --color-surface-alt: var(--color-gray-100); --color-surface-dark: var(--color-gray-900); --color-heading: var(--color-gray-900); --color-heading-alt: var(--color-warm-900); --color-text-body: var(--color-gray-600); --color-text-muted: var(--color-gray-500); --color-text-subtle: var(--color-gray-400); --color-text-inverse: #FFFFFF; --color-border: var(--color-gray-300); --color-border-subtle: var(--color-gray-200); --color-accent: var(--color-blue-500); --color-accent-strong: var(--color-blue-600); --color-accent-deep: var(--color-blue-700); --color-danger: var(--color-red-500); --color-danger-strong: var(--color-red-600); } /* --------------------------------------------------------------------------- * Breakpoints — documented here, but CSS custom properties are NOT valid * inside @media, so section stylesheets hardcode these four widths: * * sm 640px * md 768px * lg 1024px * xl 1280px * * The theme also defines m-s 360 / m-m 375 / m-l 390 / m-xl 414 / m-2xl 601 / * 2-1xl 1366 / 3xl 1680 / 4xl 1920 / 5xl 3000 (app.css:8-16). None of them are * used by any catalog section — do not reintroduce them without a reason. * ------------------------------------------------------------------------- */ /* --------------------------------------------------------------------------- * Webfonts — the source theme ships none. --font-sans resolves to the system * UI stack in practice, which is what the reference designs render with. * To brand a project, drop .woff2 files in assets/fonts/ and add @font-face * declarations above the :root block. * ------------------------------------------------------------------------- */