/*
  Bloom Box concept, Option A: warm and photography-led.

  PROVISIONAL DESIGN TOKENS
  Nothing in this file is an approved brand value. The colours are visual
  observations from existing artwork (dark green, cream, blush), 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-green: #1f3a30;
  --brand-green-soft: #2c5244;
  --brand-cream: #fbf5ee;
  --brand-blush: #d9939d;
  --brand-blush-tint: #f6e7e4;
  --brand-rose: #9c4455;

  /* ---- Page ---- */
  --color-bg: var(--brand-cream);
  --color-surface: #ffffff;
  --color-surface-alt: var(--brand-blush-tint);
  --color-text: #24332c;
  --color-text-muted: #51605a;
  --color-heading: var(--brand-green);
  --color-link: var(--brand-green);
  --color-accent: var(--brand-rose);        /* safe for text on cream and white */
  --color-accent-deco: var(--brand-blush);  /* decoration only, not for text */
  --color-focus: var(--brand-green);
  --color-rule: #e6d9cc;
  --color-card-border: #efe4d8;
  --color-error: #a3212b;

  /* ---- Dark band (How it works) ---- */
  --color-band-bg: var(--brand-green);
  --color-band-text: var(--brand-cream);
  --color-band-muted: #d5ded8;

  /* ---- Buttons ---- */
  --color-btn-bg: var(--brand-green);
  --color-btn-text: var(--brand-cream);
  --color-btn-hover-bg: var(--brand-green-soft);
  --color-btn-ghost-border: var(--brand-green);
  --color-btn-ghost-text: var(--brand-green);
  --color-btn-ghost-hover-bg: rgba(31, 58, 48, 0.08);

  /* ---- Header and footer ---- */
  --color-header-bg: var(--brand-cream);
  --color-header-text: var(--brand-green);
  --color-header-muted: #51605a;
  --color-header-border: #e6d9cc;
  --color-nav-active: var(--brand-rose);
  --color-nav-active-text: var(--brand-green);
  --color-footer-bg: var(--brand-green);
  --color-footer-text: var(--brand-cream);
  --color-footer-muted: #c9d3cc;
  --color-footer-rule: rgba(251, 245, 238, 0.22);
  --color-footer-focus: var(--brand-cream);
  --color-banner-bg: var(--brand-green);
  --color-banner-text: var(--brand-cream);

  /* ---- Forms and flow ---- */
  --color-input-bg: #ffffff;
  --color-input-border: #6e7b74;
  --color-selected-bg: #fbf0ee;
  --color-progress-track: #e6d9cc;
  --color-notice-bg: var(--brand-blush-tint);
  --color-step-num-bg: #f6dadd;
  --color-step-num-text: #6e2b38;

  /* ---- Status and tags ---- */
  --color-live-bg: #ddebdd;
  --color-live-text: #1e4d2b;
  --color-off-bg: #ece4da;
  --color-off-text: #5a4a3a;
  --color-verify-bg: #f6dadd;
  --color-verify-text: #6e2b38;

  /* ---- Map and pins ---- */
  --color-map-water: var(--brand-cream);
  --color-map-land: var(--brand-green);
  --color-map-coast: var(--brand-green);
  --color-map-neighbour: #c9d3cc;
  --color-map-leader: var(--brand-blush);
  --color-map-road-motorway: #a9bfb3;
  --color-map-road-main: #5f8072;
  --map-tile-filter: sepia(0.22) saturate(0.8);
  --color-map-label-bg: rgba(251, 245, 238, 0.94);
  --color-map-label-text: var(--brand-green);
  --color-pin-outline: var(--brand-green);
  --color-pin-soon-ring: var(--brand-blush);
  --color-pin-live-bg: var(--brand-blush);
  --color-pin-live-text: var(--brand-green);
  --color-pin-soon-bg: var(--brand-cream);
  --color-pin-soon-text: var(--brand-green);
  --color-soon-bg: #f7e9c8;
  --color-soon-text: #6b4a0c;

  /* ---- Image placeholders ---- */
  --color-ph-bg: #f0e0d6;
  --color-ph-label-bg: rgba(255, 255, 255, 0.94);
  --color-ph-label-text: #24332c;

  /* ---- Provisional fonts (system stacks, nothing downloaded) ---- */
  --font-heading: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --font-body: "Avenir Next", Avenir, "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.875rem, 1.6rem + 6vw, 5.25rem);
  --fs-h1: var(--fs-display);
  --fs-h2: clamp(2rem, 1.5rem + 2.2vw, 3rem);
  --fs-h3: 1.375rem;
  --fs-h4: 1.125rem;
  --fs-button: 1rem;
  --fs-nav: 0.875rem;
  --fs-brand: 1.25rem;

  /* ---- Type styling ---- */
  --heading-weight: 500;
  --heading-tracking: -0.01em;
  --heading-transform: none;
  --brand-weight: 500;
  --brand-tracking: 0.14em;
  --brand-transform: uppercase;
  --nav-weight: 600;
  --nav-tracking: 0;
  --nav-transform: none;
  --btn-weight: 600;
  --btn-tracking: 0.01em;
  --btn-transform: none;
  --btn-border-width: 1.5px;

  /* ---- Shape ---- */
  --radius-s: 8px;
  --radius-m: 14px;
  --radius-card: 20px;
  --radius-media: 24px;
  --radius-btn: 999px;
  --radius-pill: 999px;
  --shadow-card: 0 10px 30px rgba(31, 58, 48, 0.08);

  /* ---- Layout ---- */
  --container: 75rem;
  --space-section: clamp(3.5rem, 2rem + 6vw, 6.5rem);
  --space-head: clamp(1.75rem, 1.25rem + 2vw, 2.75rem);
  --space-hero: clamp(2.5rem, 1.5rem + 5vw, 5.5rem);
}