/*
  Bloom Box concept, Option B: minimal and editorial.

  PROVISIONAL DESIGN TOKENS
  Nothing in this file is an approved brand value. The palette is kept to
  black, white and one deep green observed in existing artwork, 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-ink: #161616;
  --brand-paper: #ffffff;
  --brand-green: #1f3a30;
  --brand-grey: #5c5c5c;
  --brand-wash: #f4f4f1;

  /* ---- Page ---- */
  --color-bg: var(--brand-paper);
  --color-surface: var(--brand-paper);
  --color-surface-alt: var(--brand-wash);
  --color-text: var(--brand-ink);
  --color-text-muted: var(--brand-grey);
  --color-heading: var(--brand-ink);
  --color-link: var(--brand-ink);
  --color-accent: var(--brand-green);
  --color-accent-deco: var(--brand-green);
  --color-focus: var(--brand-green);
  --color-rule: var(--brand-ink);
  --color-card-border: var(--brand-ink);
  --color-error: #a3212b;

  /* ---- Buttons ---- */
  --color-btn-bg: var(--brand-ink);
  --color-btn-text: var(--brand-paper);
  --color-btn-hover-bg: var(--brand-green);
  --color-btn-ghost-border: var(--brand-ink);
  --color-btn-ghost-text: var(--brand-ink);
  --color-btn-ghost-hover-bg: var(--brand-wash);

  /* ---- Header and footer ---- */
  --color-header-bg: var(--brand-paper);
  --color-header-text: var(--brand-ink);
  --color-header-muted: var(--brand-grey);
  --color-header-border: var(--brand-ink);
  --color-nav-active: var(--brand-ink);
  --color-nav-active-text: var(--brand-ink);
  --color-footer-bg: var(--brand-ink);
  --color-footer-text: #f5f5f2;
  --color-footer-muted: #b8b8b2;
  --color-footer-rule: rgba(255, 255, 255, 0.24);
  --color-footer-focus: #ffffff;
  --color-banner-bg: var(--brand-wash);
  --color-banner-text: var(--brand-ink);

  /* ---- Forms and flow ---- */
  --color-input-bg: var(--brand-paper);
  --color-input-border: #767676;
  --color-selected-bg: var(--brand-wash);
  --color-progress-track: #d6d6d2;
  --color-notice-bg: var(--brand-wash);
  --color-step-num-bg: transparent;
  --color-step-num-text: var(--brand-ink);

  /* ---- Status and tags ---- */
  --color-live-bg: #e6eee8;
  --color-live-text: var(--brand-green);
  --color-off-bg: var(--brand-wash);
  --color-off-text: #4d4d4d;
  --color-verify-bg: var(--brand-wash);
  --color-verify-text: #4d4d4d;

  /* ---- Map and pins ---- */
  --color-map-water: var(--brand-paper);
  --color-map-land: #ecece8;
  --color-map-coast: var(--brand-ink);
  --color-map-neighbour: #f8f8f6;
  --color-map-leader: var(--brand-ink);
  --color-map-road-motorway: #555555;
  --color-map-road-main: #a5a5a0;
  --map-tile-filter: grayscale(1) contrast(1.05);
  --color-map-label-bg: rgba(255, 255, 255, 0.94);
  --color-map-label-text: var(--brand-ink);
  --color-pin-outline: var(--brand-paper);
  --color-pin-soon-ring: var(--brand-ink);
  --color-pin-live-bg: var(--brand-ink);
  --color-pin-live-text: var(--brand-paper);
  --color-pin-soon-bg: var(--brand-paper);
  --color-pin-soon-text: var(--brand-ink);
  --color-soon-bg: var(--brand-wash);
  --color-soon-text: var(--brand-ink);

  /* ---- Image placeholders ---- */
  --color-ph-bg: #efefec;
  --color-ph-label-bg: #ffffff;
  --color-ph-label-text: var(--brand-ink);

  /* ---- Provisional fonts (system stacks, nothing downloaded) ---- */
  --font-heading: "Times New Roman", Times, "Liberation Serif", serif;
  --font-body: "Helvetica Neue", Helvetica, "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --font-label: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --font-button: var(--font-body);
  --font-nav: var(--font-body);

  /* ---- Type scale ---- */
  --fs-body: 1.0625rem;
  --fs-lead: clamp(1.125rem, 1rem + 0.7vw, 1.4375rem);
  --fs-display: clamp(3.5rem, 0.5rem + 15vw, 11rem);
  --fs-h1: var(--fs-display);
  --fs-h2: clamp(2.5rem, 1.5rem + 4.5vw, 4.75rem);
  --fs-h3: 1.5rem;
  --fs-h4: 1.1875rem;
  --fs-button: 0.8125rem;
  --fs-nav: 0.875rem;
  --fs-brand: 1.0625rem;

  /* ---- Type styling ---- */
  --heading-weight: 400;
  --heading-tracking: -0.025em;
  --heading-transform: none;
  --brand-weight: 700;
  --brand-tracking: 0.02em;
  --brand-transform: none;
  --nav-weight: 400;
  --nav-tracking: 0;
  --nav-transform: none;
  --btn-weight: 700;
  --btn-tracking: 0.1em;
  --btn-transform: uppercase;
  --btn-border-width: 1px;

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

  /* ---- Layout ---- */
  --container: 72rem;
  --space-section: clamp(4.5rem, 2.5rem + 9vw, 9.5rem);
  --space-head: clamp(2.25rem, 1.5rem + 3vw, 4rem);
  --space-hero: clamp(4rem, 2rem + 10vw, 9rem);
}