/* Homescene | SERHANT. Tampa Bay New Development, design round 1: tokens (K0, 2026-11-05).
   Link from a world:  <link rel="stylesheet" href="../../kit/fonts/fonts.css"> <link rel="stylesheet" href="../../kit/tokens.css">
   then put the world class on <body>:  <body class="w-v1">  (w-v2 / w-v3 / w-v4).
   Every world block defines the SAME role names, so shared components read the same variables:
     --bg --bg-2 --ink --ink-soft --rule --dark --dark-2 --on-dark --on-dark-soft --accent --accent-ink --on-accent --accent-on-dark
     --font-display --font-body --font-mono (V4: --font-hand)
   plus world extras. Contrast figures are WCAG 2.x ratios computed in K0 (sRGB relative luminance). AA = 4.5 normal text, 3.0 large
   text (24 px, or 18.66 px bold) and non-text graphics. Brand navy #121274 is the hub anchor; no pure #000 on the hub or Pendry
   worlds (V4's #000000 is the Roche Bobois guideline black: type and logo only, never a full-bleed band). */

:root {
  /* ---- spacing scale (8 px base; fluid band padding) ---- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;
  --s-9: 96px; --s-10: 128px; --s-11: 160px; --s-12: 224px;
  --band-pad: clamp(96px, 12vw, 192px);      /* vertical band padding (design lint M7: median 192 px+ at 1440) */
  --band-pad-tight: clamp(64px, 8vw, 128px);
  --gutter: clamp(16px, 4vw, 64px);          /* 16 px side gutter at 390 */
  --measure: 62ch;
  --max: 1360px;
  /* ---- radii ---- */
  --r-0: 0; --r-1: 2px; --r-2: 4px; --r-3: 8px; --r-4: 14px; --r-5: 24px; --r-pill: 999px;
  /* ---- shared ---- */
  --navy: #121274;                            /* official Homescene | SERHANT. navy (home-scene-idx-v2 docs/07-design-system.md) */
  --focus-w: 3px;
  --tap: 48px;                                /* minimum tap target at 390 */
  --sticky-bar-h: 64px;                       /* the 390 Call + Book bar; pad the page bottom by this much */
  --tel: "(727) 955-3781";
}

/* ==================================================================================================================
   V1 THE DIVIDE (hub): navy, deep navy, paper; ONE cool water accent for the divider and the pins only.
   Inter Tight 800/900 caps (-0.03em) / Hanken Grotesk / IBM Plex Mono.
     paper on navy 14.11 · white on navy 15.39 · ink #0D0D3D on paper 16.86 · water #5CC8DB on navy 7.87, on deep navy 9.16
     navy on water 7.87 (a water-filled chip with navy text is AA) · water as TEXT on paper: use --accent-ink #146E7F (5.40);
     #5CC8DB itself is never text on paper. Tower panels use their OWN colours (Pendry stone, Roche Bobois pink) inside their half only.
   ================================================================================================================== */
.w-v1 {
  --bg: #F6F5F1;            /* paper: representation + booking chapters */
  --bg-2: #ECEAE3;
  --ink: #0D0D3D;           /* navy-tinted off-black */
  --ink-soft: #3A3A8C;      /* 8.90 on paper */
  --rule: rgba(13, 13, 61, 0.14);
  --dark: #121274;          /* brand navy */
  --dark-2: #0B0B4E;        /* deep navy */
  --on-dark: #F6F5F1;
  --on-dark-soft: #B7B8E0;  /* 8.02 on navy */
  --accent: #5CC8DB;        /* the water: divider, pins, route only (hsl 189 64% 61%) */
  --accent-ink: #146E7F;    /* water as text on paper (5.40) */
  --on-accent: #121274;
  --accent-on-dark: #5CC8DB;
  --pendry-stone: #EDE8E1;  /* Pendry half / card ground (ink #24222A on it 12.89) */
  --rb-pink: #F186B6;       /* Roche Bobois half wash (guideline pink medium; black text 8.83) */
  --rb-pink-light: #E6A8C7;
  --font-display: 'Inter Tight', 'Inter', system-ui, sans-serif;   /* 800 to 900, letter-spacing -0.03em, caps for city names */
  --font-body: 'Hanken Grotesk', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
}

/* ==================================================================================================================
   V2 GOLDEN HOUR (hub): grounds follow the clock, warm paper -> dusk rose -> navy -> night. ONE accent: low-sun amber.
   Bodoni Moda 400 to 600 (opsz) / Manrope / JetBrains Mono.
     ink #1D1A33 on warm paper 14.60 · on dusk rose 7.99 · paper on navy 13.35 · on night 16.90 · amber #E9A245 on night 9.02,
     on navy 7.12 · night text on amber 9.02 (primary CTA: amber fill, night text) · amber as TEXT on paper: --accent-ink #8A5410
     (5.43) · dusk rose is 1.83 against paper: a ground step, never text. Amber hsl 35 79% 59% (under the 80% ceiling).
   ================================================================================================================== */
.w-v2 {
  --g-1630: #F4EEE6;        /* 4:30 PM warm paper */
  --g-sunset: #D9A79E;      /* sunset dusk rose */
  --g-dusk-plum: #7A4F5E;   /* the step between rose and navy (paper text 5.86) */
  --g-blue: #121274;        /* blue hour = brand navy */
  --g-night: #070A24;       /* night (never #000) */
  --bg: #F4EEE6;
  --bg-2: #EBE2D6;
  --ink: #1D1A33;
  --ink-soft: #5A5470;      /* 6.20 on paper */
  --rule: rgba(29, 26, 51, 0.16);
  --dark: #070A24;
  --dark-2: #121274;
  --on-dark: #F4EEE6;
  --on-dark-soft: #C9C3D6;
  --accent: #E9A245;        /* low sun: clock hand, the sun, primary CTA */
  --accent-ink: #8A5410;
  --on-accent: #070A24;
  --accent-on-dark: #E9A245;
  --font-display: 'Bodoni Moda', 'Didot', Georgia, serif;   /* 400 to 600, font-variation-settings "opsz" 96 for display; roman only */
  --font-body: 'Manrope', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
}

/* ==================================================================================================================
   V3 THE PRIVATE VIEWING (Pendry page): stone, warm white, evening; ONE accent: muted brass (key card + floor indicator only).
   Gloock OR Instrument Serif (the world picks one) / Jost 300 to 400 / Jost 500 caps tracked +0.18em.
     ink #24222A on stone 12.89, on warm white 14.55 · warm white on evening 15.83 · brass #9C7A4A on evening 4.31 and on white
     3.67 (graphics / large text only) · brass TEXT on light: --accent-ink #7A5C33 (5.71) · brass text on evening: --accent-on-dark
     #B8956A (6.14) · evening text on brass fill 4.31 (large only: a brass key card carries evening type at 24 px+ or uses white).
   ================================================================================================================== */
.w-v3 {
  --bg: #F8F6F2;            /* warm white */
  --bg-2: #EDE8E1;          /* stone */
  --ink: #24222A;
  --ink-soft: #5E5A63;      /* 5.53 on stone */
  --rule: rgba(36, 34, 42, 0.14);
  --dark: #1C1B22;          /* evening */
  --dark-2: #26252D;
  --on-dark: #F8F6F2;
  --on-dark-soft: #B9B3AA;  /* 8.21 on evening */
  --accent: #9C7A4A;        /* muted brass (no gold-leaf effects) */
  --accent-ink: #7A5C33;
  --on-accent: #1C1B22;
  --accent-on-dark: #B8956A;
  --font-display: 'Gloock', 'Instrument Serif', Georgia, serif;   /* swap the order to use Instrument Serif; never Cormorant */
  --font-body: 'Jost', system-ui, sans-serif;                      /* 300 to 400 */
  --font-mono: 'Jost', system-ui, sans-serif;                      /* utility = Jost 500 caps, letter-spacing 0.18em */
}

/* ==================================================================================================================
   V4 SOPHIE'S JOURNAL (Roche Bobois page): the guideline palette, EXACT hexes (V.01 2026, Conway+Partners).
   Cormorant Garamond 300 to 500 / DM Sans 300 to 400 (chapter caps DM Sans 500 +0.12em) / Caveat 500 to 600 (lowercase notes).
     black on cream 17.44 · black on pink medium 8.83 · on pink light 10.79 · on light blue 14.44 · on yellow 14.57 · on green 14.99
     white on blue 11.29 · cream on blue 9.38 · yellow on blue 7.83 · pink light on blue 5.80 · blue text on cream 9.38
     !! white on pink dark #EE3A8D is 3.73 and white on pink logo #DF699E 3.16: AA for LARGE text and for the white logo only.
        The booking chapter and the 390 sticky bar on pink dark need BLACK type for normal-size text (5.63), or white set at
        24 px+ / 18.66 px bold. Pink dark as TEXT on cream is 3.10 (large only).
   ================================================================================================================== */
.w-v4 {
  --rb-cream: #F1EBC6;
  --rb-yellow: #FFD300;
  --rb-pink-logo: #DF699E;
  --rb-pink-dark: #EE3A8D;
  --rb-pink-medium: #F186B6;
  --rb-pink-light: #E6A8C7;
  --rb-green: #AEEB80;
  --rb-blue: #002AA3;
  --rb-light-blue: #C0DAE8;
  --rb-red: #F8001C;
  --rb-black: #000000;      /* guideline black: type and logo only */
  --bg: #F1EBC6;            /* cream */
  --bg-2: #FFFFFF;          /* white paper */
  --ink: #000000;
  --ink-soft: #4A4A4A;      /* 7.36 on cream */
  --rule: rgba(0, 0, 0, 0.14);
  --dark: #002AA3;          /* the footer ground is guideline blue, never black */
  --dark-2: #EE3A8D;
  --on-dark: #FFFFFF;
  --on-dark-soft: #F1EBC6;
  --accent: #EE3A8D;        /* pink dark: saturated accent (graphics, large type, fills with black text) */
  --accent-ink: #002AA3;    /* accent-coloured TEXT on cream uses the blue (9.38); pink text only at large sizes */
  --on-accent: #000000;     /* text on a pink dark fill: black 5.63 (white 3.73 = large only) */
  --accent-on-dark: #FFD300;
  --font-display: 'Cormorant Garamond', Georgia, serif;   /* 300 to 500, title case; line-height ~0.97 (60/58 per the guidelines) */
  --font-body: 'DM Sans', system-ui, sans-serif;           /* 300 to 400; chapter titles 500 caps, letter-spacing 0.12em */
  --font-hand: 'Caveat', 'Segoe Script', cursive;          /* 500 to 600, lowercase notes */
  --font-mono: 'DM Sans', system-ui, sans-serif;
}