/* =============================================================
   LAOU — Design Tokens
   Source : Design/_ds/laou-charte-*/colors_and_type.css
   Adapté pour WordPress : chemins de fonts relatifs au thème.
   ============================================================= */

@font-face {
  font-family: 'Power Grotesk';
  src: url('../fonts/PowerGrotesk-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Power Grotesk';
  src: url('../fonts/PowerGrotesk-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Palette officielle — 6 teintes × {pastel, deep} */
  --coral:   #fa8c69;
  --yellow:  #ffe696;
  --pink:    #fab4d2;
  --green:   #8ce1a0;
  --teal:    #73bec8;
  --red:     #f55050;

  --coral-deep:  #e15f3c;
  --yellow-deep: #dcaa4b;
  --pink-deep:   #d278a0;
  --green-deep:  #41aa64;
  --teal-deep:   #1e7382;
  --red-deep:    #9b3746;

  /* Soft tints */
  --coral-soft:  #ffeae2;
  --yellow-soft: #fff7da;
  --pink-soft:   #fde8f1;
  --green-soft:  #e7f7ec;
  --teal-soft:   #e6f2f4;
  --red-soft:    #ffe6e6;

  /* Rampe teal */
  --teal-50:  #e6f2f4;
  --teal-100: #d2e9ed;
  --teal-200: #a9d4db;
  --teal-300: #73bec8;
  --teal-400: #4a9aa6;
  --teal-500: #1e7382;
  --teal-600: #1a6675;
  --teal-700: #155563;
  --teal-800: #114551;
  --teal-900: #0e3741;

  /* Surfaces neutres */
  --sand-50:  #ffffff;
  --sand-100: #f3f5f4;
  --sand-200: #e9eceb;
  --sand-300: #dfe3e1;

  /* Aliases */
  --amber-100: #fff7da;
  --amber-300: #ffe696;
  --amber-500: #dcaa4b;
  --amber-600: #c2922f;
  --amber-700: #9c7320;
  --coral-100: #ffeae2;
  --coral-500: #e15f3c;
  --coral-600: #c84f30;

  /* Neutrals */
  --black:    #111817;
  --ink:      #1b2b2a;
  --gray-800: #2b3a38;
  --gray-700: #41514e;
  --gray-600: #5d6c69;
  --gray-500: #7c8a87;
  --gray-400: #a2aeab;
  --gray-300: #c8d0ce;
  --gray-200: #e4e9e7;
  --gray-100: #f1f4f2;
  --white:    #ffffff;

  /* Sémantiques */
  --success:    #41aa64;
  --success-bg: #e7f7ec;
  --warning:    #dcaa4b;
  --warning-bg: #fff7da;
  --error:      #f55050;
  --error-bg:   #ffe6e6;
  --info:       #1e7382;
  --info-bg:    #e6f2f4;

  /* Role tokens */
  --bg-page:        #ffffff;
  --bg-surface:     #ffffff;
  --bg-surface-alt: #f3f5f4;
  --bg-inverse:     #1e7382;
  --bg-brand:       #1e7382;
  --fg-default:     #1b2b2a;
  --fg-muted:       #7c8a87;
  --fg-subtle:      #a2aeab;
  --fg-onbrand:     #ffffff;
  --fg-brand:       #1e7382;
  --fg-link:        #1e7382;
  --border-default: #e4e9e7;
  --border-strong:  #c8d0ce;
  --border-brand:   #1e7382;

  /* Typographie */
  --font-display: 'Power Grotesk', Verdana, system-ui, sans-serif;
  --font-body:    Verdana, system-ui, sans-serif;

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

  --text-display: 500 3.5rem/1.04 var(--font-display);
  --text-h1:      500 2.5rem/1.1  var(--font-display);
  --text-h2:      500 2rem/1.15   var(--font-display);
  --text-h3:      500 1.5rem/1.25 var(--font-display);
  --text-h4:      500 1.25rem/1.3 var(--font-display);
  --text-body-lg: 400 1.125rem/1.6 var(--font-body);
  --text-body:    400 1rem/1.6     var(--font-body);
  --text-body-sm: 400 0.875rem/1.55 var(--font-body);
  --text-caption: 500 0.75rem/1.4  var(--font-body);
  --text-button:  500 1rem/1       var(--font-display);
  --eyebrow-spacing: 0.08em;

  /* Espacement (base 4px) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;

  /* Rayons (marque rectangulaire) */
  --radius-button: 0px;
  --radius-xs:  0px;
  --radius-sm:  2px;
  --radius-md:  3px;
  --radius-lg:  6px;
  --radius-xl:  8px;

  /* Ombres */
  --shadow-xs: 0 1px 2px rgba(20,32,31,.06);
  --shadow-sm: 0 2px 6px rgba(20,32,31,.07);
  --shadow-md: 0 6px 20px rgba(20,32,31,.09);
  --shadow-lg: 0 16px 40px rgba(20,32,31,.12);
  --shadow-brand: 0 10px 26px rgba(29,115,130,.22);

  /* Motion */
  --ease-out:    cubic-bezier(.22,.61,.36,1);
  --ease-in-out: cubic-bezier(.45,0,.25,1);
  --dur-fast: 120ms;
  --dur:      220ms;
  --dur-slow: 360ms;

  /* Couleurs catégories */
  --cat-decouvrir-pastel: var(--teal);
  --cat-decouvrir-deep:   var(--teal-deep);
  --cat-decouvrir-soft:   var(--teal-soft);
  --cat-installer-pastel: var(--coral);
  --cat-installer-deep:   var(--coral-deep);
  --cat-installer-soft:   var(--coral-soft);
  --cat-temoignages-pastel: var(--pink);
  --cat-temoignages-deep:   var(--pink-deep);
  --cat-temoignages-soft:   var(--pink-soft);
  --cat-marketing-pastel:   var(--green);
  --cat-marketing-deep:     var(--green-deep);
  --cat-marketing-soft:     var(--green-soft);
  --cat-colltemoin-pastel:  var(--yellow);
  --cat-colltemoin-deep:    var(--yellow-deep);
  --cat-colltemoin-soft:    var(--yellow-soft);
}

/* Classes utilitaires typo */
.laou-type { color: var(--fg-default); font: var(--text-body); -webkit-font-smoothing: antialiased; }
.display    { font: var(--text-display); letter-spacing: -0.02em; margin: 0; }
.h1         { font: var(--text-h1); letter-spacing: -0.01em; margin: 0; }
.h2         { font: var(--text-h2); letter-spacing: -0.01em; margin: 0; }
.h3         { font: var(--text-h3); margin: 0; }
.h4         { font: var(--text-h4); margin: 0; }
.body-lg    { font: var(--text-body-lg); }
.body-sm    { font: var(--text-body-sm); }
.caption    { font: var(--text-caption); color: var(--fg-muted); }
.eyebrow {
  font: var(--text-caption);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--eyebrow-spacing);
  color: var(--fg-brand);
}