/* ============================================================
   RQDT — Rien Que Des Terriens
   Design tokens: colors + typography
   Native CSS custom properties. No dark mode. Warm only.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ---------- PRIMARY · Terracotta (logo signature) ---------- */
  --color-primary-50:  #FDF5F2;
  --color-primary-100: #FBE5DE;
  --color-primary-200: #F6C7B7;
  --color-primary-300: #F1A38B;
  --color-primary-400: #ED8263;
  --color-primary-500: #EB5F40; /* ← logo (SVG source) */
  --color-primary-600: #D04A2B;
  --color-primary-700: #AD3B21;
  --color-primary-800: #8A301D;
  --color-primary-900: #6D2817;

  /* ---------- NEUTRALS · warm only (no cool gray) ----------
     "Sable & terre" — cream, sand, warm clay-grey                  */
  --color-neutral-0:   #FFFCF7; /* paper / page bg */
  --color-neutral-50:  #FAF5EC; /* cream */
  --color-neutral-100: #F2EADB; /* sand light */
  --color-neutral-200: #E6D9C2; /* sand */
  --color-neutral-300: #C9B89B; /* warm tan */
  --color-neutral-400: #A8957A; /* warm taupe */
  --color-neutral-500: #7F6F5A; /* warm umber */
  --color-neutral-600: #5C4F40; /* warm slate */
  --color-neutral-700: #40362B; /* deep clay */
  --color-neutral-800: #2A231C; /* near-black warm */
  --color-neutral-900: #1A1612; /* ink */

  /* ---------- ACCENT · Sage (complementary, "vivant") ----------
     Proposed accent. Calm vegetal green — alternative au terracotta */
  --color-accent-50:  #F1F4EE;
  --color-accent-100: #DEE6D5;
  --color-accent-200: #BDCBAD;
  --color-accent-300: #93AB81;
  --color-accent-400: #6F8B68;
  --color-accent-500: #547151; /* signature accent */
  --color-accent-600: #425B40;
  --color-accent-700: #354833;
  --color-accent-800: #283627;
  --color-accent-900: #1B231B;

  /* ---------- SEMANTIC ---------- */
  --color-success-50:  #EEF4EA;
  --color-success-500: #5E8A48;
  --color-success-700: #3F6230;

  --color-warning-50:  #FBF1DE;
  --color-warning-500: #D89B2A;
  --color-warning-700: #9C6E14;

  --color-error-50:   #FBE7E2;
  --color-error-500:  #C4452A;
  --color-error-700:  #8A2C18;

  --color-info-50:    #E8F0F3;
  --color-info-500:   #4B7B9D;   /* horizon blue — also available as alt accent */
  --color-info-700:   #305773;

  /* ---------- SURFACE / TEXT SHORTCUTS ---------- */
  --bg:           var(--color-neutral-0);
  --bg-subtle:    var(--color-neutral-50);
  --bg-muted:     var(--color-neutral-100);
  --surface:      #FFFFFF;
  --surface-sunk: var(--color-neutral-50);

  --fg:           var(--color-neutral-900);
  --fg-strong:    var(--color-neutral-900);
  --fg-default:   var(--color-neutral-800);
  --fg-muted:     var(--color-neutral-600);
  --fg-subtle:    var(--color-neutral-500);
  --fg-on-primary:#FFFFFF;
  --fg-on-accent: #FFFFFF;

  --border:        var(--color-neutral-200);
  --border-strong: var(--color-neutral-300);
  --border-soft:   var(--color-neutral-100);

  --focus-ring: 0 0 0 3px color-mix(in oklab, var(--color-primary-500) 35%, transparent);

  /* ---------- ELEVATION · soft, warm-tinted ---------- */
  --shadow-xs: 0 1px 2px rgba(64, 54, 43, 0.06);
  --shadow-sm: 0 2px 6px rgba(64, 54, 43, 0.07);
  --shadow-md: 0 8px 20px -6px rgba(64, 54, 43, 0.12), 0 2px 4px rgba(64, 54, 43, 0.05);
  --shadow-lg: 0 20px 40px -12px rgba(64, 54, 43, 0.18), 0 4px 8px rgba(64, 54, 43, 0.06);
  --shadow-xl: 0 32px 64px -16px rgba(64, 54, 43, 0.22);

  /* ---------- RADIUS ---------- */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 22px;
  --radius-2xl: 32px;
  --radius-pill: 999px;

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

  /* ---------- MOTION ---------- */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring:cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:   140ms;
  --dur-base:   220ms;
  --dur-slow:   360ms;

  /* ---------- TYPOGRAPHY · families ----------
     Outfit = display / titres — moderne, généreux, humaniste.
     Inter  = body / UI — neutre, lisible, technique.
     JetBrains Mono = code (RQDT Studio).                            */
  --font-display: 'Outfit', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

  /* ---------- TYPE SCALE ---------- */
  --fs-display: 72px;  --lh-display: 1.02;
  --fs-h1: 56px;       --lh-h1: 1.06;
  --fs-h2: 40px;       --lh-h2: 1.12;
  --fs-h3: 30px;       --lh-h3: 1.2;
  --fs-h4: 24px;       --lh-h4: 1.3;
  --fs-h5: 20px;       --lh-h5: 1.35;
  --fs-h6: 17px;       --lh-h6: 1.4;
  --fs-body-lg: 18px;  --lh-body-lg: 1.6;
  --fs-body:    16px;  --lh-body:    1.6;
  --fs-body-sm: 14px;  --lh-body-sm: 1.55;
  --fs-label:   13px;  --lh-label:   1.3;
  --fs-caption: 12px;  --lh-caption: 1.4;
  --fs-mono:    14px;

  --tracking-tight: -0.02em;
  --tracking-snug:  -0.01em;
  --tracking-normal: 0em;
  --tracking-wide:  0.02em;
  --tracking-eyebrow: 0.14em; /* uppercase eyebrows */
}

/* ============================================================
   Base element styles — semantic, opt-in via .rqdt-prose or root
   ============================================================ */

html, body {
  background: var(--bg);
  color: var(--fg-default);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--fg-strong);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); font-weight: 700; }
h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: 600; }
h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: 600; }
h4 { font-size: var(--fs-h4); line-height: var(--lh-h4); font-weight: 600; letter-spacing: var(--tracking-snug); }
h5 { font-size: var(--fs-h5); line-height: var(--lh-h5); font-weight: 600; letter-spacing: var(--tracking-snug); }
h6 { font-size: var(--fs-h6); line-height: var(--lh-h6); font-weight: 600; letter-spacing: var(--tracking-normal); }

p { margin: 0; text-wrap: pretty; }

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-primary-700);
}

.label {
  font-size: var(--fs-label);
  line-height: var(--lh-label);
  font-weight: 500;
  color: var(--fg-muted);
}

.caption {
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  color: var(--fg-subtle);
}

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

::selection {
  background: var(--color-primary-200);
  color: var(--color-primary-900);
}