/* ============================================================
   Finn's Alaska — Colors & Type
   Cinematic Alaska palette: midnight + glacier + teal,
   warmed by amber & copper from the logo cartouche.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700;800&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,500;0,8..60,600;0,8..60,700;1,8..60,400&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ------------------------------------------------------------
     CORE PALETTE — the cinematic ground
     ------------------------------------------------------------ */

  /* Midnight (deep cinema ground — Alaskan night sky) */
  --midnight-900: #050a14;   /* near-black, page bg */
  --midnight-800: #0b1424;   /* primary dark surface */
  --midnight-700: #11203a;   /* raised surface */
  --midnight-600: #1a2e4f;   /* hover surface */
  --midnight-500: #243d65;   /* divider / inactive border */

  /* Glacier (icy blues — Tracy Arm meltwater) */
  --glacier-900: #0a1f3d;
  --glacier-700: #1a4a8a;
  --glacier-500: #3b82c4;   /* primary glacier */
  --glacier-400: #6cb0e2;
  --glacier-300: #a4d4f2;
  --glacier-200: #d6ecfa;
  --glacier-100: #ecf6fc;

  /* Tide (deep teal-green — Frederick Sound water) */
  --tide-900: #062924;
  --tide-700: #0e4f44;
  --tide-600: #167566;   /* primary tide */
  --tide-500: #1f9683;
  --tide-400: #4cb8a5;
  --tide-300: #84d4c5;
  --tide-200: #c1e9e0;

  /* Aurora (the cool green-blue glow — used sparingly for accent/glow) */
  --aurora-500: #2dd4bf;
  --aurora-400: #5fe7d4;

  /* Amber (the logo's hero warmth — copper/gold from FINN'S wordmark) */
  --amber-900: #4a2415;
  --amber-700: #8a4622;
  --amber-600: #c66a2b;     /* copper */
  --amber-500: #e88a3a;     /* primary amber — CTA */
  --amber-400: #f3a85a;
  --amber-300: #f9c989;
  --amber-200: #fde4be;

  /* Bone (warm off-white — the "ALASKA" cream in the logo) */
  --bone-100: #f7f1e3;
  --bone-200: #ece3cd;
  --bone-300: #d8cba9;

  /* Snow / pure neutrals */
  --snow: #ffffff;
  --ash-200: #c8d0dc;
  --ash-400: #6f7c91;
  --ash-600: #44505f;

  /* ------------------------------------------------------------
     SEMANTIC TOKENS — use these in components
     ------------------------------------------------------------ */

  /* Backgrounds */
  --bg-page: var(--midnight-900);
  --bg-surface: var(--midnight-800);
  --bg-raised: var(--midnight-700);
  --bg-hover: var(--midnight-600);
  --bg-inverse: var(--bone-100);

  /* Foregrounds */
  --fg-1: var(--bone-100);          /* primary text on dark */
  --fg-2: var(--ash-200);           /* secondary text on dark */
  --fg-3: var(--ash-400);           /* tertiary / muted */
  --fg-on-light-1: var(--midnight-900);
  --fg-on-light-2: var(--ash-600);

  /* Brand / interactive */
  --brand-primary: var(--amber-500);    /* CTA color */
  --brand-primary-hover: var(--amber-400);
  --brand-primary-press: var(--amber-600);
  --brand-secondary: var(--glacier-500);
  --brand-tertiary: var(--tide-500);

  /* Borders */
  --border-subtle: rgba(247, 241, 227, 0.08);
  --border-default: rgba(247, 241, 227, 0.14);
  --border-strong: rgba(247, 241, 227, 0.28);
  --border-amber: var(--amber-600);

  /* Status */
  --status-success: var(--tide-500);
  --status-info: var(--glacier-500);
  --status-warn: var(--amber-500);
  --status-danger: #d96a52;

  /* Effects */
  --glow-aurora: 0 0 32px rgba(45, 212, 191, 0.35);
  --glow-amber: 0 0 24px rgba(232, 138, 58, 0.45);
  --shadow-1: 0 1px 2px rgba(0,0,0,0.35);
  --shadow-2: 0 6px 16px rgba(0,0,0,0.45), 0 1px 2px rgba(0,0,0,0.4);
  --shadow-3: 0 24px 60px rgba(0,0,0,0.55), 0 6px 16px rgba(0,0,0,0.45);
  --shadow-cinema: 0 40px 120px rgba(5,10,20,0.7), inset 0 1px 0 rgba(247,241,227,0.06);

  /* Radii — restrained, slightly editorial */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-xl: 22px;
  --radius-pill: 999px;

  /* Spacing scale (4-base) */
  --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;

  /* ------------------------------------------------------------
     TYPOGRAPHY — three families, intentional roles
     ------------------------------------------------------------ */
  --font-display: 'Cinzel', 'Trajan Pro', 'Times New Roman', serif;
  --font-serif: 'Source Serif 4', 'Source Serif Pro', Georgia, serif;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'SFMono-Regular', Menlo, monospace;

  /* Type scale — cinematic, large display sizes */
  --fs-display-xl: clamp(64px, 9vw, 128px);
  --fs-display-lg: clamp(48px, 6.5vw, 88px);
  --fs-display-md: clamp(36px, 4.5vw, 64px);
  --fs-h1: 48px;
  --fs-h2: 36px;
  --fs-h3: 26px;
  --fs-h4: 20px;
  --fs-body-lg: 18px;
  --fs-body: 16px;
  --fs-body-sm: 14px;
  --fs-caption: 12px;
  --fs-eyebrow: 12px;

  /* Line heights */
  --lh-tight: 1.05;
  --lh-snug: 1.2;
  --lh-normal: 1.5;
  --lh-loose: 1.7;

  /* Letterspacing */
  --ls-display: 0.04em;     /* Cinzel runs wide */
  --ls-eyebrow: 0.22em;     /* eyebrow / label caps */
  --ls-tight: -0.01em;
}

/* ------------------------------------------------------------
   SEMANTIC ELEMENT STYLES — use as a base layer
   ------------------------------------------------------------ */

html, body {
  background: var(--bg-page);
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
}

.display-xl, .display-lg, .display-md,
h1.display, h2.display {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  line-height: var(--lh-tight);
  color: var(--fg-1);
}
.display-xl { font-size: var(--fs-display-xl); }
.display-lg { font-size: var(--fs-display-lg); }
.display-md { font-size: var(--fs-display-md); }

h1, .h1 {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: var(--fs-h1);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  color: var(--fg-1);
}
h2, .h2 {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  color: var(--fg-1);
}
h3, .h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}
h4, .h4 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

p, .body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--fg-2);
  text-wrap: pretty;
}

.body-lg {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-loose);
}

.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: var(--amber-400);
}

.caption {
  font-size: var(--fs-caption);
  color: var(--fg-3);
}

code, pre, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

a {
  color: var(--amber-400);
  text-decoration-color: rgba(232, 138, 58, 0.4);
  text-underline-offset: 3px;
  transition: color 0.18s ease;
}
a:hover { color: var(--amber-300); }

::selection {
  background: var(--amber-500);
  color: var(--midnight-900);
}