/* ourlot — Color tokens
   Palette: deep evergreen (dependable, grounded) + warm apricot (friendly,
   local) on a warm cream surface. Warm-neutral "stone" ramp throughout. */
:root {
  /* Brand — Evergreen */
  --green-50: #eef6f1;
  --green-100: #d6ebe0;
  --green-200: #aed7c2;
  --green-300: #7cbd9e;
  --green-400: #4a9d78;
  --green-500: #2b8060;
  --green-600: #1e6b4e;
  --green-700: #175540;
  --green-800: #113f30;
  --green-900: #0b2a20;

  /* Brand — Apricot (warm accent) */
  --apricot-50: #fdf3e7;
  --apricot-100: #fbe3c6;
  --apricot-200: #f6c98d;
  --apricot-300: #f0af58;
  --apricot-400: #e8973a;
  --apricot-500: #d98324;
  --apricot-600: #b96a1a;
  --apricot-700: #935214;

  /* Warm neutrals — Stone */
  --stone-0:   #ffffff;
  --stone-25:  #fdfbf6;
  --stone-50:  #faf6ee;
  --stone-100: #f2ece0;
  --stone-200: #e6ddcc;
  --stone-300: #d3c7b0;
  --stone-400: #b4a688;
  --stone-500: #8b7f63;
  --stone-600: #665c45;
  --stone-700: #4a4230;
  --stone-800: #2f2a1d;
  --stone-900: #1c190f;

  /* Semantic hues */
  --red-500:   #c0432f;
  --red-50:    #fbeae6;
  --blue-500:  #2f6db0;
  --blue-50:   #e9f0f8;

  /* ===== Semantic aliases ===== */
  --color-primary: var(--green-700);
  --color-primary-hover: var(--green-800);
  --color-primary-active: var(--green-900);
  --color-primary-soft: var(--green-50);
  --color-on-primary: #fefdf9;

  --color-accent: var(--apricot-500);
  --color-accent-hover: var(--apricot-600);
  --color-accent-soft: var(--apricot-50);
  --color-on-accent: #2f2a1d;

  --surface-page: var(--stone-50);
  --surface-card: var(--stone-0);
  --surface-raised: #ffffff;
  --surface-sunken: var(--stone-100);
  --surface-inverse: var(--green-900);

  --text-strong: var(--stone-900);
  --text-body: var(--stone-800);
  --text-muted: var(--stone-600);
  --text-subtle: var(--stone-500);
  --text-on-inverse: #f3efe4;
  --text-link: var(--green-700);
  --text-link-hover: var(--green-800);

  --border-subtle: var(--stone-200);
  --border-default: var(--stone-300);
  --border-strong: var(--stone-400);
  --border-focus: var(--green-500);

  --color-success: var(--green-600);
  --color-success-soft: var(--green-50);
  --color-warning: var(--apricot-500);
  --color-warning-soft: var(--apricot-50);
  --color-danger: var(--red-500);
  --color-danger-soft: var(--red-50);
  --color-info: var(--blue-500);
  --color-info-soft: var(--blue-50);

  --color-star: var(--apricot-500);
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--green-500) 35%, transparent);
}