/* ============================================================
   Symbole de l'amitié — Color tokens
   ------------------------------------------------------------
   A warm, dignified heritage palette rooted in Benin: the
   palm-green / sun-gold / laterite-clay of the flag and soil,
   a heritage blue carried from the logo, set on warm sand &
   ink neutrals. Scholarly, respectful, never flashy.
   ============================================================ */

:root {
  /* ---- Palm green (primary — research, growth, the land) ---- */
  --green-50:  #ECF6F0;
  --green-100: #CFE8DA;
  --green-200: #A2D2B8;
  --green-300: #6DB892;
  --green-400: #3C9C6E;
  --green-500: #0B7A4B;   /* brand primary */
  --green-600: #0A6A41;
  --green-700: #085434;
  --green-800: #063E27;
  --green-900: #042A1B;

  /* ---- Sun gold (accent — warmth, the festival, highlight) ---- */
  --gold-50:  #FCF6E6;
  --gold-100: #F8EAC0;
  --gold-200: #F2D685;
  --gold-300: #ECC24E;
  --gold-400: #E0A91E;
  --gold-500: #C8901A;   /* accent */
  --gold-600: #A6750F;
  --gold-700: #7E580B;

  /* ---- Laterite clay (secondary warm — soil, terra, memory) ---- */
  --clay-50:  #FBEEE9;
  --clay-100: #F4D3C7;
  --clay-200: #E7A892;
  --clay-300: #D87E60;
  --clay-400: #C75B39;
  --clay-500: #A8472A;   /* secondary */
  --clay-600: #8A3A23;
  --clay-700: #662B1A;

  /* ---- Heritage blue (from the logo — links, info, water) ---- */
  --blue-50:  #E9F3FA;
  --blue-100: #C8E1F2;
  --blue-200: #93C4E6;
  --blue-300: #5AA4D7;
  --blue-400: #2D8FD6;   /* logo blue */
  --blue-500: #1E73B8;
  --blue-600: #185C93;
  --blue-700: #134B79;

  /* ---- Warm ink + neutrals (text & structure) ---- */
  --ink-900: #211913;   /* near-black, warm */
  --ink-800: #2E241C;
  --ink-700: #463A30;
  --ink-600: #6A5C50;
  --ink-500: #8C7E72;
  --ink-400: #B0A496;
  --ink-300: #D2C8BC;
  --ink-200: #E6DED4;
  --ink-100: #F1EBE2;

  /* ---- Sand surfaces (warm paper / parchment) ---- */
  --sand-50:  #FBF8F2;
  --sand-100: #F6F1E8;
  --sand-200: #EFE7D9;
  --white:    #FFFFFF;

  /* ============================================================
     SEMANTIC ALIASES — use these in components
     ============================================================ */

  /* Brand */
  --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 */
  --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;

  /* Surfaces */
  --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);

  /* Borders */
  --border-subtle:  var(--ink-200);
  --border-default: var(--ink-300);
  --border-strong:  var(--ink-400);
  --border-focus:   var(--green-500);

  /* Status */
  --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);

  /* Focus ring */
  --ring: 0 0 0 3px color-mix(in srgb, var(--green-500) 35%, transparent);
}