/* =========================================================
   ASSA ESCALADE — Colors & Type
   Association d'escalade Antibes
   ========================================================= */

/* ---------- Webfonts ---------- */
/* Display: Anton — bold condensed, echoes the "ASSA" block lettering
   UI/Body: Archivo — geometric humanist, clean French sportswear feel
   Mono:    JetBrains Mono — for stats, scores, timer readouts        */
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Archivo:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* =========================================================
     COLORS — the palette comes from the logo:
       black "rock" face, Mediterranean blue water, chalk white
     ========================================================= */

  /* Brand core */
  --mer:          #2BA8D6;   /* primary — the Mediterranean wave blue from the logo */
  --mer-deep:     #1A82AB;   /* darker blue for hover / pressed */
  --mer-bright:   #5BC1E5;   /* hover/highlight */
  --mer-foam:     #D9F0F8;   /* tints / surfaces */

  --rock:         #0E1418;   /* "rock face" near-black */
  --rock-2:       #1C242B;   /* card backgrounds on dark mode */
  --rock-3:       #2E3940;   /* muted dark surface */

  --chalk:        #F5F2EA;   /* warm off-white — climber's chalk */
  --chalk-warm:   #EAE3D2;   /* slightly toasted */
  --paper:        #FFFFFF;

  /* Accents (used sparingly) */
  --sunset:       #FF7350;   /* Côte d'Azur sunset — for CTAs that aren't blue */
  --signal:       #FFC247;   /* warning / belay tape */
  --foliage:      #2D7A53;   /* pine green — only for nature/eco contexts */

  /* Neutral scale (cool grey, leans blue) */
  --neutral-50:   #F6F8FA;
  --neutral-100:  #ECEFF3;
  --neutral-200:  #DCE2E8;
  --neutral-300:  #B9C3CD;
  --neutral-400:  #8A96A3;
  --neutral-500:  #5F6A77;
  --neutral-600:  #404B57;
  --neutral-700:  #2A333D;
  --neutral-800:  #18202A;
  --neutral-900:  #0E1418;

  /* Semantic — light theme defaults */
  --bg:           var(--chalk);
  --surface:      var(--paper);
  --surface-2:   #FBF9F4;
  --fg-1:         var(--rock);          /* primary text */
  --fg-2:         var(--neutral-600);   /* secondary text */
  --fg-3:         var(--neutral-400);   /* tertiary / captions */
  --fg-inverse:   var(--paper);

  --border:       var(--neutral-200);
  --border-strong:var(--neutral-300);
  --divider:      var(--neutral-100);

  --link:         var(--mer-deep);
  --link-hover:   var(--rock);

  --success:      #2D7A53;
  --warning:      #C8870F;
  --danger:       #C8412E;

  /* =========================================================
     TYPOGRAPHY
     ========================================================= */
  --font-display: 'Anton', 'Archivo Black', 'Impact', sans-serif;
  --font-sans:    'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Type scale — display side leans condensed + LOUD;
     body side stays compact and humanist */
  --fs-display-xl: clamp(72px, 9vw, 140px);
  --fs-display-l:  clamp(56px, 7vw, 96px);
  --fs-display-m:  clamp(40px, 5vw, 64px);
  --fs-h1:         clamp(32px, 4vw, 48px);
  --fs-h2:         clamp(26px, 3vw, 36px);
  --fs-h3:         22px;
  --fs-h4:         18px;
  --fs-body:       16px;
  --fs-small:      14px;
  --fs-micro:      12px;

  --lh-display:    0.92;
  --lh-tight:      1.1;
  --lh-snug:       1.25;
  --lh-body:       1.55;

  --tracking-display:  -0.01em;
  --tracking-eyebrow:  0.18em;   /* for the wide-tracked "ESCALADE" style label */
  --tracking-button:   0.06em;

  /* =========================================================
     SHAPE & MOTION
     ========================================================= */
  --radius-xs:  4px;
  --radius-sm:  8px;
  --radius-md:  12px;
  --radius-lg:  20px;
  --radius-xl:  28px;
  --radius-pill: 999px;

  --shadow-1: 0 1px 2px rgba(14, 20, 24, 0.06), 0 1px 1px rgba(14, 20, 24, 0.04);
  --shadow-2: 0 4px 12px rgba(14, 20, 24, 0.08), 0 2px 4px rgba(14, 20, 24, 0.04);
  --shadow-3: 0 12px 32px rgba(14, 20, 24, 0.14), 0 4px 8px rgba(14, 20, 24, 0.06);
  --shadow-blue: 0 8px 24px rgba(43, 168, 214, 0.32);

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

  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in:    cubic-bezier(0.55, 0, 0.68, 0.20);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:   140ms;
  --dur-base:   220ms;
  --dur-slow:   400ms;
}

/* =========================================================
   SEMANTIC TYPE CLASSES
   ========================================================= */
.eyebrow {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--mer-deep);
}

.display-xl, h1.display, .h-display {
  font-family: var(--font-display);
  font-weight: 400;            /* Anton has one weight */
  font-size: var(--fs-display-xl);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  color: var(--fg-1);
}

.display-l { font-family: var(--font-display); font-size: var(--fs-display-l); line-height: var(--lh-display); text-transform: uppercase; letter-spacing: var(--tracking-display); }
.display-m { font-family: var(--font-display); font-size: var(--fs-display-m); line-height: var(--lh-display); text-transform: uppercase; letter-spacing: var(--tracking-display); }

h1, .h1 { font-family: var(--font-sans); font-weight: 800; font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: -0.01em; color: var(--fg-1); }
h2, .h2 { font-family: var(--font-sans); font-weight: 700; font-size: var(--fs-h2); line-height: var(--lh-snug); color: var(--fg-1); }
h3, .h3 { font-family: var(--font-sans); font-weight: 700; 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-weight: 400; font-size: var(--fs-body);  line-height: var(--lh-body); color: var(--fg-1); }
.small    { font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-small); line-height: 1.45; color: var(--fg-2); }
.caption  { font-family: var(--font-sans); font-weight: 500; font-size: var(--fs-micro); line-height: 1.4;  color: var(--fg-3); }
code, .mono { font-family: var(--font-mono); font-size: 0.95em; }

a { color: var(--link); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; transition: color var(--dur-fast) var(--ease-out); }
a:hover { color: var(--link-hover); }

/* Utility: the iconic wide-tracked all-caps label (think "ESCALADE" on the logo) */
.label-wide {
  font-family: var(--font-sans);
  font-weight: 700;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  font-size: var(--fs-small);
}