/* =====================================================================
   1% pour les Enfants — Design Tokens
   Colors, type, spacing, radius, elevation, motion.
   Import this file once at the top of any artifact:
     <link rel="stylesheet" href="colors_and_type.css">
   ===================================================================== */

/* --- Fonts ---------------------------------------------------------- */
/* Display / headings: Montserrat. Body: Inter. Self-hosted variable fonts
   (wght axis 100–900), served from /assets/fonts. These MUST be self-hosted:
   the production CSP (font-src 'self' data:) blocks fonts.gstatic.com, so a
   Google Fonts @import silently fails on the live site and the brand type
   falls back to system-ui. Do not reintroduce the @import. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../assets/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../assets/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../assets/fonts/montserrat-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../assets/fonts/montserrat-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root {
  /* =============================
     COLOR — BRAND
     Each colour has 5 named stops: 50 (lightest tint) · 100 (light tint)
     · 500 (canonical base) · 700 (dark / hover) · 900 (deepest).
     Sky stops at 700 — for darker blues, use Deep.
     ============================= */

  /* Brand Pink — logo color. Primary CTAs, brand accents, wordmark only.
     One pink action per page maximum. Never the dominant fill. */
  --pink-50:  #FFE8F3;
  --pink-100: #FFC8E2;
  --pink-500: #E6007A;   /* canonical Brand Pink */
  --pink-700: #9F0058;
  --pink-900: #560030;

  /* Sun — warm yellow. Highlights, stats, callouts, hero accents.
     Use Ink-900 for text on Sun. */
  --sun-50:  #FFF8E1;
  --sun-100: #FFEEB2;
  --sun-500: #FFC73C;   /* canonical Sun */
  --sun-700: #B8870D;
  --sun-900: #5C4100;

  /* Sky — light blue. Info, supporting sections, illustration tints.
     Sky has no -900: when you need a dark blue, reach for Deep. */
  --sky-50:  #EAF2FF;
  --sky-100: #D3E2FF;
  --sky-500: #7DA7FF;   /* canonical Sky */
  --sky-700: #3D6FDB;

  /* Deep — institutional navy anchor. Footer, dense text, secondary
     buttons. Use white text on Deep. Hue intentionally more indigo
     than Sky so they read as distinct partner colours, not parent/child. */
  --deep-50:  #E4EAF3;
  --deep-100: #B8C5DD;
  --deep-500: #142E62;   /* canonical Deep — institutional navy */
  --deep-700: #0B1F47;
  --deep-900: #050F2A;

  /* =============================
     COLOR — NEUTRALS (warm-leaning)
     ============================= */
  --ink-900: #111111;   /* headings */
  --ink-700: #3A3A3A;   /* body text */
  --ink-600: #525252;   /* mid-grey — tag outlines, badge sub-text */
  --ink-500: #6B6B6B;   /* secondary text, captions */
  --ink-300: #B4B4B4;   /* disabled, placeholder */
  --ink-200: #EAEAEA;   /* dividers, input borders */
  --ink-100: #F2F1EC;   /* subtle fills, hover backgrounds */
  --paper:   #FAFAF7;   /* page background — warm white, NOT pure white */
  --snow:    #FFFFFF;   /* card surfaces, modals */

  /* =============================
     COLOR — SEMANTIC
     ============================= */
  --success: #1B7F3A;
  --success-bg: #E4F2E9;
  --warning: var(--sun-700);
  --warning-bg: var(--sun-50);
  --error:   #C0392B;
  --error-bg: #FBE7E4;
  --info:    var(--sky-700);
  --info-bg: var(--sky-50);

  /* =============================
     COLOR — SURFACES & FOREGROUND
     Semantic aliases — prefer these in components.
     ============================= */
  --bg-page:    var(--paper);
  --bg-surface: var(--snow);
  --bg-muted:   var(--ink-100);
  --bg-deep:    var(--deep-500);

  --fg-strong:    var(--ink-900);
  --fg-default:   var(--ink-700);
  --fg-muted:     var(--ink-500);
  --fg-disabled:  var(--ink-300);
  --fg-on-deep:   var(--snow);
  --fg-on-pink:   var(--snow);
  --fg-on-sun:    var(--ink-900);
  --fg-on-sky:    var(--ink-900);

  --border-default: var(--ink-200);
  --border-strong:  var(--ink-300);

  /* =============================
     TYPOGRAPHY
     ============================= */
  --font-display: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* --font-brand: reserved for actual wordmark imagery. The painted
     wordmark from the logo is NEVER replaced by a webfont — always
     use the SVG/PNG asset. */

  /* Type scale tokens — size / line-height / tracking */
  --t-display-xl-size: 64px;  --t-display-xl-lh: 1.0;   --t-display-xl-ls: -0.025em;
  --t-display-lg-size: 48px;  --t-display-lg-lh: 1.05;  --t-display-lg-ls: -0.02em;
  --t-h1-size:         36px;  --t-h1-lh:         1.1;   --t-h1-ls:         -0.015em;
  --t-h2-size:         28px;  --t-h2-lh:         1.2;   --t-h2-ls:         -0.01em;
  --t-h3-size:         22px;  --t-h3-lh:         1.3;   --t-h3-ls:         -0.005em;
  --t-h4-size:         18px;  --t-h4-lh:         1.4;   --t-h4-ls:         0;
  --t-body-lg-size:    19px;  --t-body-lg-lh:    1.55;
  --t-body-size:       17px;  --t-body-lh:       1.55;
  --t-body-sm-size:    14px;  --t-body-sm-lh:    1.5;
  --t-eyebrow-size:    12px;  --t-eyebrow-lh:    1.3;   --t-eyebrow-ls:    0.08em;
  --t-button-size:     16px;  --t-button-lh:     1;     --t-button-ls:     0.01em;

  /* =============================
     SPACING (4px base)
     ============================= */
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;
  --sp-32: 128px;

  /* Section vertical rhythm */
  --section-y-desktop: 96px;
  --section-y-mobile:  48px;

  /* =============================
     RADIUS
     ============================= */
  --radius-sm:   6px;   /* inputs, chips */
  --radius-md:  12px;   /* buttons, small cards */
  --radius-lg:  20px;   /* large cards, pricing tiles */
  --radius-pill: 999px; /* tags, eyebrows, association cards */

  /* =============================
     ELEVATION — only two shadows allowed
     ============================= */
  --shadow-sm: 0 1px 2px rgba(17,17,17,0.06), 0 1px 3px rgba(17,17,17,0.04);
  --shadow-md: 0 6px 16px rgba(17,17,17,0.08), 0 2px 6px rgba(17,17,17,0.04);

  /* =============================
     MOTION
     ============================= */
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 400ms;
  --ease:     cubic-bezier(0.2, 0.8, 0.2, 1);

  /* =============================
     TEXTURE — paper grain background
     Apply via .paper-grain utility (below) or by referencing
     --paper-grain-url as a background-image overlay.
     SVG turbulence noise, encoded as data URI.
     ============================= */
  --paper-grain-url: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.07  0 0 0 0 0.07  0 0 0 0 0.07  0 0 0 0.45 0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.55'/></svg>");
}

/* =====================================================================
   BASE
   ===================================================================== */
html, body {
  background: var(--bg-page);
  color: var(--fg-default);
  font-family: var(--font-body);
  font-size: var(--t-body-size);
  line-height: var(--t-body-lh);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Paper grain overlay — drop on body or any large surface. */
.paper-grain {
  position: relative;
}
.paper-grain::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: var(--paper-grain-url);
  opacity: 0.6;       /* 5–8% effective black on Paper */
  mix-blend-mode: multiply;
  z-index: 0;
}
.paper-grain > * { position: relative; z-index: 1; }

/* =====================================================================
   TYPOGRAPHY — semantic classes
   Hierarchy rule: exactly one .t-display-* OR .t-h1 per page.
   ===================================================================== */
.t-display-xl, .t-display-lg, .t-h1, .t-h2, .t-h3, .t-h4 {
  font-family: var(--font-display);
  color: var(--fg-strong);
  margin: 0;
  text-wrap: balance;
}

.t-display-xl { font-size: var(--t-display-xl-size); line-height: var(--t-display-xl-lh); letter-spacing: var(--t-display-xl-ls); font-weight: 800; }
.t-display-lg { font-size: var(--t-display-lg-size); line-height: var(--t-display-lg-lh); letter-spacing: var(--t-display-lg-ls); font-weight: 800; }
.t-h1         { font-size: var(--t-h1-size);         line-height: var(--t-h1-lh);         letter-spacing: var(--t-h1-ls);         font-weight: 800; }
.t-h2         { font-size: var(--t-h2-size);         line-height: var(--t-h2-lh);         letter-spacing: var(--t-h2-ls);         font-weight: 700; }
.t-h3         { font-size: var(--t-h3-size);         line-height: var(--t-h3-lh);                                                  font-weight: 700; }
.t-h4         { font-size: var(--t-h4-size);         line-height: var(--t-h4-lh);                                                  font-weight: 700; }

.t-body-lg, .t-body, .t-body-sm {
  font-family: var(--font-body);
  color: var(--fg-default);
  margin: 0;
  text-wrap: pretty;
}
.t-body-lg { font-size: var(--t-body-lg-size); line-height: var(--t-body-lg-lh); font-weight: 400; }
.t-body    { font-size: var(--t-body-size);    line-height: var(--t-body-lh);    font-weight: 400; }
.t-body-sm { font-size: var(--t-body-sm-size); line-height: var(--t-body-sm-lh); font-weight: 400; color: var(--fg-muted); }

.t-eyebrow {
  font-family: var(--font-body);
  font-size: var(--t-eyebrow-size);
  line-height: var(--t-eyebrow-lh);
  letter-spacing: var(--t-eyebrow-ls);
  font-weight: 600;
  text-transform: uppercase;
  color: var(--deep-500);
  margin: 0;
}

.t-button {
  font-family: var(--font-body);
  font-size: var(--t-button-size);
  line-height: var(--t-button-lh);
  letter-spacing: var(--t-button-ls);
  font-weight: 600;
}

/* Inline accents */
.t-accent-pink { color: var(--pink-500); }
.t-accent-deep { color: var(--deep-500); }
.t-accent-sun  { background: var(--sun-500); padding: 0 .15em; border-radius: var(--radius-sm); color: var(--ink-900); }

/* Map raw HTML to defaults so unstyled markup looks correct. */
h1 { font: 800 var(--t-h1-size)/var(--t-h1-lh) var(--font-display); letter-spacing: var(--t-h1-ls); color: var(--fg-strong); margin: 0; }
h2 { font: 700 var(--t-h2-size)/var(--t-h2-lh) var(--font-display); letter-spacing: var(--t-h2-ls); color: var(--fg-strong); margin: 0; }
h3 { font: 700 var(--t-h3-size)/var(--t-h3-lh) var(--font-display); color: var(--fg-strong); margin: 0; }
h4 { font: 700 var(--t-h4-size)/var(--t-h4-lh) var(--font-display); color: var(--fg-strong); margin: 0; }
p  { font: 400 var(--t-body-size)/var(--t-body-lh) var(--font-body); color: var(--fg-default); margin: 0; }
small { font-size: var(--t-body-sm-size); color: var(--fg-muted); }
a { color: var(--deep-500); text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
a:hover { color: var(--deep-700); }

/* Focus ring — used everywhere. */
:focus-visible {
  outline: 2px solid var(--deep-500);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}