/* ============================================================
   La Béthusienne — Design tokens
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:ital,wght@0,400;0,500;0,600;0,700;0,800;1,500&family=Caveat:wght@500;600;700&display=swap');

:root {
  /* Rose / raspberry (primary accent) */
  --rose-900: #8a0036;
  --rose-800: #a80045;
  --rose-700: #c20049;
  --rose-600: #d40453;
  --rose:     #e5035b;
  --rose-400: #ed5c92;
  --rose-300: #f48fb5;
  --rose-200: #f7cbcf;
  --rose-100: #ffd9db;
  --rose-50:  #ffe8e9;

  /* Lime / olive (secondary accent, used sparingly) */
  --lime-800: #566023;
  --lime-700: #6c7e24;
  --lime-600: #85992c;
  --lime-300: #d8e4bf;
  --lime-100: #eaf0dc;
  --lime-50:  #f3f6ea;

  /* Warm neutrals — tinted toward the rose hue, never flat grey */
  --white:    #ffffff;
  --paper:    #fdf2f2;
  --paper-2:  #f5e8e7;
  --page:     #f5ecec;
  --ink-900:  #251d1d;
  --ink-700:  #3e3635;
  --ink-500:  #6f6766;
  --ink-300:  #beb5b5;
  --line:     #ded5d5;

  /* Semantic aliases */
  --surface-page:          var(--page);
  --surface-paper:         var(--paper);
  --surface-paper-2:       var(--paper-2);
  --text-body:             var(--ink-700);
  --text-muted:            var(--ink-500);
  --text-on-rose:          var(--white);
  --text-on-lime:          var(--ink-900);
  --label-color:           var(--rose);
  --link:                  var(--rose);
  --link-hover:            var(--rose-700);
  --border-default:        var(--line);
  --border-form:           var(--ink-500);
  --focus-ring:            var(--rose);

  /* Typography */
  --font-sans: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-hand: "Caveat", "Hanken Grotesk", cursive;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-extra:    800;
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.375rem;
  --text-2xl:  1.75rem;
  --text-3xl:  2.25rem;
  --text-4xl:  3rem;
  --text-5xl:  3.75rem;
  --lh-tight: 1.15;
  --lh-snug:  1.3;
  --lh-body:  1.6;
  --ls-label:  0.14em;
  --ls-tight: -0.01em;
  --label-size:   0.8125rem;
  --label-weight: var(--fw-bold);

  /* Spacing — 4pt scale, named by role */
  --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;

  /* Radii */
  --radius-sm:   8px;
  --radius:      12px;
  --radius-lg:   18px;
  --radius-pill: 999px;

  /* Shadow — one "whisper" only, tinted toward ink, never pure black */
  --shadow-whisper: 0 1px 2px rgba(37,29,29,0.05), 0 10px 24px -12px rgba(37,29,29,0.14);

  /* Motion */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-short:   160ms;
  --dur-med:     220ms;

  /* Layout */
  --content-width: 720px;
  --wide-width:    1100px;
  --border-width:  1.5px;

  /* Z-index scale — named, never freestyled */
  --z-base:   1;
  --z-raised: 10;
  --z-sticky: 200;
}