/* =============================================================================
   Bloubergstrand - tokens.css
   All design tokens as :root custom properties. This file is the single source
   of truth; theme.css references these tokens only and contains no raw hex or
   raw px. Fonts are self-hosted (no Google Fonts). South African English,
   no em-dashes, no en-dashes, no double-hyphens, no emojis.
   -----------------------------------------------------------------------------
   Poured in from the Claude Design handoff (docs/handoff). Font url() paths are
   theme-relative: this file lives in assets/css, fonts live in assets/fonts.
   ========================================================================== */

/* ------------------------------------------------------------ Self hosted -- */
/* Display face: Montserrat (geometric sans), self-hosted variable font. Used for
   all headings and the big hero lines. SIL OFL licensed, no Google Fonts CDN. */
@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/Montserrat-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/Montserrat-Italic-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 100 900; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-VariableFont_opsz,wght.ttf') format('truetype-variations');
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-Italic-VariableFont_opsz,wght.ttf') format('truetype-variations');
  font-weight: 100 900; font-style: italic; font-display: swap;
}

:root {
  /* ---------------------------------------------------------------- Colour -- */
  /* Brand navy ("Blouberg" in the wordmark) */
  --color-navy-700: #081C5E;
  --color-navy-600: #0B257A;
  --color-navy-500: #1F3F9E;
  /* Fynbos green ("strand" in the wordmark) */
  --color-green-700: #0A6E2C;
  --color-green-600: #0E8A37;
  --color-green-100: #E4F2E9;
  /* Warm coastal accents (golden hour) */
  --color-coral-600: #E2632A;
  --color-gold-600:  #E8A33D;
  --color-gold-100:  #F6E2BC;
  --color-ocean-500: #1B7FA8;
  /* Ink, warm near-black with a navy cast */
  --color-ink-900: #14202E;
  --color-ink-700: #3D4A59;
  --color-ink-500: #5E6B7A;
  --color-ink-300: #8A94A1;
  /* Surfaces, warm sand (not cold grey) */
  --color-surface-0:   #FFFFFF;
  --color-surface-50:  #FBF7F0;
  --color-surface-100: #F3ECDF;
  --color-surface-200: #EBE2D2;
  /* Borders */
  --color-border-100:  #E6DCCB;
  --color-border-200:  #D6CBB6;
  --color-border-cool: #DCE3EC;
  /* Light grey gradient border (sponsored cards) */
  --color-border-grad-1: #ECEDF0;
  --color-border-grad-2: #C6CCD3;
  /* Focus */
  --color-focus:      #2D6CDF;
  --color-focus-glow: rgba(11, 37, 122, 0.18);
  /* Hero protection gradient stops */
  --color-scrim-0:      rgba(8, 28, 94, 0);
  --color-scrim-strong: rgba(8, 28, 94, 0.74);
  /* Media placeholder fill (reserved aspect-ratio boxes) */
  --color-placeholder-media: #E4DCCD;

  /* Semantic roles (referenced throughout theme.css) */
  --color-bg:           var(--color-surface-50);
  --color-text:         var(--color-ink-900);
  --color-text-2:       var(--color-ink-700);
  --color-text-muted:   var(--color-ink-500);
  --color-text-faint:   var(--color-ink-300);
  --color-link:         var(--color-navy-600);
  --color-link-hover:   var(--color-navy-500);
  --color-primary:      var(--color-navy-600);
  --color-on-primary:   #FFFFFF;
  --color-secondary:    var(--color-green-600);
  --color-on-secondary: #FFFFFF;
  --color-sponsored:    var(--color-gold-600);
  --color-sponsored-bg: var(--color-gold-100);
  --color-sponsored-ink:#3A2A06;
  --color-featured:     var(--color-coral-600);
  --color-star:         var(--color-gold-600);
  --color-positive:     var(--color-green-600);

  /* ------------------------------------------------------------ Typography -- */
  --font-family-display: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-family-body:    'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-family-mono:    ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

  --font-size-caption:   12px;
  --font-size-sm:        14px;
  --font-size-base:      16px;
  --font-size-lg:        18px;
  --font-size-h4:        18px;
  --font-size-h3:        clamp(20px, 1.3vw, 22px);
  --font-size-h2:        clamp(24px, 1.7vw, 30px);
  --font-size-h1:        clamp(30px, 2.4vw, 44px);
  --font-size-display-m: clamp(34px, 3.0vw, 52px);
  --font-size-display-l: clamp(40px, 4.6vw, 68px);

  --leading-tight: 1.1;
  --leading-snug:  1.25;
  --leading-body:  1.6;
  --leading-loose: 1.7;
  --tracking-display: -0.02em;
  --tracking-tight:   -0.01em;
  --tracking-wide:    0.04em;
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold:600;
  --weight-bold:    700;
  --weight-display: 700;

  /* --------------------------------------------------------------- Spacing -- */
  --space-1: 4px;  --space-2: 8px;   --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px;  --space-7: 48px; --space-8: 64px;
  --space-9: 96px; --space-10: 128px;

  /* ---------------------------------------------------------------- Radius -- */
  --radius-xs: 2px; --radius-sm: 3px; --radius-md: 6px;
  --radius-lg: 7px; --radius-pill: 999px;

  /* --------------------------------------------------------------- Shadows -- */
  --shadow-1: 0 1px 2px rgba(16, 21, 26, 0.08);
  --shadow-2: 0 6px 16px rgba(16, 21, 26, 0.10);
  --shadow-3: 0 18px 44px rgba(16, 21, 26, 0.14);
  --shadow-card:       0 1px 2px rgba(60, 42, 16, 0.06), 0 2px 6px rgba(60, 42, 16, 0.05);
  --shadow-card-hover: 0 10px 28px rgba(60, 42, 16, 0.14);

  /* ---------------------------------------------------------------- Motion -- */
  --motion-ease-out:    cubic-bezier(0.16, 1, 0.30, 1);
  --motion-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --motion-fast: 120ms;
  --motion-base: 220ms;
  --motion-slow: 420ms;

  /* ---------------------------------------------------------------- Layout -- */
  --layout-max:         1200px;
  --layout-content:     768px;
  --layout-gutter:      24px;
  --layout-sidebar:     320px;
  --layout-article-gap: 48px;

  /* Featured-image aspect ratios */
  --ratio-hero:     21 / 9;
  --ratio-post:     16 / 9;
  --ratio-business: 4 / 3;

  /* ----------------------------------------------- Strokes & control sizing -- */
  --stroke-hair:      1px;
  --stroke-1:         1.5px;
  --stroke-2:         2px;
  --stroke-accent:    3px;
  --stroke-accent-lg: 4px;
  --focus-offset:     2px;
  --lift:             2px;   /* card / link hover rise */

  --control-h:        44px;  /* primary control, min touch target */
  --control-h-sm:     38px;
  --chip-h:           40px;
  --chip-h-sm:        32px;
  --field-h:          44px;
  --search-h:         56px;
  --header-h:         72px;

  --icon-xs:          13px;
  --icon-sm:          16px;
  --icon:             18px;
  --icon-lg:          24px;
  --icon-star:        15px;
  --tile-icon:        44px;
  --row-media:        92px;

  --ad-banner-max:    1920px;
  --ad-rail-w:        320px;
  --ad-rail-h:        160px;

  --toggle-w:         40px;
  --toggle-h:         24px;
  --toggle-knob:      20px;
  --toggle-travel:    16px;

  --map-pin:          28px;
  --map-grid:         28px;

  /* Map preview palette */
  --color-map-land:  #DFE9E4;
  --color-map-water: #CFE3EE;
  --color-map-line:  rgba(11, 37, 122, 0.06);
}