/* ============================================================================
   KELI, Design Foundations
   Color, typography, spacing, radius, elevation tokens.
   Brand: a premium platform for couples in crisis. Keli (Hebrew "vessel") is
   the RESTORED COUPLE, the repaired jar, ready to receive a new impulse of
   love. The platform is the safe frame that helps a couple become that Keli.
   Mood: calm, mature, emotionally safe, hope without naivety.
   Domain: kelicare.fr
   Load order: this file first, then component CSS / HTML.

   NOTE ON TOKEN NAMES: legacy names (--pine-*, --terracotta-*, --sage-*,
   --champagne-*) are kept for component compatibility, but their VALUES now
   carry the Keli palette:
     --pine-*        => Ardoise (deep blue-green anchor)
     --terracotta-*  => Céladon (calm teal, the primary action accent)
     --sage-*        => Sage-teal (hope / growth)
     --champagne-*   => Or kintsugi (rare gold)
     --clay-*        => Argile douce (NEW warm secondary, humanity, minority use)
   ========================================================================= */

/* Fonts via Google Fonts CDN in each HTML file:
   Spectral (display / serif headings) + Hanken Grotesk (body / UI). */

:root {
  /* ---------------------------------------------------------------------
     BRAND / PRIMARY
     Ardoise is the anchor: security, depth, stability. Céladon is calm /
     the reprise of dialogue (primary action). Sage-teal is hope. Gold is the
     rare kintsugi seam. Argile is the warm, human, MINORITY accent.
     --------------------------------------------------------------------- */
  --pine-900: #152D32;   /* deepest ardoise, footer ground, headlines */
  --pine-800: #1F3E44;   /* primary brand anchor (ardoise) */
  --pine-700: #2A565C;
  --pine-600: #3E7C74;   /* mid céladon */
  --pine-300: #8FBFBA;   /* tints for borders / quiet fills */
  --pine-100: #D2E2E4;
  --pine-050: #E8F0F1;

  --terracotta-700: #2F6258;  /* céladon strong (hover) */
  --terracotta-600: #3E7C74;  /* céladon, primary calm action */
  --terracotta-500: #5A9189;
  --terracotta-300: #A9CFC9;
  --terracotta-100: #DCEBE8;

  --sage-700: #4F7B73;
  --sage-600: #6FA39B;        /* hope / growth / success-adjacent */
  --sage-300: #A9CFC9;
  --sage-100: #DCEBE8;

  --champagne-600: #B8923C;   /* or kintsugi, the repaired seam, use sparingly */
  --champagne-300: #D9B779;
  --champagne-100: #F2E8D4;

  /* Argile douce, the warm human secondary. MINORITY use only:
     quotes, testimonials, emotional details, secondary pictograms,
     reassurance blocks, micro-interactions. Never dominant.
     Distinct from gold: clay = human warmth, gold = precious repair. */
  --clay-700: #A8654A;
  --clay-600: #C9876A;        /* argile douce, the warm accent */
  --clay-300: #E2B6A2;
  --clay-100: #F3E3DB;
  --clay-050: #F9EFE9;

  /* ---------------------------------------------------------------------
     FRESH NEUTRALS, givre through charbon. Space of retreat and safety.
     --------------------------------------------------------------------- */
  --ivory:      #F7FAFA;   /* page background, lightest surface (givre) */
  --sand:       #EEF4F4;   /* secondary surface, alternating sections (brume) */
  --paper:      #E2ECEC;   /* tertiary surface, quiet panels (glace) */
  --taupe-300:  #CBD9D9;   /* hairline borders, dividers */
  --taupe-400:  #B3C6C6;   /* stronger borders, disabled fills */
  --stone-500:  #7E949A;   /* muted text, captions, placeholders */
  --stone-600:  #5C7177;   /* secondary text (pierre) */
  --charcoal-700: #3A5560; /* body text on light */
  --charcoal-800: #24393E; /* strong body / subheads */
  --charcoal-900: #16282D; /* near-black, headlines (charbon) */

  /* ---------------------------------------------------------------------
     SEMANTIC, calm, never alarmist. Derived from the Keli palette.
     --------------------------------------------------------------------- */
  --success:      #4F7B73;  --success-bg:  #DEEAE7;  --success-fg: #2C4A44;
  --warning:      #B8923C;  --warning-bg:  #F2E8D4;  --warning-fg: #6E5520;
  --error:        #A8654A;  --error-bg:    #F1E0D8;  --error-fg:   #6F3D2A;
  --info:         #3E7C74;  --info-bg:     #DCEBE8;  --info-fg:    #244A45;

  /* ---------------------------------------------------------------------
     SEMANTIC ROLES, reference these in components, not raw colors.
     --------------------------------------------------------------------- */
  --bg:            var(--ivory);
  --bg-alt:        var(--sand);
  --bg-panel:      var(--paper);
  --surface:       #FFFFFF;
  --fg:            var(--charcoal-900);
  --fg-body:       var(--charcoal-700);
  --fg-muted:      var(--stone-600);
  --fg-subtle:     var(--stone-500);
  --fg-on-dark:    var(--ivory);
  --fg-on-dark-muted: #C3D6D5;

  --brand:         var(--pine-800);
  --brand-strong:  var(--pine-900);
  --accent:        var(--terracotta-600);   /* céladon, primary calm action */
  --accent-strong: var(--terracotta-700);
  --warm:          var(--clay-600);          /* argile, human secondary accent */
  --warm-strong:   var(--clay-700);
  --hope:          var(--sage-600);
  --gold:          var(--champagne-600);     /* kintsugi seam */
  --highlight:     var(--champagne-600);

  --border:        var(--taupe-300);
  --border-strong: var(--taupe-400);
  --ring:          color-mix(in oklab, var(--pine-800) 35%, transparent);

  /* ---------------------------------------------------------------------
     TYPOGRAPHY
     Spectral carries depth, maturity, the editorial weight.
     Hanken Grotesk carries clarity, legibility, the frame.
     --------------------------------------------------------------------- */
  --font-display: "Spectral", Georgia, "Times New Roman", serif;
  --font-body:    "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Desktop type scale (clamped to mobile via the --fluid vars below) */
  --text-display: 4.25rem;  /* 68px, hero */
  --text-h1:      3rem;     /* 48px */
  --text-h2:      2.25rem;  /* 36px */
  --text-h3:      1.75rem;  /* 28px */
  --text-h4:      1.375rem; /* 22px */
  --text-h5:      1.125rem; /* 18px */
  --text-h6:      1rem;     /* 16px */
  --text-lead:    1.3125rem;/* 21px, intro paragraphs */
  --text-body:    1.0625rem;/* 17px */
  --text-sm:      0.9375rem;/* 15px */
  --text-xs:      0.8125rem;/* 13px */
  --text-eyebrow: 0.78125rem;/* 12.5px, uppercase labels */

  /* Fluid hero/headers for responsive scaling */
  --fluid-display: clamp(2.5rem, 6vw + 1rem, 4.25rem);
  --fluid-h1:      clamp(2rem, 4vw + 0.75rem, 3rem);
  --fluid-h2:      clamp(1.625rem, 2.5vw + 0.75rem, 2.25rem);

  --leading-tight:   1.12;
  --leading-snug:    1.25;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;  /* long-form reading */

  --tracking-tight:  -0.02em;  /* large display serif */
  --tracking-normal: 0;
  --tracking-wide:   0.02em;
  --tracking-eyebrow:0.16em;   /* uppercase eyebrows */

  --weight-light:   300;
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold:600;
  --weight-bold:    700;

  /* ---------------------------------------------------------------------
     SPACING, 4px base
     --------------------------------------------------------------------- */
  --space-1: 0.25rem;  /* 4 */
  --space-2: 0.5rem;   /* 8 */
  --space-3: 0.75rem;  /* 12 */
  --space-4: 1rem;     /* 16 */
  --space-5: 1.5rem;   /* 24 */
  --space-6: 2rem;     /* 32 */
  --space-7: 3rem;     /* 48 */
  --space-8: 4rem;     /* 64 */
  --space-9: 6rem;     /* 96 */
  --space-10: 8rem;    /* 128 */

  /* Layout */
  --container:    1200px;
  --container-narrow: 760px;  /* long-form article measure */
  --gutter:       clamp(1.25rem, 4vw, 3rem);

  /* ---------------------------------------------------------------------
     RADII, gently rounded, never bubbly
     --------------------------------------------------------------------- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --radius-2xl: 32px;
  --radius-pill: 999px;

  /* ---------------------------------------------------------------------
     ELEVATION, soft, cool-tinted shadows (not pure black)
     --------------------------------------------------------------------- */
  --shadow-xs: 0 1px 2px rgba(20, 40, 45, 0.05);
  --shadow-sm: 0 1px 2px rgba(20, 40, 45, 0.05), 0 2px 8px rgba(20, 40, 45, 0.05);
  --shadow-md: 0 2px 6px rgba(20, 40, 45, 0.05), 0 8px 24px rgba(20, 40, 45, 0.07);
  --shadow-lg: 0 4px 12px rgba(20, 40, 45, 0.06), 0 18px 48px rgba(20, 40, 45, 0.10);
  --shadow-focus: 0 0 0 3px var(--ring);

  --transition: 180ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 320ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================================================
   SEMANTIC TYPE CLASSES, apply directly or copy the rules into components.
   ========================================================================= */
.display {
  font-family: var(--font-display);
  font-size: var(--fluid-display);
  font-weight: var(--weight-regular);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
}
h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--fluid-h1);
  font-weight: var(--weight-regular);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
}
h2, .h2 {
  font-family: var(--font-display);
  font-size: var(--fluid-h2);
  font-weight: var(--weight-regular);
  line-height: var(--leading-snug);
  letter-spacing: -0.01em;
  color: var(--fg);
}
h3, .h3 {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
  color: var(--fg);
}
h4, .h4 {
  font-family: var(--font-body);
  font-size: var(--text-h4);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  letter-spacing: -0.005em;
  color: var(--fg);
}
h5, .h5 {
  font-family: var(--font-body);
  font-size: var(--text-h5);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-normal);
  color: var(--fg);
}
h6, .h6 {
  font-family: var(--font-body);
  font-size: var(--text-h6);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-normal);
  color: var(--fg);
}
.lead {
  font-family: var(--font-body);
  font-size: var(--text-lead);
  font-weight: var(--weight-regular);
  line-height: var(--leading-relaxed);
  color: var(--fg-body);
}
.body, p {
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--weight-regular);
  line-height: var(--leading-relaxed);
  color: var(--fg-body);
}
.small { font-size: var(--text-sm); line-height: var(--leading-normal); }
.eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-eyebrow);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
}
.quote {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--weight-light);
  font-size: var(--text-h3);
  line-height: var(--leading-snug);
  color: var(--clay-700);
}