/* ============================================================
   Agence Bulles — Colors & Type tokens
   "Concentrez-vous sur le plus important, nous nous occupons du reste."
   ============================================================ */

@font-face {
  font-family: "Product Sans";
  src: url("../fonts/ProductSans-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Product Sans";
  src: url("../fonts/ProductSans-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------- Brand palette (from Agence Bulles HEX.png) ---------- */
  --ab-ink:        #1A1A1A;  /* near-black, primary text & "agence" wordmark */
  --ab-pink:       #D4145A;  /* signature magenta — "bulles" wordmark, primary accent */
  --ab-red:        #DD2525;  /* secondary, alerts, energy */
  --ab-coral:      #E84A4A;  /* tertiary warm, soft accents */
  --ab-teal:       #134242;  /* deep teal — calm, trust, dark surfaces */
  --ab-mint:       #C2E8E8;  /* pale mint — soft surface, breathing room */

  /* ---------- Neutrals (derived) ---------- */
  --ab-white:      #FFFFFF;
  --ab-paper:      #FAFAFA;
  --ab-fog:        #F2F2F2;
  --ab-line:       #E5E5E5;
  --ab-mute:       #B8B8B8;
  --ab-slate:      #6B6B6B;
  --ab-graphite:   #2E2E2E;

  /* ---------- Semantic — surfaces ---------- */
  --bg:            var(--ab-white);
  --bg-soft:       var(--ab-paper);
  --bg-muted:      var(--ab-fog);
  --bg-mint:       var(--ab-mint);
  --bg-ink:        var(--ab-ink);
  --bg-teal:       var(--ab-teal);
  --bg-pink:       var(--ab-pink);

  /* ---------- Semantic — foreground ---------- */
  --fg1:           var(--ab-ink);       /* primary text */
  --fg2:           var(--ab-graphite);  /* secondary text */
  --fg3:           var(--ab-slate);     /* muted text, captions */
  --fg-mute:       var(--ab-mute);      /* placeholders, hints */
  --fg-on-dark:    var(--ab-white);
  --fg-on-pink:    var(--ab-white);

  /* ---------- Semantic — accents ---------- */
  --accent:        var(--ab-pink);
  --accent-hover:  #B80F4D;             /* pink darkened ~8% */
  --accent-press:  #9B0B40;             /* pink darkened ~16% */
  --accent-soft:   #FBE4ED;             /* pink tinted bg */
  --accent-2:      var(--ab-teal);
  --accent-2-soft: var(--ab-mint);

  /* ---------- Semantic — status ---------- */
  --danger:        var(--ab-red);
  --warning:       #E89B2A;             /* derived warm amber */
  --success:       #1F8A5C;             /* derived from teal family */
  --info:          var(--ab-teal);

  /* ---------- Borders & lines ---------- */
  --border:        var(--ab-line);
  --border-strong: #D0D0D0;
  --border-ink:    var(--ab-ink);

  /* ---------- Radius ---------- */
  --radius-xs:  4px;
  --radius-sm:  8px;
  --radius-md:  12px;
  --radius-lg:  20px;
  --radius-xl:  28px;
  --radius-pill: 999px;

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

  /* ---------- Shadows (soft, low-key) ---------- */
  --shadow-xs: 0 1px 2px rgba(26,26,26,0.06);
  --shadow-sm: 0 2px 6px rgba(26,26,26,0.06), 0 1px 2px rgba(26,26,26,0.04);
  --shadow-md: 0 8px 20px rgba(26,26,26,0.08), 0 2px 6px rgba(26,26,26,0.04);
  --shadow-lg: 0 20px 48px rgba(26,26,26,0.12), 0 6px 16px rgba(26,26,26,0.06);
  --shadow-pink: 0 12px 28px rgba(212,20,90,0.28);
  --shadow-teal: 0 12px 28px rgba(19,66,66,0.24);

  /* ---------- Typography ---------- */
  --font-sans:    "Product Sans", "Helvetica Neue", Arial, system-ui, sans-serif;
  --font-display: "Product Sans", "Helvetica Neue", Arial, system-ui, sans-serif;
  --font-mono:    ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --fw-regular: 400;
  --fw-bold:    700;

  /* fluid-ish sizes; whole-number friendly */
  --fs-display: clamp(56px, 7vw, 96px);
  --fs-h1:      clamp(40px, 5vw, 64px);
  --fs-h2:      clamp(32px, 3.6vw, 44px);
  --fs-h3:      28px;
  --fs-h4:      22px;
  --fs-lead:    20px;
  --fs-body:    17px;
  --fs-small:   15px;
  --fs-caption: 13px;
  --fs-eyebrow: 12px;

  --lh-tight:   1.05;
  --lh-snug:    1.18;
  --lh-normal:  1.5;
  --lh-loose:   1.65;

  --tr-tight:   -0.02em;
  --tr-snug:    -0.01em;
  --tr-normal:  0;
  --tr-wide:    0.06em;

  /* ---------- Motion ---------- */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-inout:  cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:    140ms;
  --dur-base:    220ms;
  --dur-slow:    360ms;
}

/* ---------- Element defaults ---------- */
html, body {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--fg1);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .h1, h2, .h2, h3, .h3, h4, .h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  color: var(--fg1);
  letter-spacing: var(--tr-tight);
  line-height: var(--lh-tight);
  margin: 0;
  text-wrap: balance;
}
.display { font-size: var(--fs-display); line-height: var(--lh-tight); letter-spacing: var(--tr-tight); font-weight: var(--fw-bold); }
h1, .h1 { font-size: var(--fs-h1); }
h2, .h2 { font-size: var(--fs-h2); line-height: var(--lh-snug); }
h3, .h3 { font-size: var(--fs-h3); letter-spacing: var(--tr-snug); }
h4, .h4 { font-size: var(--fs-h4); letter-spacing: var(--tr-snug); }

p, .body { font-size: var(--fs-body); line-height: var(--lh-loose); color: var(--fg2); margin: 0; text-wrap: pretty; }
.lead    { font-size: var(--fs-lead); line-height: var(--lh-normal); color: var(--fg2); }
.small   { font-size: var(--fs-small); }
.caption { font-size: var(--fs-caption); color: var(--fg3); }
.eyebrow {
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--tr-wide);
  color: var(--accent);
}

a { color: var(--accent); text-decoration: none; transition: color var(--dur-fast) var(--ease-out); }
a:hover { color: var(--accent-hover); }

code, pre, kbd { font-family: var(--font-mono); font-size: 0.94em; }

/* ---------- Signature wordmark utility ----------
   Two-tone "agence / bulles" look used in the logo. */
.ab-wordmark {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  line-height: 0.95;
  letter-spacing: var(--tr-tight);
}
.ab-wordmark .top    { display: block; color: var(--ab-ink); }
.ab-wordmark .bottom { display: block; color: var(--ab-pink); }