/* ============================================================
   Awilix design system v2
   Systeme a surfaces inversables : chaque section declare sa
   surface, les composants lisent des variables semantiques et
   s'adaptent sans etre dupliques.
   ============================================================ */

/* ---------- Polices ---------- */

@font-face {
  font-family: "Satoshi";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/Satoshi-Regular.woff2") format("woff2"),
       url("/static/fonts/Satoshi-Regular.woff") format("woff");
}
@font-face {
  font-family: "Satoshi";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/static/fonts/Satoshi-Medium.woff2") format("woff2"),
       url("/static/fonts/Satoshi-Medium.woff") format("woff");
}
@font-face {
  font-family: "Satoshi";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/static/fonts/Satoshi-Bold.woff2") format("woff2"),
       url("/static/fonts/Satoshi-Bold.woff") format("woff");
}
@font-face {
  font-family: "Clash";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/ClashDisplay-Regular.woff2") format("woff2"),
       url("/static/fonts/ClashDisplay-Regular.woff") format("woff");
}
@font-face {
  font-family: "Clash";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/static/fonts/ClashDisplay-Medium.woff2") format("woff2"),
       url("/static/fonts/ClashDisplay-Medium.woff") format("woff");
}
@font-face {
  font-family: "Clash";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/static/fonts/ClashDisplay-Semibold.woff2") format("woff2"),
       url("/static/fonts/ClashDisplay-Semibold.woff") format("woff");
}
@font-face {
  font-family: "Clash";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/static/fonts/ClashDisplay-Bold.woff2") format("woff2"),
       url("/static/fonts/ClashDisplay-Bold.woff") format("woff");
}

/* ============================================================
   1. Palette de marque (valeurs brutes, jamais utilisees
      directement par les composants)
   ============================================================ */

:root {
  --brand-ink:        #17171c;
  --brand-ink-2:      #1e1e25;
  --brand-ink-3:      #26262f;
  --brand-purple:     #8866cc;
  --brand-purple-lit: #a98ce0;
  --brand-purple-pale:#e0d6f5;
  --brand-yellow:     #fffca8;
  --brand-magenta:    #cc3366;
  --brand-white:      #ffffff;
  --brand-sand:       #faf8f6;
  --brand-sand-2:     #f2eeea;

  /* ---------- Typographie ---------- */
  --font-display: "Clash", "Satoshi", system-ui, sans-serif;
  --font-body:    "Satoshi", system-ui, -apple-system, sans-serif;

  --fs-display: clamp(2.75rem, 6.2vw, 5rem);   /* h1 hero */
  --fs-h2:      clamp(2rem, 3.6vw, 3.25rem);
  --fs-h3:      1.3125rem;
  --fs-h4:      1.0625rem;
  --fs-lead:    clamp(1.0625rem, 1.35vw, 1.1875rem);
  --fs-body:    1.0625rem;
  --fs-sm:      0.9375rem;
  --fs-xs:      0.8125rem;
  --fs-eyebrow: 0.8125rem;

  --lh-display: 1.02;
  --lh-heading: 1.12;
  --lh-body:    1.65;

  --tracking-display: -0.03em;
  --tracking-heading: -0.02em;
  --tracking-eyebrow: 0.12em;

  /* ---------- Rythme ---------- */
  --container:        1240px;
  --container-mid:    960px;
  --container-narrow: 760px;
  --gutter:           clamp(1.25rem, 4vw, 2.5rem);
  --section-pad:      clamp(4.5rem, 7vw, 7rem);
  /* Espace total reserve en haut de page : barre flottante + son retrait */
  --header-h:         80px;

  /* ---------- Formes ---------- */
  --radius-sm: 8px;
  --radius:    14px;
  --radius-lg: 22px;
  --radius-xl: 30px;
  --radius-pill: 999px;

  /* ---------- Mouvement ---------- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur:  0.5s;
}

/* ============================================================
   2. Variables semantiques : la surface CLAIRE est le defaut.
      Tout composant lit --surface / --fg / --fg-muted / --line
      / --card / --accent, jamais la palette brute.
   ============================================================ */

:root,
.surface--light {
  --surface:      var(--brand-white);
  --surface-2:    var(--brand-sand);
  --fg:           var(--brand-ink);
  --fg-strong:    var(--brand-ink);
  --fg-muted:     #63636e;
  --line:         #e7e3ee;
  --line-strong:  #d8d2e4;
  --card:         var(--brand-white);
  --card-2:       var(--brand-sand);
  --accent:       var(--brand-purple);
  --accent-soft:  #f1ecfa;
  --accent-line:  #d9cdf0;
  --shadow: 0 1px 2px rgba(23, 23, 28, 0.04), 0 8px 28px -12px rgba(23, 23, 28, 0.12);
  --shadow-lift: 0 2px 4px rgba(23, 23, 28, 0.05), 0 22px 48px -20px rgba(23, 23, 28, 0.22);
}

.surface--sand {
  --surface:      var(--brand-sand);
  --surface-2:    var(--brand-sand-2);
  --fg:           var(--brand-ink);
  --fg-strong:    var(--brand-ink);
  --fg-muted:     #63636e;
  --line:         #e5e0da;
  --line-strong:  #d6cfc6;
  --card:         var(--brand-white);
  --card-2:       #fffdfb;
  --accent:       var(--brand-purple);
  --accent-soft:  #efe9fa;
  --accent-line:  #d9cdf0;
  --shadow: 0 1px 2px rgba(23, 23, 28, 0.04), 0 8px 28px -14px rgba(23, 23, 28, 0.14);
  --shadow-lift: 0 2px 4px rgba(23, 23, 28, 0.05), 0 22px 48px -20px rgba(23, 23, 28, 0.2);
}

.surface--dark {
  --surface:      var(--brand-ink);
  --surface-2:    var(--brand-ink-2);
  --fg:           #f4f2f8;
  --fg-strong:    var(--brand-white);
  --fg-muted:     #a4a1b0;
  --line:         rgba(255, 255, 255, 0.1);
  --line-strong:  rgba(255, 255, 255, 0.18);
  --card:         rgba(255, 255, 255, 0.035);
  --card-2:       rgba(255, 255, 255, 0.06);
  --accent:       var(--brand-purple-lit);
  --accent-soft:  rgba(169, 140, 224, 0.14);
  --accent-line:  rgba(169, 140, 224, 0.34);
  --shadow: none;
  --shadow-lift: 0 24px 60px -28px rgba(0, 0, 0, 0.75);
}

.surface--yellow {
  --surface:      var(--brand-yellow);
  --surface-2:    #fffde0;
  --fg:           var(--brand-ink);
  --fg-strong:    var(--brand-ink);
  --fg-muted:     #55552f;
  --line:         rgba(23, 23, 28, 0.14);
  --line-strong:  rgba(23, 23, 28, 0.24);
  --card:         rgba(255, 255, 255, 0.5);
  --card-2:       rgba(255, 255, 255, 0.7);
  --accent:       #6b4ba8;
  --accent-soft:  rgba(255, 255, 255, 0.55);
  --accent-line:  rgba(23, 23, 28, 0.2);
  --shadow: 0 1px 2px rgba(23, 23, 28, 0.05), 0 10px 30px -16px rgba(23, 23, 28, 0.2);
  --shadow-lift: 0 2px 4px rgba(23, 23, 28, 0.06), 0 24px 50px -22px rgba(23, 23, 28, 0.28);
}