/* ============================================================
   Rêverie — Color tokens
   The brand is strictly two colors (Manual de Identidad Visual):
     · Blanco Salitre   — Pantone 614 C 45%  — #ECEDD9
     · Negro/Verde Botella — Pantone 5467 C  — #303B36
   No shadows, no gradients, no glints. Sober and elegant.
   Derived tints/shades below exist only for UI depth (hover,
   borders, surfaces) and stay within the two-color world.
   ============================================================ */
:root {
  /* ---- Base brand palette (never alter these two) ---- */
  --reverie-green: #303B36;   /* Negro / Verde Botella · Pantone 5467 C */
  --reverie-cream: #ECEDD9;   /* Blanco Salitre · Pantone 614 C 45%   */

  /* ---- Green scale (derived, for UI depth) ---- */
  --green-950: #1d2421;
  --green-900: #232b27;
  --green-800: #2a332e;
  --green-700: #303B36;   /* base brand green */
  --green-600: #3b4943;
  --green-500: #4a5a53;
  --green-400: #647269;
  --green-300: #8a948c;

  /* ---- Cream scale (derived, for UI depth) ---- */
  --cream-50:  #f6f7ea;
  --cream-100: #ECEDD9;   /* base brand cream */
  --cream-200: #e2e3cd;
  --cream-300: #d6d7be;
  --cream-400: #c4c5a8;

  /* ---- Semantic surfaces ---- */
  --surface-base:    var(--reverie-cream);   /* default page on light  */
  --surface-raised:  var(--cream-50);        /* cards on a cream page   */
  --surface-sunken:  var(--cream-200);        /* wells, inputs           */
  --surface-inverse: var(--reverie-green);   /* default page on dark    */
  --surface-inverse-raised: var(--green-600);

  /* ---- Semantic text ---- */
  --text-primary:        var(--reverie-green);          /* on cream      */
  --text-secondary:      var(--green-500);              /* on cream      */
  --text-muted:          var(--green-400);              /* on cream      */
  --text-on-dark:        var(--reverie-cream);          /* on green      */
  --text-secondary-dark: rgba(236, 237, 217, 0.72);     /* on green      */
  --text-muted-dark:     rgba(236, 237, 217, 0.50);     /* on green      */

  /* ---- Borders / hairlines ---- */
  --border-subtle:  rgba(48, 59, 54, 0.14);
  --border-default: rgba(48, 59, 54, 0.28);
  --border-strong:  rgba(48, 59, 54, 0.55);
  --border-on-dark: rgba(236, 237, 217, 0.22);
  --border-on-dark-strong: rgba(236, 237, 217, 0.5);

  /* ---- Interaction states (opacity/darken, no new hues) ---- */
  --state-hover-on-green:  var(--green-600);   /* lighten green on hover */
  --state-active-on-green: var(--green-800);
  --state-hover-on-cream:  var(--cream-200);
  --state-active-on-cream: var(--cream-300);
  --focus-ring: rgba(48, 59, 54, 0.45);
  --focus-ring-on-dark: rgba(236, 237, 217, 0.6);

  /* ---- Functional (kept tonal so it never breaks the palette) ---- */
  --positive: #4a5a53;
  --critical: #8a3b2e;   /* warm brasa-adjacent red, used sparingly */
}