/* ==========================================================================
   Nesbyen Hytteservice — Foundations
   Colors, type, and semantic CSS variables
   ========================================================================== */

/* Inter Tight + Fraunces are reasonable web-safe substitutes for a typical
   Norwegian premium-Scandi pairing (modern grotesque + warm serif).
   FLAG: substitute pending real foundry choice from the brand owner. */
@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600;700&family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&display=swap');

:root {
  /* -- Brand palette ------------------------------------------------------- */
  /* Primary: deep forest green — Hallingdal pine, gable trim, cabin shutters */
  --brand-forest-900: #1C2A1F;
  --brand-forest-800: #243429;
  --brand-forest-700: #2A3A2C; /* PRIMARY brand mark color */
  --brand-forest-600: #3A4D3D;
  --brand-forest-500: #506553;
  --brand-forest-400: #7A8B7C;

  /* Warm neutrals — birch, linen, untreated wood, snow */
  --warm-50:  #FBF9F4; /* page background, lightest */
  --warm-100: #F5F1E8; /* card / panel surface */
  --warm-200: #ECE5D2;
  --warm-300: #D9CFB3;
  --warm-400: #B8A988;
  --warm-500: #8A7C5E;

  /* Cool neutrals — slate, river-stone, muted ink */
  --ink-900: #15171A;
  --ink-800: #22252A;
  --ink-700: #393D44;
  --ink-600: #5A5F68;
  --ink-500: #7A808A;
  --ink-400: #A6ABB3;
  --ink-300: #CDD0D5;
  --ink-200: #E4E6E9;
  --ink-100: #F0F1F3;

  /* Accent: copper / oxidised iron — drawn from gate hardware, torvtak iron */
  --accent-copper-700: #8B4A2B;
  --accent-copper-600: #A85F3D;
  --accent-copper-500: #C97A52; /* CTA hover, key links */

  /* Semantic */
  --success: #4A6B3D;
  --warning: #B88A3D;
  --danger:  #9B3A2E;
  --info:    #3D5A6B;

  /* Foreground / background tokens */
  --bg-page:    var(--warm-50);
  --bg-surface: #FFFFFF;
  --bg-panel:   var(--warm-100);
  --bg-inverse: var(--brand-forest-900);
  --bg-muted:   var(--ink-100);

  --fg-default:  var(--ink-900);
  --fg-muted:    var(--ink-600);
  --fg-subtle:   var(--ink-500);
  --fg-disabled: var(--ink-400);
  --fg-inverse:  var(--warm-50);
  --fg-brand:    var(--brand-forest-700);
  --fg-link:     var(--brand-forest-700);
  --fg-link-hover: var(--accent-copper-600);

  --border-default: var(--ink-200);
  --border-strong:  var(--ink-300);
  --border-brand:   var(--brand-forest-700);

  /* -- Typography ---------------------------------------------------------- */
  --font-sans: "Inter Tight", "Helvetica Neue", -apple-system, system-ui, sans-serif;
  --font-serif: "Fraunces", "Source Serif Pro", Georgia, serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --fs-xs: 0.75rem;     /* 12 */
  --fs-sm: 0.875rem;    /* 14 */
  --fs-base: 1rem;      /* 16 */
  --fs-md: 1.125rem;    /* 18 */
  --fs-lg: 1.375rem;    /* 22 */
  --fs-xl: 1.75rem;     /* 28 */
  --fs-2xl: 2.25rem;    /* 36 */
  --fs-3xl: 3rem;       /* 48 */
  --fs-4xl: 4rem;       /* 64 */
  --fs-5xl: 5.5rem;     /* 88 — display */

  --lh-tight:  1.1;
  --lh-snug:   1.25;
  --lh-normal: 1.5;
  --lh-relaxed: 1.65;

  --tracking-tighter: -0.03em;
  --tracking-tight:   -0.015em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-wider:   0.12em;   /* eyebrow / small caps */
  --tracking-widest:  0.18em;

  /* -- 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;

  /* -- Radii --------------------------------------------------------------- */
  /* Refined Scandi: small, intentional radii. No pill buttons. */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-xl: 16px;

  /* -- Shadows ------------------------------------------------------------- */
  --shadow-xs: 0 1px 2px rgba(28, 42, 31, 0.04);
  --shadow-sm: 0 2px 6px rgba(28, 42, 31, 0.06);
  --shadow-md: 0 6px 18px rgba(28, 42, 31, 0.08);
  --shadow-lg: 0 16px 40px rgba(28, 42, 31, 0.12);

  /* -- Motion -------------------------------------------------------------- */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 360ms;
}

/* ==========================================================================
   Semantic typographic styles — apply these as classes
   ========================================================================== */

html, body { font-family: var(--font-sans); color: var(--fg-default); background: var(--bg-page); }

.h-display {
  font-family: var(--font-serif);
  font-size: clamp(3rem, 7vw, var(--fs-5xl));
  font-weight: 400;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tighter);
  font-variation-settings: "opsz" 144;
  color: var(--fg-default);
}

.h1 {
  font-family: var(--font-serif);
  font-size: var(--fs-4xl);
  font-weight: 400;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  font-variation-settings: "opsz" 96;
}

.h2 {
  font-family: var(--font-serif);
  font-size: var(--fs-3xl);
  font-weight: 400;
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
}

.h3 {
  font-family: var(--font-sans);
  font-size: var(--fs-2xl);
  font-weight: 500;
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
}

.h4 {
  font-family: var(--font-sans);
  font-size: var(--fs-xl);
  font-weight: 500;
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
}

.h5 {
  font-family: var(--font-sans);
  font-size: var(--fs-lg);
  font-weight: 500;
  line-height: var(--lh-snug);
}

.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--brand-forest-700);
}

.lead {
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
  color: var(--fg-muted);
  font-weight: 400;
}

.body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--fg-default);
}

.body-sm {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--fg-muted);
}

.caption {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  line-height: var(--lh-normal);
  color: var(--fg-subtle);
  letter-spacing: var(--tracking-wide);
}

.mono {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  letter-spacing: 0;
}

/* Quote / pull quote — uses serif italic */
.quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  color: var(--fg-default);
}