/*
  Bloom Box concept, Option C: bold, dark and gold.

  PROVISIONAL DESIGN TOKENS
  Nothing in this file is an approved brand value. The colours are visual
  observations from existing artwork (black, cream, gold), and the fonts
  are system fonts chosen as stand-ins. Replace them here, in one place,
  when the brand kit is approved. styles.css reads only these names.
*/

:root {
  /* ---- Provisional brand colours ---- */
  --brand-black: #0d0d0d;
  --brand-charcoal: #161616;
  --brand-cream: #f3eee4;
  --brand-gold: #d7b46a;
  --brand-gold-light: #e6c987;
  --brand-gold-deep: #8c7340;
  --brand-stone: #bdb5a7;

  /* ---- Page ---- */
  --color-bg: var(--brand-black);
  --color-surface: var(--brand-charcoal);
  --color-surface-alt: #121110;
  --color-text: var(--brand-cream);
  --color-text-muted: var(--brand-stone);
  --color-heading: var(--brand-cream);
  --color-link: var(--brand-gold);
  --color-accent: var(--brand-gold);
  --color-accent-deco: var(--brand-gold-deep);
  --color-focus: var(--brand-cream);
  --color-rule: #3a352b;
  --color-card-border: #3a352b;
  --color-error: #ff9c9c;

  /* ---- Buttons ---- */
  --color-btn-bg: var(--brand-gold);
  --color-btn-text: var(--brand-black);
  --color-btn-hover-bg: var(--brand-gold-light);
  --color-btn-ghost-border: var(--brand-gold);
  --color-btn-ghost-text: var(--brand-cream);
  --color-btn-ghost-hover-bg: rgba(215, 180, 106, 0.16);

  /* ---- Header and footer ---- */
  --color-header-bg: var(--brand-black);
  --color-header-text: var(--brand-cream);
  --color-header-muted: var(--brand-stone);
  --color-header-border: #2e2a22;
  --color-nav-active: var(--brand-gold);
  --color-nav-active-text: var(--brand-gold);
  --color-footer-bg: #000000;
  --color-footer-text: var(--brand-cream);
  --color-footer-muted: var(--brand-stone);
  --color-footer-rule: #2e2a22;
  --color-footer-focus: var(--brand-cream);
  --color-banner-bg: var(--brand-gold);
  --color-banner-text: var(--brand-black);

  /* ---- Forms and flow ---- */
  --color-input-bg: #111111;
  --color-input-border: #8f8674;
  --color-selected-bg: #221d10;
  --color-progress-track: #3a352b;
  --color-notice-bg: #1e1b14;
  --color-step-num-bg: transparent;
  --color-step-num-text: var(--brand-gold);

  /* ---- Status and tags ---- */
  --color-live-bg: #17301f;
  --color-live-text: #a6e3b5;
  --color-off-bg: #2b2b2b;
  --color-off-text: #d0c9bc;
  --color-verify-bg: #3a2f12;
  --color-verify-text: #f0d48a;

  /* ---- Map and pins ---- */
  --color-map-water: var(--brand-black);
  --color-map-land: #26221b;
  --color-map-coast: var(--brand-gold-deep);
  --color-map-neighbour: #181612;
  --color-map-leader: var(--brand-gold);
  --color-map-road-motorway: #a8905a;
  --color-map-road-main: #5c5136;
  --map-tile-filter: invert(1) hue-rotate(180deg) saturate(0.3) brightness(0.9) contrast(0.92);
  --color-map-label-bg: rgba(13, 13, 13, 0.88);
  --color-map-label-text: var(--brand-cream);
  --color-pin-outline: var(--brand-black);
  --color-pin-soon-ring: var(--brand-gold);
  --color-pin-live-bg: var(--brand-gold);
  --color-pin-live-text: var(--brand-black);
  --color-pin-soon-bg: var(--brand-black);
  --color-pin-soon-text: var(--brand-gold);
  --color-soon-bg: #2a2414;
  --color-soon-text: var(--brand-gold-light);

  /* ---- Image placeholders ---- */
  --color-ph-bg: #1a1a1a;
  --color-ph-label-bg: rgba(13, 13, 13, 0.88);
  --color-ph-label-text: var(--brand-cream);

  /* ---- Provisional fonts (system stacks, nothing downloaded) ---- */
  --font-heading: Didot, "Bodoni MT", "Bodoni 72", Constantia, "Palatino Linotype", Georgia, serif;
  --font-body: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-button: var(--font-body);
  --font-nav: var(--font-body);

  /* ---- Type scale ---- */
  --fs-body: 1.0625rem;
  --fs-lead: clamp(1.0625rem, 0.95rem + 0.6vw, 1.3125rem);
  --fs-display: clamp(2.5rem, 1.2rem + 6.5vw, 5.5rem);
  --fs-h1: var(--fs-display);
  --fs-h2: clamp(1.75rem, 1.3rem + 2vw, 2.75rem);
  --fs-h3: 1.25rem;
  --fs-h4: 1.0625rem;
  --fs-button: 0.8125rem;
  --fs-nav: 0.6875rem;
  --fs-brand: 1.125rem;

  /* ---- Type styling ---- */
  --heading-weight: 400;
  --heading-tracking: 0.06em;
  --heading-transform: uppercase;
  --brand-weight: 400;
  --brand-tracking: 0.16em;
  --brand-transform: uppercase;
  --nav-weight: 600;
  --nav-tracking: 0.05em;
  --nav-transform: uppercase;
  --btn-weight: 700;
  --btn-tracking: 0.12em;
  --btn-transform: uppercase;
  --btn-border-width: 1px;

  /* ---- Shape ---- */
  --radius-s: 2px;
  --radius-m: 2px;
  --radius-card: 2px;
  --radius-media: 2px;
  --radius-btn: 0;
  --radius-pill: 2px;
  --shadow-card: none;

  /* ---- Layout ---- */
  --container: 76rem;
  --space-section: clamp(4rem, 2.5rem + 7vw, 7.5rem);
  --space-head: clamp(2rem, 1.5rem + 2vw, 3rem);
  --space-hero: 0;
}

/* Wider screens have room for larger, more widely spaced navigation. */
@media (min-width: 900px) {
  :root {
    --fs-nav: 0.8125rem;
    --nav-tracking: 0.14em;
  }
}