/* ===========================================================================
   Mink — Colors & Type
   Pacific Northwest social events platform. Teal lake water, cream paper,
   amber lantern, mink-fur brown. Warm, outdoorsy, a little playful.
   =========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700;12..96,800&family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500;600&display=swap");

:root {
  /* -------------------------------------------------------------------------
     PALETTE — raw scales
     The brand sits on a deep teal (PNW lake at dusk) against warm cream paper.
     Two accents: amber (lanterns, party-hat warmth) and mink-brown (the mascot).
     ------------------------------------------------------------------------- */

  /* Teal — primary. Goes from near-black depths to misty highlights. */
  --teal-950: #0e2625;
  --teal-900: #14302f;
  --teal-800: #1c403e;
  --teal-700: #1f4e4d;   /* primary */
  --teal-600: #2e5d5b;
  --teal-500: #3a716f;
  --teal-400: #4e8c8a;
  --teal-300: #79aaa8;
  --teal-200: #b3cecd;
  --teal-100: #d8e6e5;
  --teal-50:  #ecf3f2;

  /* Cream / Sand — neutral paper. Warmer than gray, never sterile. */
  --cream-50:  #fefcf7;
  --cream-100: #faf6ee;   /* page */
  --cream-200: #f2ead9;
  --cream-300: #e6dcc4;
  --cream-400: #cdc0a3;
  --cream-500: #a89a7c;
  --cream-600: #7d705a;
  --cream-700: #574d3d;
  --cream-800: #3a3327;
  --cream-900: #211d16;

  /* Amber — warm accent. Lanterns, party hats, primary CTA. */
  --amber-50:  #fdf6e7;
  --amber-100: #fbe9bf;
  --amber-200: #f7d68a;
  --amber-300: #f4c258;
  --amber-400: #efa736;   /* CTA */
  --amber-500: #d98a1f;
  --amber-600: #b66c14;
  --amber-700: #8a4f10;

  /* Mink-brown — mascot fur. Used sparingly for warmth + tertiary accents. */
  --mink-50:  #f6efe6;
  --mink-100: #e8d6bf;
  --mink-200: #c7a37a;
  --mink-300: #9d7a52;
  --mink-400: #6b4a35;   /* fur */
  --mink-500: #4e3424;
  --mink-600: #36241a;

  /* Cedar — supporting cool green (forest, hiking, trails). */
  --cedar-100: #d4e2cf;
  --cedar-300: #87a679;
  --cedar-500: #4f7142;
  --cedar-700: #2f4624;

  /* Glacier — supporting cool blue (water, sky, info). */
  --glacier-100: #d6e7ee;
  --glacier-300: #7eb3c4;
  --glacier-500: #3d7f96;
  --glacier-700: #1f4c5e;

  /* Berry — supporting warm red (errors, urgent, salmonberry). */
  --berry-100: #f5d6d0;
  --berry-300: #d97766;
  --berry-500: #b34a36;
  --berry-700: #7a2c1c;

  /* -------------------------------------------------------------------------
     SEMANTIC TOKENS — these are the names you actually USE in components.
     ------------------------------------------------------------------------- */

  /* Surfaces */
  --bg-page:     var(--cream-100);
  --bg-elevated: var(--cream-50);
  --bg-sunken:   var(--cream-200);
  --bg-inverse:  var(--teal-800);          /* dark sections */
  --bg-tint:     var(--teal-50);           /* subtle teal wash */

  /* Foregrounds */
  --fg-1:        var(--teal-900);          /* primary text */
  --fg-2:        var(--teal-700);          /* secondary text, labels */
  --fg-3:        var(--cream-600);         /* muted, captions */
  --fg-inverse:  var(--cream-50);          /* text on inverse */
  --fg-inverse-2:var(--teal-200);          /* secondary on inverse */
  --fg-link:     var(--teal-700);
  --fg-link-hover: var(--amber-500);

  /* Brand + accent */
  --brand:           var(--teal-700);
  --brand-strong:    var(--teal-800);
  --brand-soft:      var(--teal-100);
  --accent:          var(--amber-400);
  --accent-strong:   var(--amber-500);
  --accent-soft:     var(--amber-100);

  /* Borders / lines */
  --line-1:      var(--cream-300);         /* hairline on cream */
  --line-2:      var(--cream-400);         /* stronger divider */
  --line-inverse:rgba(255,255,255,0.12);   /* on dark */
  --line-focus:  var(--amber-400);

  /* Status */
  --success: var(--cedar-500);
  --success-soft: var(--cedar-100);
  --info: var(--glacier-500);
  --info-soft: var(--glacier-100);
  --warning: var(--amber-500);
  --warning-soft: var(--amber-100);
  --danger: var(--berry-500);
  --danger-soft: var(--berry-100);

  /* -------------------------------------------------------------------------
     TYPE FAMILIES
     - Display: Bricolage Grotesque (variable; warm-but-modern grotesque w/
       optical sizing — gets a little more playful at larger sizes).
     - UI/Body: Geist (clean, even-color, great at small sizes).
     - Mono:    Geist Mono.
     ------------------------------------------------------------------------- */
  --font-display: "Bricolage Grotesque", "Inter", system-ui, sans-serif;
  --font-body:    "Geist", "Inter", system-ui, -apple-system, sans-serif;
  --font-mono:    "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* -------------------------------------------------------------------------
     TYPE SCALE — modular, for marketing pages first (big hero possible).
     Sizes in px so users can override globally if needed.
     ------------------------------------------------------------------------- */
  --fs-display: 88px;     /* hero */
  --fs-h1: 64px;
  --fs-h2: 44px;
  --fs-h3: 30px;
  --fs-h4: 22px;
  --fs-h5: 18px;
  --fs-body-lg: 19px;
  --fs-body: 17px;
  --fs-body-sm: 15px;
  --fs-caption: 13px;
  --fs-micro: 11px;

  --lh-display: 0.95; /* @kind font */
  --lh-heading: 1.08; /* @kind font */
  --lh-snug: 1.25; /* @kind font */
  --lh-body: 1.55; /* @kind font */
  --lh-loose: 1.7; /* @kind font */

  --tracking-display: -0.025em;
  --tracking-heading: -0.015em;
  --tracking-body: 0;
  --tracking-eyebrow: 0.12em;

  /* -------------------------------------------------------------------------
     SPACING — 4px base, geometric.
     ------------------------------------------------------------------------- */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* -------------------------------------------------------------------------
     RADII — soft, friendly, but never bubbly. Pulled from the existing site
     (12px base) and extended.
     ------------------------------------------------------------------------- */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;       /* cards (matches existing) */
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  /* -------------------------------------------------------------------------
     SHADOWS — soft, warm-tinted (never neutral gray on cream). On dark teal
     surfaces, shadow becomes near-black + subtle.
     ------------------------------------------------------------------------- */
  --shadow-xs:  0 1px 2px rgba(20, 48, 47, 0.06);
  --shadow-sm:  0 2px 6px rgba(20, 48, 47, 0.08);
  --shadow-md:  0 6px 18px rgba(20, 48, 47, 0.10);
  --shadow-lg:  0 18px 40px rgba(20, 48, 47, 0.14);
  --shadow-xl:  0 32px 64px rgba(20, 48, 47, 0.18);
  --shadow-inset-line: inset 0 0 0 1px var(--line-1);

  /* -------------------------------------------------------------------------
     MOTION
     ------------------------------------------------------------------------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* @kind other */
  --dur-fast: 120ms; /* @kind other */
  --dur-base: 220ms; /* @kind other */
  --dur-slow: 360ms; /* @kind other */
}

/* ===========================================================================
   BASE TYPOGRAPHY
   =========================================================================== */

html { font-size: 16px; }

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-1);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv11";
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  color: var(--fg-1);
  font-weight: 600;
  letter-spacing: var(--tracking-heading);
  line-height: var(--lh-heading);
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: var(--fs-h1); font-weight: 700; letter-spacing: var(--tracking-display); line-height: var(--lh-display); }
h2 { font-size: var(--fs-h2); font-weight: 600; }
h3 { font-size: var(--fs-h3); font-weight: 600; }
h4 { font-size: var(--fs-h4); font-weight: 600; }
h5 { font-size: var(--fs-h5); font-weight: 600; }

p  { margin: 0; text-wrap: pretty; }

.display { font-family: var(--font-display); font-size: var(--fs-display); font-weight: 700; line-height: var(--lh-display); letter-spacing: var(--tracking-display); }

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--fg-2);
}

.lead {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body);
  color: var(--fg-2);
}

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

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

a {
  color: var(--fg-link);
  text-decoration: underline;
  text-decoration-color: color-mix(in oklab, currentColor 30%, transparent);
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
  transition: color var(--dur-fast) var(--ease-out), text-decoration-color var(--dur-fast) var(--ease-out);
}
a:hover {
  color: var(--fg-link-hover);
  text-decoration-color: currentColor;
}

::selection { background: var(--amber-200); color: var(--teal-900); }

/* Focus ring — amber, with offset on cream */
:focus-visible {
  outline: 2px solid var(--line-focus);
  outline-offset: 2px;
  border-radius: 4px;
}