/* ============================================================
   HudCo — Color Tokens
   Brand DNA: Teal (#0197B2), Slate (#2F5972), Charcoal (#363D46),
   Cream canvas (#F1EFE7). Warm, local, trustworthy — tech-forward
   but down to earth.
   ============================================================ */

:root {
  /* ---- Brand: Teal (primary / action) ---- */
  --teal-50:  #e7f6f9;
  --teal-100: #c5e9ef;
  --teal-200: #93d6e1;
  --teal-300: #54bdcf;
  --teal-400: #1ea6bf;
  --teal-500: #0197b2;  /* base brand teal */
  --teal-600: #027f97;
  --teal-700: #066678;
  --teal-800: #0a4f5d;
  --teal-900: #0d3e49;

  /* ---- Brand: Slate (secondary / wordmark) ---- */
  --slate-50:  #eef3f6;
  --slate-100: #d8e3ea;
  --slate-200: #b1c6d2;
  --slate-300: #82a3b5;
  --slate-400: #547e94;
  --slate-500: #2f5972;  /* base brand slate */
  --slate-600: #284b61;
  --slate-700: #213c4d;
  --slate-800: #1a2f3c;
  --slate-900: #14242e;

  /* ---- Ink: Charcoal (text / dark surfaces) ---- */
  --ink-900: #20252b;
  --ink-800: #2a3037;
  --ink-700: #363d46;  /* base brand charcoal */
  --ink-600: #4b535d;
  --ink-500: #646c77;
  --ink-400: #828a94;

  /* ---- Warm neutrals (cream canvas + sand borders) ---- */
  --cream-50:  #fbfaf5;
  --cream-100: #f6f4ec;
  --cream-200: #f1efe7;  /* base canvas */
  --cream-300: #e9e5d8;
  --cream-400: #ded9c8;
  --cream-500: #cfc9b4;
  --warm-grey-400: #a8a293;
  --warm-grey-500: #8a8576;
  --warm-grey-600: #6c6859;
  --white: #ffffff;

  /* ---- Semantic palette (warm, earthy) ---- */
  --green-50:  #e7f4ec;
  --green-500: #2c8c68;
  --green-600: #237456;
  --green-700: #1b5b43;
  --amber-50:  #fbf2dd;
  --amber-500: #e0941a;
  --amber-600: #bd7910;
  --amber-700: #92600f;
  --clay-50:   #fbeae7;
  --clay-500:  #cf4b3e;
  --clay-600:  #b13a2f;
  --clay-700:  #8d2e26;

  /* ===========================================================
     SEMANTIC ALIASES — reference these in product/UI work
     =========================================================== */

  /* Surfaces & backgrounds */
  --canvas: var(--cream-200);            /* page background */
  --canvas-subtle: var(--cream-100);
  --surface: var(--white);               /* cards, sheets, inputs */
  --surface-raised: var(--white);
  --surface-sunken: var(--cream-300);    /* wells, track, code */
  --surface-inverse: var(--slate-500);   /* dark sections */
  --surface-ink: var(--ink-700);

  /* Text */
  --text-strong: var(--ink-900);         /* headings */
  --text-body: var(--ink-700);           /* paragraphs */
  --text-muted: var(--ink-500);          /* secondary, captions */
  --text-subtle: var(--ink-400);         /* placeholder, disabled */
  --text-inverse: var(--white);
  --text-on-teal: var(--white);
  --text-link: var(--teal-700);
  --text-brand: var(--slate-500);

  /* Borders & dividers */
  --border: #e4dfd1;                     /* hairline on cream */
  --border-on-white: #e9e5d8;
  --border-strong: var(--cream-500);
  --border-interactive: var(--slate-300);
  --divider: #ebe7db;

  /* Primary action (teal) */
  --primary: var(--teal-500);
  --primary-hover: var(--teal-600);
  --primary-press: var(--teal-700);
  --primary-subtle: var(--teal-50);
  --primary-subtle-hover: var(--teal-100);
  --on-primary: var(--white);

  /* Secondary action (slate) */
  --secondary: var(--slate-500);
  --secondary-hover: var(--slate-600);
  --secondary-press: var(--slate-700);
  --secondary-subtle: var(--slate-50);
  --on-secondary: var(--white);

  /* Status */
  --success: var(--green-500);
  --success-subtle: var(--green-50);
  --on-success: var(--white);
  --warning: var(--amber-500);
  --warning-subtle: var(--amber-50);
  --on-warning: var(--ink-900);
  --danger: var(--clay-500);
  --danger-subtle: var(--clay-50);
  --on-danger: var(--white);
  --info: var(--teal-500);
  --info-subtle: var(--teal-50);

  /* Focus ring */
  --focus-ring: color-mix(in srgb, var(--teal-500) 45%, transparent);
  --focus-ring-strong: var(--teal-500);

  /* Price highlight (transparent-pricing motif) */
  --price-ink: var(--slate-600);
  --price-accent: var(--teal-700);
}