/* ============================================================
   Bellevue Zuhause Plus — Color tokens
   Brand sampled from the logo: deep forest green, warm gold,
   warm orange accent, over warm cream/sand neutrals.
   ============================================================ */

:root {
  /* --- Forest green (primary brand) ------------------------ */
  --green-950: #0a241b;   /* logo darkest */
  --green-900: #0f2c22;
  --green-800: #14352a;   /* primary */
  --green-700: #1f4636;
  --green-600: #2c5a47;
  --green-500: #3d7059;   /* hover / lighter */
  --green-400: #5b8c76;
  --green-300: #8fb3a3;
  --green-200: #c3d6cd;
  --green-100: #e1ebe6;
  --green-50:  #eef3f0;

  /* --- Gold (secondary) ------------------------------------ */
  --gold-700: #93722f;
  --gold-600: #b08a3e;
  --gold-500: #cda359;    /* brand gold */
  --gold-400: #dabb7d;
  --gold-300: #e7cfa1;
  --gold-200: #f1e1c4;
  --gold-100: #f7eedb;

  /* --- Orange (accent / call-to-action highlight) ---------- */
  --orange-700: #9e4a09;
  --orange-600: #c25c08;
  --orange-500: #e06b0e;  /* brand orange */
  --orange-400: #ec8838;
  --orange-300: #f3a96c;
  --orange-200: #f8cba4;
  --orange-100: #fce7d4;

  /* --- Warm neutrals --------------------------------------- */
  --ink-900: #14201a;     /* near-black, warm green-gray */
  --ink-800: #1d2b24;
  --ink-700: #2c3a33;
  --stone-600: #51605a;
  --stone-500: #6c7a73;
  --stone-400: #8d9a93;
  --stone-300: #b6bfb9;
  --stone-200: #d8ddd8;
  --stone-100: #e9ece8;

  --paper:  #ffffff;
  --cream:  #f7f3ec;      /* primary page background */
  --sand:   #efe8db;      /* secondary section background */
  --linen:  #f2ede3;

  /* --- Functional / status --------------------------------- */
  --success-600: #2f7a4f;
  --success-500: #3d9163;
  --success-100: #e1efe6;
  --warning-600: #b0851f;
  --warning-500: #d6a531;
  --warning-100: #f8edcf;
  --danger-600:  #a3342a;
  --danger-500:  #c44438;
  --danger-100:  #f6e0dd;
  --info-600:    #345e7a;
  --info-500:    #4a7d9e;
  --info-100:    #e0ebf1;

  /* ========================================================
     Semantic aliases — reference these in components
     ======================================================== */

  /* Brand */
  --brand-primary:    var(--green-800);
  --brand-primary-h:  var(--green-700);   /* hover */
  --brand-primary-a:  var(--green-900);   /* active/pressed */
  --brand-secondary:  var(--gold-500);
  --brand-accent:     var(--orange-500);
  --brand-accent-h:   var(--orange-600);

  /* Surfaces */
  --surface-page:     var(--cream);
  --surface-card:     var(--paper);
  --surface-sunken:   var(--sand);
  --surface-raised:   var(--paper);
  --surface-inverse:  var(--green-800);
  --surface-accent-soft: var(--green-50);

  /* Text */
  --text-strong:   var(--ink-900);
  --text-body:     var(--ink-700);
  --text-muted:    var(--stone-500);
  --text-subtle:   var(--stone-400);
  --text-inverse:  #f4f1ea;
  --text-on-brand: #f4f1ea;
  --text-link:     var(--green-700);
  --text-accent:   var(--orange-600);

  /* Borders */
  --border-subtle:  var(--stone-200);
  --border-default: var(--stone-300);
  --border-strong:  var(--stone-400);
  --border-brand:   var(--green-200);
  --focus-ring:     color-mix(in srgb, var(--gold-500) 65%, transparent);

  /* Decorative rule (the gold line under the wordmark) */
  --rule-gold: var(--gold-500);
}