/* ──────────────────────────────────────────────────────────
   Alp Web Studio — Design Tokens
   Base colors, typography + semantic styles
   ────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&family=DM+Sans:ital,opsz,wght@0,9..40,300..700;1,9..40,300..500&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ─── Alpine (primary blue scale) ─── */
  --alpine-50:  #E8F4F8;
  --alpine-100: #C5E3EE;
  --alpine-200: #9CCFE2;
  --alpine-300: #72BAD6;
  --alpine-400: #55AACB;
  --alpine-500: #3A8CA8;  /* primary */
  --alpine-600: #2E7A96;
  --alpine-700: #1F5E7A;
  --alpine-800: #154B63;
  --alpine-900: #0D3044;

  /* ─── Summit (warm terracotta accent) ─── */
  --summit:       #B8715A;
  --summit-light: #D4917E;
  --summit-dark:  #8A4E3B;
  --glacier:      #F2BBA0;   /* pale peach */

  /* ─── Parchment (warm neutral background) ─── */
  --parchment:        #F5F0EB;
  --parchment-dark:   #EDE8E1;
  --parchment-darker: #E0D9D0;

  /* ─── Abyss (dark navy text / surfaces) ─── */
  --abyss:         #1A2436;
  --abyss-light:   #2C3A50;
  --abyss-lighter: #3D4F68;
  --abyss-deep:    #0E1520;

  /* ─── Ridge (muted slate body text) ─── */
  --ridge:       #5A6478;
  --ridge-light: #8A94A6;

  /* ─── Semantic foreground / background ─── */
  --bg:        var(--parchment);
  --bg-alt:    var(--parchment-dark);
  --bg-deep:   var(--abyss);
  --fg1:       var(--abyss);     /* primary text */
  --fg2:       var(--ridge);     /* secondary / body */
  --fg3:       rgba(26, 36, 54, 0.45); /* tertiary / meta */
  --fg-on-dark: var(--parchment);
  --accent:    var(--alpine-500);
  --accent-warm: var(--summit);

  /* ─── Border / divider ─── */
  --border-soft:  rgba(26, 36, 54, 0.08);
  --border-med:   rgba(26, 36, 54, 0.15);
  --border-strong:rgba(26, 36, 54, 0.30);
  --border-dark:  rgba(245, 240, 235, 0.10);

  /* ─── Shadow system ─── */
  --shadow-sm: 0 1px 0 rgba(26, 36, 54, 0.03);
  --shadow-md: 0 4px 20px -8px rgba(26, 36, 54, 0.20);
  --shadow-lg: 0 40px 80px -30px rgba(26, 36, 54, 0.35);

  /* ─── Radius ─── */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 9999px;

  /* ─── Font families ─── */
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body:    'DM Sans', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* ─── Type scale (matches Tailwind config) ─── */
  --fs-colossus: clamp(5rem, 18vw, 18rem);
  --fs-mega:     clamp(4rem, 12vw, 11rem);
  --fs-display-xl: clamp(3.5rem, 7vw, 6rem);
  --fs-display-lg: clamp(2.75rem, 5vw, 4.5rem);
  --fs-display-md: clamp(2rem, 3.5vw, 3rem);
  --fs-display-sm: clamp(1.5rem, 2.5vw, 2rem);
  --fs-body-lg:  1.08rem;
  --fs-body:     1rem;
  --fs-body-sm:  0.92rem;
  --fs-meta:     0.82rem;
  --fs-label:    0.68rem;  /* mono label */

  /* ─── Easing / motion ─── */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-mask:   cubic-bezier(0.76, 0, 0.24, 1);
  --ease-spring: cubic-bezier(0.2, 0.9, 0.3, 1.3);
  --dur-fast:   0.2s;
  --dur-med:    0.4s;
  --dur-slow:   0.7s;
  --dur-reveal: 1.05s;

  /* ─── Spacing (informal, grid-aligned) ─── */
  --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;

  /* ─── Container widths ─── */
  --w-site: 1280px;
  --w-wide: 1680px;
  --w-prose: 68ch;
}

/* ──────────────────────────────────────────────────────────
   Base element styles — use these classes as semantic type
   ────────────────────────────────────────────────────────── */

body, .body {
  font-family: var(--font-body);
  background-color: var(--bg);
  color: var(--fg1);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.h-mega,
.h-display-xl {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.018em;
  line-height: 1.0;
  color: var(--fg1);
}
.h-mega { font-size: var(--fs-mega); letter-spacing: -0.022em; line-height: 0.96; }
.h-display-xl { font-size: var(--fs-display-xl); }

.h1, h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-display-lg);
  line-height: 1.06;
  letter-spacing: -0.014em;
  color: var(--fg1);
}

.h2, h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-display-md);
  line-height: 1.1;
  letter-spacing: -0.012em;
  color: var(--fg1);
}

.h3, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-display-sm);
  line-height: 1.22;
  letter-spacing: -0.01em;
  color: var(--fg1);
}

.p, p {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--fg2);
}

.lead {
  font-family: var(--font-body);
  font-size: var(--fs-body-lg);
  line-height: 1.6;
  color: var(--fg2);
  max-width: 42ch;
}

/* Italic accent */
.accent-italic {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  color: var(--summit);
}

/* Mono label — all-caps tracked small text used as meta */
.mono-label {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.16em;
}

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

/* ─── Button primitives ─── */
.btn {
  font-family: var(--font-display);
  font-weight: 600;
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: all var(--dur-med) var(--ease-out);
  cursor: pointer;
  border: none;
}
.btn-primary {
  background: var(--abyss);
  color: var(--parchment);
  padding: 0.625rem 1.5rem 0.625rem 0.5rem;
  font-size: 0.95rem;
}
.btn-primary:hover { background: var(--alpine-700); }
.btn-ghost {
  background: transparent;
  color: var(--fg1);
  border: 1px solid var(--border-strong);
  padding: 0.75rem 1.5rem;
  font-size: 0.875rem;
}
.btn-ghost:hover { background: var(--abyss); color: var(--parchment); }

/* ─── Link underline (animated) ─── */
.link-underline {
  position: relative;
  display: inline-block;
}
.link-underline::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0;
  width: 0; height: 1.5px;
  background: currentColor;
  transition: width 0.35s var(--ease-out);
}
.link-underline:hover::after { width: 100%; }

/* ─── Spotlight accent background ─── */
.spotlight-alpine {
  background:
    radial-gradient(60% 50% at 50% 0%, rgba(58,140,168,0.25) 0%, transparent 70%),
    radial-gradient(40% 30% at 100% 100%, rgba(184,113,90,0.18) 0%, transparent 70%);
}

/* ─── Grid line backgrounds ─── */
.bg-grid-light {
  background-image:
    linear-gradient(to right, rgba(26,36,54,0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(26,36,54,0.06) 1px, transparent 1px);
  background-size: 80px 80px;
}
.bg-grid-dark {
  background-image:
    linear-gradient(to right, rgba(245,240,235,0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(245,240,235,0.05) 1px, transparent 1px);
  background-size: 80px 80px;
}

/* ─── Text gradients ─── */
.text-gradient-alpine {
  background: linear-gradient(135deg, var(--alpine-500) 0%, var(--alpine-700) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.text-gradient-sky {
  background: linear-gradient(135deg, var(--alpine-100) 0%, var(--alpine-400) 40%, var(--alpine-700) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}