/* =========================================================================
   TRI TEAM LUTRY — Design Tokens
   Colors + Typography
   ========================================================================= */

/* Google Fonts : chargees par <link> dans index.html (plus rapide qu'un @import) */

:root {
  /* ---------- BRAND CORE ---------- */
  /* Kit 2025 — palette de la trifonction. Vin profond → framboise → rose pale. */
  --prune-900: #34060E;   /* near-black wine, footer + headings */
  --prune-800: #590B18;
  --prune-700: #8C1024;   /* primary — crimson du maillot */
  --prune-600: #B3122D;   /* mid crimson */
  --prune-500: #D92342;   /* framboise vif — coeur du degrade */
  --prune-400: #E9657B;   /* rose — fin du degrade */
  --prune-300: #F39DAC;
  --prune-200: #F9CAD2;
  --prune-100: #FDECEF;   /* tint background */

  /* Swiss Red — historic logo colour. Used as secondary accent. */
  --swiss-red: #E30613;
  --swiss-red-dark: #B5050F;

  /* Pure Swiss neutrals — high contrast, sober */
  --ink-1000: #0A0A0B;    /* near-black, body */
  --ink-900: #161618;
  --ink-800: #2B2B2F;
  --ink-700: #4A4A52;
  --ink-500: #7B7B85;     /* secondary text */
  --ink-400: #A8A8B0;
  --ink-300: #D0D0D5;
  --ink-200: #E5E5E8;     /* hairline borders */
  --ink-100: #F2F2F4;     /* surface alt */
  --ink-50:  #FAFAFB;     /* surface */
  --paper:   #FFFFFF;

  /* ---------- SEMANTIC ROLES ---------- */
  --bg:           var(--paper);
  --bg-alt:       var(--ink-50);
  --bg-tint:      var(--prune-100);
  --bg-inverse:   var(--ink-1000);

  --fg-1:         var(--ink-1000);   /* primary text */
  --fg-2:         var(--ink-700);    /* secondary text */
  --fg-3:         var(--ink-500);    /* muted / metadata */
  --fg-inverse:   var(--paper);

  --accent:       var(--prune-700);  /* primary brand */
  --accent-hover: var(--prune-800);
  --accent-soft:  var(--prune-100);
  --accent-ink:   var(--prune-900);  /* text on tinted bg */

  --signal:       var(--swiss-red);  /* "Swiss cross" / urgent accent */

  --border:       var(--ink-200);
  --border-strong:var(--ink-300);
  --hairline:     rgba(10, 10, 11, 0.08);

  /* ---------- TYPOGRAPHY FAMILIES ---------- */
  /* Display: condensed italic — matches the logo's sporty/aerodynamic feel */
  --font-display: "Saira Condensed", "Oswald", "Arial Narrow", sans-serif;
  /* UI Display: tight neo-grotesque for headings */
  --font-heading: "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;
  /* Body: clean Swiss-influenced grotesque */
  --font-body:    "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  /* Mono: data, times, distances */
  --font-mono:    ui-monospace, "JetBrains Mono", "SF Mono", Menlo, monospace;

  /* ---------- TYPE SCALE ---------- */
  --fs-hero:    clamp(56px, 9vw, 132px);   /* big italic display, kit-style */
  --fs-display: clamp(40px, 6vw, 88px);
  --fs-h1:      clamp(32px, 4vw, 56px);
  --fs-h2:      clamp(26px, 3vw, 40px);
  --fs-h3:      22px;
  --fs-h4:      18px;
  --fs-body:    16px;
  --fs-small:   14px;
  --fs-micro:   12px;

  --lh-tight:   0.92;
  --lh-snug:    1.1;
  --lh-normal:  1.5;
  --lh-relaxed: 1.65;

  --tracking-tight:   -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.02em;
  --tracking-wider:   0.08em;
  --tracking-widest:  0.16em;

  /* ---------- SPACING (4px 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;

  /* ---------- RADII ---------- */
  --radius-none: 0;
  --radius-sm:   2px;     /* Swiss sober — small radii */
  --radius-md:   4px;
  --radius-lg:   8px;
  --radius-pill: 999px;

  /* ---------- ELEVATION ---------- */
  --shadow-1: 0 1px 2px rgba(10,10,11,0.04), 0 1px 1px rgba(10,10,11,0.04);
  --shadow-2: 0 4px 12px rgba(10,10,11,0.06), 0 1px 2px rgba(10,10,11,0.04);
  --shadow-3: 0 12px 32px rgba(10,10,11,0.10), 0 2px 6px rgba(10,10,11,0.06);
  --shadow-prune: 0 12px 32px rgba(140, 16, 36, 0.22);

  /* ---------- MOTION ---------- */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-sport:  cubic-bezier(0.16, 1, 0.3, 1);   /* sharp out, settled */
  --dur-fast:    120ms;
  --dur-base:    200ms;
  --dur-slow:    400ms;
}

/* =========================================================================
   SEMANTIC TYPE — drop-in classes / element styles
   ========================================================================= */

html { color: var(--fg-1); font-family: var(--font-body); }
body { font-size: var(--fs-body); line-height: var(--lh-normal); }

.t-hero {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 900;
  font-size: var(--fs-hero);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
}

.t-display {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
}

h1, .t-h1 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-h1);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
}

h2, .t-h2 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
}

h3, .t-h3 {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
}

h4, .t-h4 {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
}

p, .t-body { font-size: var(--fs-body); line-height: var(--lh-normal); color: var(--fg-1); }
.t-body-2 { font-size: var(--fs-body); line-height: var(--lh-normal); color: var(--fg-2); }
.t-small  { font-size: var(--fs-small); line-height: var(--lh-normal); color: var(--fg-2); }
.t-micro  { font-size: var(--fs-micro); line-height: var(--lh-normal); color: var(--fg-3); }

.t-eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--accent);
}

.t-mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* Italic compressed display — the "kit" voice */
.t-kit {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-tight);
}

/* Swiss cross — reusable inline mark */
.swiss-cross {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--paper);
  color: var(--swiss-red);
  width: 1em; height: 1em;
  position: relative;
  vertical-align: middle;
}
.swiss-cross::before,
.swiss-cross::after {
  content: ""; position: absolute; background: var(--swiss-red);
}
.swiss-cross::before { width: 60%; height: 18%; }
.swiss-cross::after  { width: 18%; height: 60%; }