/* Restore Outdoors — color.
   The three brand hues are sampled directly from the logo file (assets/logo.png):
   orange #e48233, green #89b848, blue #3d83c3, ink #1c1b1c.
   Orange is the primary accent; green and blue appear sparingly. */
:root {
  /* --- Orange (logo square 1) — primary accent --- */
  --orange-050: #fdf3e9;
  --orange-100: #fadfc6;
  --orange-200: #f4c396;
  --orange-300: #eda666;
  --orange-500: #e48233; /* logo */
  --orange-600: #c66a22;
  --orange-700: #9c521a;
  --orange-800: #653411;

  /* --- Leaf green (logo square 2 and the OUTDOORS bar) --- */
  --leaf-050: #f4f9ea;
  --leaf-100: #e5efce;
  --leaf-200: #cce2a4;
  --leaf-300: #adcf76;
  --leaf-500: #89b848; /* logo */
  --leaf-600: #6f9a37;
  --leaf-700: #55772a;
  --leaf-800: #3d5620;

  /* --- Sky blue (logo square 3) --- */
  --sky-050: #eef4fb;
  --sky-100: #d3e3f3;
  --sky-200: #a8c9e7;
  --sky-300: #79aad8;
  --sky-500: #3d83c3; /* logo */
  --sky-600: #2f68a0;
  --sky-700: #234f79;

  /* --- Deep green grounds (derived from the leaf hue, darkened) --- */
  --pine-700: #2c4419;
  --pine-800: #223513;
  --pine-900: #1a290f;
  --pine-950: #101a09;

  /* --- Warm sand panels --- */
  --canvas-100: #fbf3e4;
  --canvas-200: #f7e8cf;
  --canvas-300: #f0dcb4;
  --canvas-400: #e0c48f;

  /* --- Warm neutrals (paper stock) --- */
  --bone-050: #faf8f3;
  --bone-100: #f4f1e9;
  --bone-200: #e8e4d9;
  --bone-300: #d6d1c3;
  --bone-400: #b5afa0;
  --stone-500: #8a8478;
  --stone-600: #6b665c;
  --stone-700: #454139;
  --ink-900: #1c1b1c; /* logo ink */
  --ink-950: #111011;

  /* ===== Semantic surfaces ===== */
  --surface-page: var(--bone-100);
  --surface-card: var(--bone-050);
  --surface-raised: #ffffff;
  --surface-sunken: var(--bone-200);
  --surface-inverse: var(--pine-900);
  --surface-field: var(--pine-800);
  --surface-highlight: var(--leaf-500);
  --surface-warm: var(--canvas-200);
  --surface-cool: var(--sky-100);
  --surface-overlay: rgba(26, 41, 15, 0.62);
  --surface-scrim: linear-gradient(to top, rgba(16, 26, 9, 0.9) 0%, rgba(16, 26, 9, 0.45) 45%, rgba(16, 26, 9, 0) 100%);

  /* ===== Semantic text ===== */
  --text-heading: var(--ink-900);
  --text-body: var(--stone-700);
  --text-muted: var(--stone-600);
  --text-faint: var(--stone-500);
  --text-inverse: var(--bone-100);
  --text-inverse-strong: #ffffff;
  --text-on-field: var(--bone-050);
  --text-accent: var(--orange-700);
  --text-link: var(--orange-700);
  --text-link-hover: var(--orange-800);

  /* ===== Borders ===== */
  --border-hairline: rgba(28, 27, 28, 0.14);
  --border-subtle: var(--bone-300);
  --border-strong: var(--ink-900);
  --border-inverse: rgba(244, 241, 233, 0.24);
  --border-accent: var(--orange-500);
  --border-width-hair: 1px;
  --border-width-stamp: 2px;

  /* ===== Actions ===== */
  --action-primary-bg: var(--orange-500);
  --action-primary-bg-hover: var(--orange-600);
  --action-primary-bg-active: var(--orange-700);
  --action-primary-fg: var(--ink-900);
  --action-secondary-bg: var(--pine-900);
  --action-secondary-bg-hover: var(--pine-800);
  --action-secondary-fg: var(--bone-050);
  --action-highlight-bg: var(--leaf-500);
  --action-highlight-bg-hover: var(--leaf-600);
  --action-highlight-fg: var(--ink-900);
  --action-ghost-fg: var(--pine-900);
  --action-ghost-bg-hover: rgba(26, 41, 15, 0.07);
  --action-disabled-bg: var(--bone-300);
  --action-disabled-fg: var(--stone-500);
  --focus-ring: var(--orange-600);
  --focus-ring-inverse: var(--leaf-300);

  /* ===== Status ===== */
  --status-success-fg: var(--leaf-700);
  --status-success-bg: var(--leaf-050);
  --status-warning-fg: var(--orange-700);
  --status-warning-bg: var(--orange-050);
  --status-danger-fg: #a8391a;
  --status-danger-bg: #fdece7;
  --status-info-fg: var(--sky-600);
  --status-info-bg: var(--sky-050);
}