/* ============================================================
   Puntarenas FC — Design Tokens
   "Tiburones del Puerto" — coastal, sporty, editorial
   ============================================================ */

:root {
  /* Brand */
  --pfc-orange: #F37021;
  --pfc-orange-hot: #FF5A0A;
  --pfc-orange-deep: #C8501A;
  --pfc-black: #0A0A0A;
  --pfc-ink: #16191D;
  --pfc-white: #FFFFFF;

  /* Coastal accents */
  --ocean-900: #0A2540;
  --ocean-700: #0A3A5C;
  --ocean-500: #1F6A9C;
  --ocean-300: #6DAED1;
  --foam-100: #E8F1F5;
  --foam-50:  #F4F8FA;
  --sand:     #F5EFE6;

  /* Neutrals */
  --gray-950: #0D0F12;
  --gray-900: #16191D;
  --gray-800: #22272E;
  --gray-700: #353B43;
  --gray-600: #555C66;
  --gray-500: #7A828C;
  --gray-400: #A8AEB6;
  --gray-300: #CDD2D7;
  --gray-200: #E3E6EA;
  --gray-100: #F1F3F5;
  --gray-50:  #F8F9FB;

  /* Semantic (light mode default) */
  --bg:        var(--gray-50);
  --bg-alt:    #FFFFFF;
  --bg-inset:  var(--foam-50);
  --surface:   #FFFFFF;
  --surface-2: var(--gray-100);
  --ink:       var(--pfc-ink);
  --ink-dim:   var(--gray-600);
  --ink-mute:  var(--gray-500);
  --line:      var(--gray-200);
  --line-strong: var(--gray-300);
  --accent:    var(--pfc-orange);
  --accent-hot: var(--pfc-orange-hot);
  --on-accent: #FFFFFF;
  --ocean:     var(--ocean-700);

  /* Fonts */
  --font-display: 'Bebas Neue', 'Oswald', 'Arial Narrow', sans-serif;
  --font-condensed: 'Barlow Condensed', 'Oswald', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* Type scale */
  --fs-xs: 11px;
  --fs-sm: 13px;
  --fs-base: 15px;
  --fs-md: 17px;
  --fs-lg: 20px;
  --fs-xl: 24px;
  --fs-2xl: 32px;
  --fs-3xl: 44px;
  --fs-4xl: 64px;
  --fs-5xl: 88px;
  --fs-6xl: 128px;

  /* Spacing */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;

  /* Radii */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 14px;
  --r-xl: 22px;
  --r-pill: 999px;

  /* Shadows */
  --sh-sm: 0 1px 2px rgba(12,18,28,.06), 0 1px 1px rgba(12,18,28,.04);
  --sh-md: 0 6px 20px -6px rgba(12,18,28,.15), 0 2px 6px rgba(12,18,28,.06);
  --sh-lg: 0 24px 48px -16px rgba(12,18,28,.22), 0 6px 16px rgba(12,18,28,.08);
  --sh-glow-orange: 0 12px 40px -12px rgba(243,112,33,.55);

  /* Misc */
  --maxw: 1280px;
  --maxw-wide: 1440px;
  --nav-h: 72px;
  --tick-h: 36px;
}

[data-theme="dark"] {
  --bg:        #07090C;
  --bg-alt:    #0D1117;
  --bg-inset:  #11161C;
  --surface:   #11161C;
  --surface-2: #181E26;
  --ink:       #F1F3F5;
  --ink-dim:   #A8AEB6;
  --ink-mute:  #7A828C;
  --line:      #22272E;
  --line-strong: #353B43;
  --foam-50:   #0F1418;
  --foam-100:  #141A21;
  --ocean:     #2A7FBA;
}

/* ---------- Base ---------- */
*,*::before,*::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.55;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "cv11","ss01";
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
img { max-width: 100%; display: block; }

h1,h2,h3,h4 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0.01em;
  margin: 0;
  line-height: 0.95;
  text-transform: uppercase;
}
.display-hero  { font-size: clamp(56px, 9vw, var(--fs-6xl)); letter-spacing: -0.01em; }
.display-lg    { font-size: clamp(44px, 6vw, var(--fs-5xl)); }
.display-md    { font-size: clamp(32px, 4.5vw, var(--fs-4xl)); }
.display-sm    { font-size: clamp(24px, 3vw, var(--fs-3xl)); }

.kicker {
  font-family: var(--font-condensed);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: var(--fs-sm);
  color: var(--accent);
}
.eyebrow {
  font-family: var(--font-condensed);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 12px;
  color: var(--ink-mute);
}

/* ---------- Helpers ---------- */
.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--sp-5); }
.container-wide { width: 100%; max-width: var(--maxw-wide); margin: 0 auto; padding: 0 var(--sp-5); }

.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  font-family: var(--font-condensed);
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  color: var(--ink-dim);
}
.pill-accent  { background: var(--accent); color: var(--on-accent); }
.pill-ocean   { background: var(--ocean); color: #fff; }
.pill-outline { background: transparent; border: 1px solid var(--line-strong); }
.pill-dark    { background: var(--pfc-black); color: #fff; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 18px;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font-family: var(--font-condensed);
  font-weight: 600;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: transform .15s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-hot); transform: translateY(-1px); }
.btn-dark { background: var(--pfc-black); color: #fff; }
.btn-dark:hover { background: #000; transform: translateY(-1px); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn-ghost:hover { background: var(--surface-2); }
.btn-sm { height: 36px; padding: 0 14px; font-size: 13px; }

/* Tooth / chevron divider */
.tooth-band {
  height: 14px;
  background:
    linear-gradient(135deg, var(--pfc-black) 25%, transparent 25%) 0 0/20px 20px,
    linear-gradient(225deg, var(--pfc-black) 25%, transparent 25%) 0 0/20px 20px,
    var(--accent);
}

.stripe-bg {
  background-image:
    repeating-linear-gradient(135deg, rgba(255,255,255,.06) 0 2px, transparent 2px 18px);
}

/* Wave SVG divider class */
.wave-divider { display: block; width: 100%; height: 48px; }

/* Link-arrow */
.link-arrow {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-condensed);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 13px;
  color: var(--accent);
}
.link-arrow:hover { text-decoration: underline; }

/* Card base */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}

/* Tabular numbers for scores */
.num { font-variant-numeric: tabular-nums; }

/* Scrollbar polish (webkit) */
::-webkit-scrollbar { height: 10px; width: 10px; }
::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: 8px; }
::-webkit-scrollbar-track { background: transparent; }