/* ============================================================
   Protodeal — Color tokens
   Two-color brand: deep blue (primary actions) + green (brand,
   nav-active, success). Cool-gray neutrals. Amber + red semantics.
   Values sampled directly from the Protodeal Figma library.
   ============================================================ */
:root {
  /* ---- Brand blue (primary actions, links, focus) ---- */
  --blue-900: #00132f;
  --blue-800: #002663; /* deep navy — logo, gradients */
  --blue-700: #00448d;
  --blue-600: #273c87; /* PRIMARY button fill */
  --blue-500: #2f4aa3;
  --blue-300: #96a3cf;
  --blue-200: #c4cce7; /* rgb(196,204,231) */
  --blue-100: #e6eaf6;
  --blue-050: #f1f3f9; /* cool divider / tinted surface */

  /* ---- Brand green (nav-active, success, secondary action) ---- */
  --green-900: #02482c; /* ghost-button text */
  --green-800: #05592b;
  --green-700: #1a6d21; /* core brand green */
  --green-600: #1d7350; /* secondary button border */
  --green-500: #29734f;
  --green-400: #4b7852; /* muted green text */
  --green-300: #7cde84; /* bright accent */
  --green-200: #d5f0d6; /* pale chip fill */
  --green-100: #e3f9eaff;
  --green-050: #eff9f2; /* success surface */
  --teal-600: #00717a; /* secondary label text */

  /* ---- Neutrals (cool gray) ---- */
  --ink-900: #000e1c; /* near-black headings */
  --ink-800: #2f2f2f; /* primary text */
  --ink-700: #535050; /* secondary text / labels */
  --ink-600: #777474; /* tertiary text */
  --ink-500: #9299a4; /* placeholder / muted */
  --ink-400: #bdbdbd; /* disabled text, icon */
  --gray-300: #d8d8d8; /* borders */
  --gray-200: #e4e2e2; /* light borders / dividers */
  --gray-150: #ececec;
  --gray-100: #f5f5f5; /* hover row */
  --gray-050: #fafafa; /* page background */
  --white: #ffffff;

  /* ---- Semantic: danger / destructive ---- */
  --red-700: #8b0c12; /* notification badge, destructive */
  --red-600: #c8302f;
  --red-300: #fdc5c3; /* danger border */
  --red-100: #fff1f1; /* danger surface */

  /* ---- Semantic: warning / amber accent ---- */
  --amber-700: #ad5700;
  --amber-600: #e89700;
  --amber-500: #f7b500; /* accent */
  --amber-200: #f7e0a1;
  --amber-100: #fff8e6;

  /* ===========================================================
     Semantic aliases — reference these in components
     =========================================================== */
  --color-primary: var(--blue-600);
  --color-primary-hover: var(--blue-700);
  --color-primary-active: var(--blue-800);
  --color-primary-contrast: var(--white);

  --color-accent: var(--green-700);
  --color-accent-hover: var(--green-800);
  --color-accent-surface: var(--green-050);
  --color-accent-border: var(--green-600);

  --text-primary: var(--ink-800);
  --text-secondary: var(--ink-700);
  --text-muted: var(--ink-600);
  --text-placeholder: var(--ink-500);
  --text-disabled: var(--ink-400);
  --text-on-brand: var(--white);
  --text-link: var(--blue-600);

  --surface-page: var(--gray-050);
  --surface-card: var(--white);
  --surface-sunken: var(--blue-050);
  --surface-hover: var(--gray-100);
  --surface-selected: var(--green-050);

  --border-default: var(--gray-300);
  --border-subtle: var(--gray-200);
  --border-strong: var(--ink-800);
  --border-focus: var(--blue-600);

  --color-success: var(--green-700);
  --color-success-surface: var(--green-050);
  --color-danger: var(--red-700);
  --color-danger-surface: var(--red-100);
  --color-danger-border: var(--red-300);
  --color-warning: var(--amber-600);
  --color-warning-surface: var(--amber-100);
}