/*------------------------------------*\ $TOKENS — The Coquinas Layer 1 of 6. PROJECT FILE. Token NAMES are kit-standard. Only the VALUES here are project-specific. Kit files consume these names and are never edited per project. THE KIT USES BARE var(). There are no inline fallbacks. Four colour tokens — focus, cta-fg, accent-text, placeholder — are registered with @property in _base.css and render MAGENTA when undeclared. If anything on the page is magenta, a token below is missing or malformed. NAMING NOTE — ink/paper are swapped from their literal meaning on purpose. Every frame in this design is dark-background, light-text, with no plain light page anywhere. _base.css's kit rule is `body { color: var(--jcd-color-ink); background: var(--jcd-color-paper); }` — unchanged, per NAMING.md. Rather than edit that kit rule (which the convention forbids), the VALUES are swapped instead: --jcd-color-ink holds the cream (renders as body text), --jcd-color-paper holds the dark umber (renders as the page background). The token names stay put; only what "ink" and "paper" point to differs from their everyday meaning. See NAMING.md section 2 — the client-facing name is a comment, never a CSS dependency. \*------------------------------------*/ :root { /* --- Color: three core values from the design system swatches ----- */ /* Confirmed directly against the designer's color chips: 584410 / F1D9B3 / F1B219. Everything else below is DERIVED (contrast- checked, not guessed) from those three — see build notes. */ --jcd-color-ink: #F1D9B3; /* "Coquina Cream" — body text, headline text */ --jcd-color-paper: #584410; /* "Marsh Umber" — page/section background */ --jcd-color-accent: #F1B219; /* "Marsh Gold" — kickers, links, CTA fill */ --jcd-color-white: #FFFFFF; /* Derived, not designer-specified — flag for confirmation once a solid-fill accent button actually appears in a build pass. Darkened ~14% from accent for a visible pressed/hover state. */ --jcd-color-accent-hover: #CE9714; /* CTA text on an accent-filled button. Computed, not assumed: cream-on-gold measures 1.38:1 (fails, near-invisible). Umber-on- gold measures 4.94:1 (passes AA). Must be the dark value. */ --jcd-color-cta-fg: var(--jcd-color-paper); /* accent-text: accent colour AS TEXT (kickers, links) rather than as a fill. Same hex as --jcd-color-accent — gold-on-umber measures 4.94:1, which is the same computed pass as the CTA case above, so no separate darkened variant is needed for this project. */ --jcd-color-accent-text: var(--jcd-color-accent); /* Focus ring: needs to read against BOTH the dark page background and any accent-filled control. Accent gold is the highest-contrast option available against the umber ground (4.94:1) and remains visible against paper-coloured surfaces too. */ --jcd-color-focus: var(--jcd-color-accent); /* Muted / placeholder: an alpha of the cream ink, not a fifth hue — matches the kit's existing pattern (see _components.css usage). */ --jcd-color-muted: rgba(241, 217, 179, 0.60); --jcd-color-placeholder: rgba(241, 217, 179, 0.55); --jcd-color-rule: rgba(241, 217, 179, 0.16); /* Inverse family — this kit convention assumes a light default page with dark sections as the exception (.jcd_ui_inverse / .jcd_ui_on_ink). Coquinas has no light page, so these currently point back at the same cream/umber pair. Registered so the inverse-context component classes don't silently go magenta if used; revisit only if a genuinely different "light card on dark page" surface shows up in a later Figma pass. */ --jcd-color-inverse: var(--jcd-color-ink); --jcd-color-inverse-muted: var(--jcd-color-muted); --jcd-color-inverse-rule: var(--jcd-color-rule); --jcd-color-inverse-bright: var(--jcd-color-ink); --jcd-color-shadow: rgba(0, 0, 0, 0.24); /* dark-on-dark scenes need a heavier shadow than a light-page kit default */ /* --- Type families ---------------------------------------------------- */ /* No serif in this design — Consumer Type carries the display role the kit's --jcd-font-serif slot expects. Self-hosted, see _fonts.css. Google Sans Flex is Google-hosted, enqueued in functions.php. */ --jcd-font-serif: "Consumer Type", Georgia, serif; /* display/headings — despite the token name, not a literal serif */ --jcd-font-sans: "Google Sans Flex", system-ui, -apple-system, sans-serif; /* body, nav, kickers, UI */ /* --- Weights ------------------------------------------------------------ */ /* Consumer Type ships all nine — the full range is available even though only Black (900) is confirmed in use as of this pass. */ --jcd-weight-thin: 100; --jcd-weight-extralight: 200; --jcd-weight-light: 300; --jcd-weight-regular: 400; --jcd-weight-medium: 500; --jcd-weight-semi: 600; --jcd-weight-bold: 700; --jcd-weight-extrabold: 800; --jcd-weight-display: 900; /* Consumer Type Black — confirmed hero/section-title weight */ /* --- Tracking -------------------------------------------------------- */ /* Every heading captured so far is set uppercase. Provisional values pending an actual letter-spacing measurement from a build pass. */ --jcd-tracking-display: 0; --jcd-tracking-tight: 0.02em; --jcd-tracking-kicker: 0.28em; --jcd-tracking-nav: 0.2em; --jcd-tracking-btn: 0.2em; /* --- Type scale --------------------------------------------------------- */ /* Derived from the Home hero frame under a stated 2x scale assumption (Figma canvas is 3280px wide, not a real breakpoint — treated as 2x a 1640px design, so CSS px = Figma px / 2). Confirmed against one frame only; treat sizes below h1/lead as provisional until cross-checked against a second frame with real headings. */ --jcd-text-h1: clamp(2.75rem, 5vw, 4rem); --jcd-text-h2: clamp(2rem, 3.5vw, 2.75rem); --jcd-text-h3: 1.5rem; /* ~24px — matches the derived date-strip size */ --jcd-text-h4: 1.25rem; --jcd-text-lead: 1.125rem; /* ~18px — matches BOTH the derived subheading AND the "Magazine Presents" eyebrow; see Build Sheet type audit */ --jcd-text-body: 1rem; --jcd-text-caption: 0.875rem; --jcd-text-kicker: 0.75rem; /* ~12px — nearest existing token to the derived 13px nav-link size */ /* NEW TOKEN — hero/flagship display only. Derived from "The Coquinas" at ~94px CSS, which is far outside the h1 clamp above. Scoped to the hero heading via a modifier class in _modules.css, NOT applied to --jcd-text-h1 globally — one oversized hero shouldn't inflate every h1 sitewide. Added per NAMING.md governance: token + gate, same commit. */ --jcd-text-display: 5.875rem; /* ~94px */ /* --- Line height ------------------------------------------------------ */ --jcd-leading-h1: 1.05; --jcd-leading-h2: 1.15; --jcd-leading-h3: 1.25; --jcd-leading-h4: 1.3; --jcd-leading-body: 1.65; --jcd-leading-small: 1.55; /* --- Button typography ------------------------------------------------ */ --jcd-btn-height: 48px; --jcd-btn-inset: var(--jcd-space-lg); --jcd-btn-size: var(--jcd-text-body); --jcd-btn-weight: var(--jcd-weight-semi); --jcd-btn-transform: uppercase; /* every button/link seen so far is uppercase */ --jcd-btn-tracking: var(--jcd-tracking-btn); --jcd-weight-kicker: var(--jcd-weight-medium); --jcd-leading-kicker: 1.3; /* --- Spacing, 8-point grid -------------------------------------------- */ --jcd-space-xs: 8px; --jcd-space-sm: 16px; --jcd-space-md: 24px; --jcd-space-lg: 32px; --jcd-space-xl: 48px; --jcd-space-2xl: 64px; --jcd-space-3xl: 80px; --jcd-space-4xl: 128px; /* --- Section rhythm --------------------------------------------------- */ --jcd-band-xs: var(--jcd-space-lg); --jcd-band-sm: var(--jcd-space-xl); --jcd-band-md: var(--jcd-space-2xl); --jcd-band-lg: var(--jcd-space-3xl); --jcd-band-xl: var(--jcd-space-4xl); --jcd-gutter: var(--jcd-space-md); --jcd-page-inset: var(--jcd-space-md); /* --- Container --------------------------------------------------------- */ --jcd-content-max: 1200px; /* PENDING — verify against the Figma canvas's actual content column once scale factor is confirmed */ --jcd-width-narrow: 760px; --jcd-width-wide: 1600px; --jcd-header-offset: 72px; /* Beaver Themer Header layout, not fixed/sticky — measure once built */ /* --- Radii -------------------------------------------------------------- */ /* PENDING — no rounded UI observed yet apart from the pill-shaped "enter" button outline. Kit defaults kept as placeholders. */ --jcd-radius-none: 0; --jcd-radius-sm: 4px; --jcd-radius-md: 8px; --jcd-radius-lg: 16px; --jcd-radius-pill: 9999px; /* --- Motion ------------------------------------------------------------ */ /* --jcd-ease and --jcd-ease-out are EXACT matches to the Minimal Gallery / Fluid Premium curves in the Motion Library — confirmed against the Lovable source, not the rendered labels. Coquinas uses Minimal Gallery (fire-once): opacity fade + clip-path mask reveal. */ --jcd-ease: cubic-bezier(0.4, 0, 0.2, 1); --jcd-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --jcd-duration-fast: 200ms; --jcd-duration-base: 300ms; --jcd-duration-slow: 500ms; --jcd-duration-reveal: 1200ms; /* Minimal Gallery profile — new token, not in the base kit */ } @media (max-width: 992px) { :root { --jcd-band-xs: var(--jcd-space-sm); /* 16px */ } } /* Beaver Builder native breakpoints */ @media (max-width: 768px) { :root { --jcd-band-sm: var(--jcd-space-md); --jcd-band-md: var(--jcd-space-lg); --jcd-band-lg: var(--jcd-space-xl); --jcd-band-xl: var(--jcd-space-3xl); --jcd-gutter: var(--jcd-space-sm); } }