/* ============================================================
   TONES GARDEN — Colors & Type
   ============================================================
   Variable font: Bricolage Grotesque (opsz, wdth, wght)
   Use opsz to tune optical sizing on display vs body.
   ============================================================ */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("fonts/BricolageGrotesque-VariableFont.ttf") format("truetype-variations"),
       url("fonts/BricolageGrotesque-VariableFont.ttf") format("truetype");
  font-weight: 200 800;
  font-stretch: 75% 100%;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ----- BRAND PALETTE (canonical, from official swatch sheet) ----- */
  --tg-forest:       #13403E;  /* deep ink — used for type & logo */
  --tg-teal:         #63BCB7;  /* primary brand teal */
  --tg-pale-teal:    #B1D0CE;  /* soft teal */
  --tg-cool-gray:    #CCD2D2;  /* cool neutral */
  --tg-sage:         #C0C2B6;  /* warm neutral */
  --tg-rose:         #D9A7AB;  /* dusty rose accent */
  --tg-peach:        #FFA380;  /* peach accent */
  --tg-coral:        #F88A7A;  /* coral / highlight */

  /* Vibrant variants — for backgrounds, larger surfaces, "peppy" UI moments.
     The brand uses its palette boldly (see Marketing & Communication cover);
     these are pre-boosted versions so a single fill carries the same energy
     a multiplied blob composition does. */
  --tg-teal-vivid:   #4FB3AD;
  --tg-rose-vivid:   #E29AA2;
  --tg-peach-vivid:  #FF9166;
  --tg-coral-vivid:  #F47564;

  /* Extended steps — derived from the canonical palette */
  --tg-forest-90:    #1F4F4C;
  --tg-forest-70:    #3D6A67;
  --tg-forest-50:    #6B8987;
  --tg-cream:        #F6F1E8;   /* paper/off-white surface */
  --tg-paper:        #FBF8F2;   /* lightest paper */
  --tg-white:        #FFFFFF;

  /* ----- SEMANTIC TOKENS ----- */
  /* Foreground */
  --fg-1: var(--tg-forest);       /* primary text */
  --fg-2: var(--tg-forest-70);    /* secondary text */
  --fg-3: var(--tg-forest-50);    /* tertiary / muted */
  --fg-inverse: var(--tg-paper);

  /* Background */
  --bg-1: var(--tg-paper);        /* default page */
  --bg-2: var(--tg-cream);        /* card / surface */
  --bg-3: #EFE9DC;                /* sunken / inset */
  --bg-inverse: var(--tg-forest);

  /* Brand */
  --accent: var(--tg-teal);
  --accent-soft: var(--tg-pale-teal);
  --highlight: var(--tg-coral);
  --highlight-soft: var(--tg-peach);

  /* Lines & shadows */
  --line-1: rgba(19, 64, 62, 0.12);
  --line-2: rgba(19, 64, 62, 0.22);
  --shadow-card: 0 1px 2px rgba(19,64,62,0.05), 0 8px 24px rgba(19,64,62,0.06);
  --shadow-pop:  0 2px 4px rgba(19,64,62,0.06), 0 16px 40px rgba(19,64,62,0.12);
  --shadow-soft: 0 1px 0 rgba(19,64,62,0.04), 0 2px 8px rgba(19,64,62,0.04);

  /* Status (derived from palette so it stays on-brand) */
  --status-success: #5BA89A;
  --status-warning: #E8A26B;
  --status-danger:  #D86A5A;
  --status-info:    var(--tg-teal);

  /* ----- TYPE FAMILIES ----- */
  --font-sans:   "Bricolage Grotesque", ui-sans-serif, system-ui, -apple-system,
                 "Segoe UI", Helvetica, Arial, sans-serif;
  --font-display:"Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --font-mono:   ui-monospace, "JetBrains Mono", SFMono-Regular, Menlo,
                 Consolas, monospace;
  /* Optical-sized variation settings — narrow & condensed at large sizes */
  --vf-display:  "opsz" 96, "wdth" 80, "wght" 700;
  --vf-headline: "opsz" 48, "wdth" 90, "wght" 600;
  --vf-title:    "opsz" 24, "wdth" 95, "wght" 600;
  --vf-body:     "opsz" 14, "wdth" 100, "wght" 400;
  --vf-label:    "opsz" 14, "wdth" 100, "wght" 500;

  /* ----- TYPE SCALE ----- */
  --t-display-2: clamp(56px, 8vw, 112px);
  --t-display-1: clamp(40px, 5.5vw, 80px);
  --t-h1: 48px;
  --t-h2: 36px;
  --t-h3: 28px;
  --t-h4: 22px;
  --t-h5: 18px;
  --t-body-lg: 18px;
  --t-body:    16px;
  --t-body-sm: 14px;
  --t-caption: 12px;
  --t-eyebrow: 11px;

  --lh-tight:    1.05;
  --lh-snug:     1.2;
  --lh-normal:   1.38;
  --lh-relaxed:  1.42;

  --tracking-tight:   -0.02em;
  --tracking-normal:   0em;
  --tracking-wide:     0.04em;
  --tracking-eyebrow:  0.18em;

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

  /* ----- SPACING (4-base) ----- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;

  /* Page rhythm */
  --container-w: 1200px;               /* cadre large : hero + grille produits de la Home */
  --content-w: 980px;                  /* largeur de contenu des pages produit + section SF de la Home (marges généreuses, alignées) */
  --gutter: clamp(16px, 3vw, 48px);   /* marge latérale partagée par toutes les pages (16px mobile → 48px desktop) */
  --section-y: 48px;   /* vertical padding (top & bottom) shared by every content section */
}

/* Grands écrans : on élargit progressivement le contenu pour qu'il ne reste pas
   trop petit / trop centré au-delà d'un 14". 980px convient jusqu'au ~14",
   puis on monte par paliers (16"/QHD, 4K, TV). */
@media (min-width: 1600px) {
  :root { --content-w: 1240px; --container-w: 1440px; }
}
@media (min-width: 2200px) {
  :root { --content-w: 1560px; --container-w: 1800px; }
}
@media (min-width: 3000px) {
  :root { --content-w: 1960px; --container-w: 2240px; }
}

/* Tighter vertical rhythm on small screens */
@media (max-width: 767px) {
  :root {
    --section-y: 30px;
    --lh-normal: 1.3; --lh-relaxed: 1.34;
    --t-body-lg: 16px;   /* lead paragraphs drop to body size on mobile */
  }
}
/* Even tighter line-height on very narrow viewports */
@media (max-width: 430px) {
  :root { --lh-normal: 1.24; --lh-relaxed: 1.28; }
}

/* ============================================================
   SEMANTIC TYPE CLASSES
   ============================================================ */

html, body { color: var(--fg-1); background: var(--bg-1); }
body {
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: var(--lh-normal);
  font-variation-settings: var(--vf-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.tg-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--t-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  font-variation-settings: "opsz" 14, "wdth" 100, "wght" 600;
  color: var(--fg-2);
}

h1, .tg-h1 {
  font-family: var(--font-display);
  font-size: var(--t-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  font-variation-settings: var(--vf-headline);
  color: var(--fg-1);
  margin: 0;
}
h2, .tg-h2 {
  font-family: var(--font-display);
  font-size: var(--t-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  font-variation-settings: "opsz" 36, "wdth" 92, "wght" 600;
  color: var(--fg-1);
  margin: 0;
}
h3, .tg-h3 {
  font-family: var(--font-display);
  font-size: var(--t-h3);
  line-height: var(--lh-snug);
  font-variation-settings: var(--vf-title);
  color: var(--fg-1);
  margin: 0;
}
h4, .tg-h4 {
  font-family: var(--font-sans);
  font-size: var(--t-h4);
  line-height: var(--lh-snug);
  font-variation-settings: "opsz" 18, "wdth" 100, "wght" 600;
  color: var(--fg-1);
  margin: 0;
}
h5, .tg-h5 {
  font-family: var(--font-sans);
  font-size: var(--t-h5);
  line-height: var(--lh-normal);
  font-variation-settings: "opsz" 16, "wdth" 100, "wght" 600;
  color: var(--fg-1);
  margin: 0;
}

.tg-display-1, .tg-display {
  font-family: var(--font-display);
  font-size: var(--t-display-1);
  line-height: 0.95;
  letter-spacing: var(--tracking-tight);
  font-variation-settings: var(--vf-display);
  text-transform: uppercase;
  color: var(--fg-1);
}
.tg-display-2 {
  font-family: var(--font-display);
  font-size: var(--t-display-2);
  line-height: 0.92;
  letter-spacing: -0.03em;
  font-variation-settings: "opsz" 96, "wdth" 75, "wght" 700;
  text-transform: uppercase;
  color: var(--fg-1);
}

p, .tg-body { font-size: var(--t-body); line-height: var(--lh-relaxed); color: var(--fg-1); }
.tg-body-lg { font-size: var(--t-body-lg); line-height: var(--lh-relaxed); }
.tg-body-sm { font-size: var(--t-body-sm); line-height: var(--lh-normal); color: var(--fg-2); }
.tg-caption { font-size: var(--t-caption); line-height: var(--lh-normal); color: var(--fg-3); }

code, .tg-mono { font-family: var(--font-mono); font-size: 0.92em; }

/* Selection */
::selection { background: var(--tg-peach); color: var(--tg-forest); }

/* Logo helper — swap fill on the transparent-bg SVGs without inline styles. */
.tg-logo path { fill: currentColor; }
.tg-logo--ink   { color: var(--tg-forest); }
.tg-logo--paper { color: var(--tg-paper); }