/* ============================================================
   Symbole de l'amitié — Design system (tokens + base)
   Repris du design system du projet (prod-symbole/_ds).
   Les polices sont chargées via functions.php (Google Fonts).
   ============================================================ */

:root {
  /* ---- Vert palme (primaire) ---- */
  --green-50:#ECF6F0; --green-100:#CFE8DA; --green-200:#A2D2B8; --green-300:#6DB892;
  --green-400:#3C9C6E; --green-500:#0B7A4B; --green-600:#0A6A41; --green-700:#085434;
  --green-800:#063E27; --green-900:#042A1B;
  /* ---- Or soleil (accent) ---- */
  --gold-50:#FCF6E6; --gold-100:#F8EAC0; --gold-200:#F2D685; --gold-300:#ECC24E;
  --gold-400:#E0A91E; --gold-500:#C8901A; --gold-600:#A6750F; --gold-700:#7E580B;
  /* ---- Argile latérite (secondaire) ---- */
  --clay-50:#FBEEE9; --clay-100:#F4D3C7; --clay-200:#E7A892; --clay-300:#D87E60;
  --clay-400:#C75B39; --clay-500:#A8472A; --clay-600:#8A3A23; --clay-700:#662B1A;
  /* ---- Bleu héritage (liens) ---- */
  --blue-50:#E9F3FA; --blue-100:#C8E1F2; --blue-200:#93C4E6; --blue-300:#5AA4D7;
  --blue-400:#2D8FD6; --blue-500:#1E73B8; --blue-600:#185C93; --blue-700:#134B79;
  /* ---- Encre + neutres chauds ---- */
  --ink-900:#211913; --ink-800:#2E241C; --ink-700:#463A30; --ink-600:#6A5C50;
  --ink-500:#8C7E72; --ink-400:#B0A496; --ink-300:#D2C8BC; --ink-200:#E6DED4; --ink-100:#F1EBE2;
  /* ---- Surfaces parchemin ---- */
  --sand-50:#FBF8F2; --sand-100:#F6F1E8; --sand-200:#EFE7D9; --white:#FFFFFF;

  /* ---- Alias sémantiques ---- */
  --color-primary:var(--green-500); --color-primary-hover:var(--green-600); --color-primary-active:var(--green-700); --color-on-primary:#FFFFFF;
  --color-accent:var(--gold-400); --color-accent-strong:var(--gold-600); --color-on-accent:var(--ink-900);
  --color-secondary:var(--clay-500); --color-secondary-hover:var(--clay-600); --color-on-secondary:#FFFFFF;
  --color-link:var(--blue-500); --color-link-hover:var(--blue-600);
  --text-strong:var(--ink-900); --text-body:var(--ink-800); --text-muted:var(--ink-600); --text-subtle:var(--ink-500); --text-on-dark:var(--sand-50); --text-inverse:#FFFFFF;
  --surface-page:var(--sand-100); --surface-card:var(--white); --surface-raised:var(--white); --surface-sunken:var(--sand-200); --surface-inset:var(--sand-50); --surface-dark:var(--green-900);
  --border-subtle:var(--ink-200); --border-default:var(--ink-300); --border-strong:var(--ink-400); --border-focus:var(--green-500);
  --status-success:var(--green-500); --status-success-bg:var(--green-50); --status-warning:var(--gold-500); --status-warning-bg:var(--gold-50);
  --status-danger:var(--clay-500); --status-danger-bg:var(--clay-50); --status-info:var(--blue-500); --status-info-bg:var(--blue-50);
  --ring:0 0 0 3px color-mix(in srgb, var(--green-500) 35%, transparent);

  /* ---- Typographie ---- */
  --font-serif:'Spectral', Georgia, 'Times New Roman', serif;
  --font-sans:'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace;
  --font-display:var(--font-serif); --font-heading:var(--font-serif); --font-body:var(--font-sans); --font-ui:var(--font-sans); --font-data:var(--font-mono);
  --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700; --fw-extra:800;
  --text-2xs:0.6875rem; --text-xs:0.75rem; --text-sm:0.875rem; --text-base:1rem; --text-md:1.125rem;
  --text-lg:1.375rem; --text-xl:1.75rem; --text-2xl:2.25rem; --text-3xl:2.9375rem; --text-4xl:3.75rem; --text-5xl:4.75rem;
  --leading-tight:1.12; --leading-snug:1.25; --leading-normal:1.5; --leading-relaxed:1.7;
  --tracking-tight:-0.02em; --tracking-normal:0; --tracking-wide:0.04em; --tracking-caps:0.12em;

  /* ---- Espacements (grille 4px) ---- */
  --space-0:0; --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 ---- */
  --radius-xs:3px; --radius-sm:6px; --radius-md:10px; --radius-lg:16px; --radius-xl:24px; --radius-pill:999px; --radius-circle:50%;
  /* ---- Ombres (teintées chaud) ---- */
  --shadow-xs:0 1px 2px rgba(33,25,19,0.06);
  --shadow-sm:0 1px 3px rgba(33,25,19,0.08), 0 1px 2px rgba(33,25,19,0.05);
  --shadow-md:0 4px 12px rgba(33,25,19,0.08), 0 2px 4px rgba(33,25,19,0.05);
  --shadow-lg:0 12px 28px rgba(33,25,19,0.12), 0 4px 8px rgba(33,25,19,0.06);
  --shadow-xl:0 24px 48px rgba(33,25,19,0.16);
  /* ---- Disposition ---- */
  --container-sm:640px; --container-md:860px; --container-lg:1120px; --container-xl:1320px;
  --sidebar-width:264px; --header-height:72px;
  /* ---- Mouvement ---- */
  --ease-standard:cubic-bezier(0.2,0,0.1,1); --ease-emphasis:cubic-bezier(0.2,0.7,0.1,1);
  --dur-fast:120ms; --dur-base:200ms; --dur-slow:320ms;
}

/* ---- Helpers de marque ---- */
.sa-eyebrow {
  font-family:var(--font-ui); font-size:var(--text-2xs); font-weight:var(--fw-semibold);
  letter-spacing:var(--tracking-caps); text-transform:uppercase; color:var(--color-secondary);
}
.sa-display {
  font-family:var(--font-display); font-weight:var(--fw-bold); line-height:var(--leading-tight);
  letter-spacing:var(--tracking-tight); color:var(--text-strong);
}
/* Filet or sous les titres de section (motif récurrent) */
.sa-rule {
  width:56px; height:3px; border:0; border-radius:var(--radius-pill);
  background:var(--color-accent); margin:var(--space-4) 0;
}

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