/* ===========================================================================
   Design tokens — Better Trade 2026 · Coming Soon
   Source: Figma “Landing Page - Coming Soon” › Desktop - Taviraj & FC Minimal
   file KPZ0s0eZOgu88EgBHZaMKW · node 23:5 · frame 1440 × 731
   =========================================================================== */

:root {
    /* --- Colour ------------------------------------------------------------ */
    --color-ink: #2e2e2e;
    --color-surface: #fff;
    --color-rule: var(--color-ink);

    /* --- Typeface ---------------------------------------------------------- */
    --font-display: "Taviraj", "Times New Roman", serif;
    --font-body: "FC Minimal", "Helvetica Neue", Arial, sans-serif;

    /* --- Weight ------------------------------------------------------------ */
    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    /* FC Minimal ships no SemiBold cut — Figma’s “SemiBold” maps to Bold here. */
    --font-weight-bold: 700;

    /* --- Size ---------------------------------------------------------------
     The display line is set on one unbreakable line, so it is capped at the
     Figma value and otherwise tracks the viewport: 9vw ≈ its own advance
     width, which keeps it inside the gutters down to ~253px.               */
    --font-size-display: min(5rem, 9vw);
    /* 80px from 889px up */
    --font-size-title: clamp(1.25rem, 4.5vw, 2.5rem);
    /* 40px */
    --font-size-body: 1rem;
    /* 16px */
    --font-size-small: 0.875rem;
    /* 14px */

    /* --- Rhythm ------------------------------------------------------------ */
    --line-height-base: 1.5;
    --letter-spacing-display: 0.16em;
    /* 12.8px @ 80px */
    --letter-spacing-base: 0;

    /* --- Space ------------------------------------------------------------- */
    --space-sm: 1rem;
    /* 16 */
    --space-md: 1.5rem;
    /* 24 — logo row → headline */
    --space-lg: 2rem;
    /* 32 — logo↔logo, page bottom gutter */
    --space-xl: 2.6875rem;
    /* 43 — page side gutter */

    /* --- Layout ------------------------------------------------------------ */
    --layout-frame-ratio: calc(1440 / 731);
    --layout-gutter-x: var(--space-xl);
    --layout-gutter-y: var(--space-lg);
    --layout-meta-width: 22.25rem;
    /* 356 */
    --layout-content-rise: 1.09375rem;
    /* 17.5 — hero sits above optical centre */

    /* --- Brand marks ------------------------------------------------------- */
    --logo-height: clamp(2.5rem, 3.8889vw, 3.5rem);
    /* 56px */
    --logo-ratio-better-trade: calc(141 / 56);
    --logo-ratio-bt2026: calc(139 / 56);
    --rule-width: 1px;

    /* --- Key visual — both plates are 1440 × 1800, offset from the frame top */
    --kv-ratio: calc(1440 / 1800);
    --kv-offset-sky: -0.370833;
    /* -534 / 1440 */
    --kv-offset-wall: -0.084722;
    /* -122 / 1440 */
}