/* Self-hosted webfonts (latin subsets, woff2), same faces as the homestay
   site. font-display: swap paints text in the fallback face immediately. */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/static/fonts/barlow-condensed-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('/static/fonts/barlow-condensed-900.woff2') format('woff2');
}
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/karla-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/static/fonts/karla-500.woff2') format('woff2');
}

:root {
  color-scheme: light;

  /* Palette */
  --brand:         #1E3A6B;  /* dark blue - primary        */
  --brand-dark:    #142A50;  /* hover / pressed           */
  --brand-soft:    #DCE4F2;  /* subtle blue fills (tags)  */
  --roof:          oklch(50.6% 0.174 28.5);   /* accent             */
  --charcoal:      oklch(25.5% 0.010 67.4);   /* body text          */
  --charcoal-soft: oklch(39.3% 0.015 79.7);   /* labels             */
  --stone-text:    oklch(51.6% 0.023 84.6);   /* readable muted     */
  --warm-white:    oklch(86% 0.08 305);       /* page background (purple) */
  --panel:         oklch(94.3% 0.010 87.5);   /* raised panel       */
  --border:        oklch(86.6% 0.016 82.8);   /* hairline           */
  --white:         oklch(99%   0.006 82);     /* cards              */

  /* Type */
  --font-display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --font-body:    'Karla', system-ui, sans-serif;

  /* Spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 40px;

  --radius:    18px;
  --radius-sm: 10px;
  --shadow:    0 1px 2px oklch(25% 0.01 67 / 0.08), 0 12px 32px oklch(25% 0.01 67 / 0.12);
}

*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; }

body {
  min-height: 100dvh;
  background: var(--warm-white);
  color: var(--charcoal);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

button { font: inherit; color: inherit; }

:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 3px;
}