/* Overse — Color tokens
 * Primary = Dark Slate Grey (#25454b, also the logo ring & wordmark).
 * Accent / "tint" = Orange (#ee8348).
 * The literal brand variable names below are kept verbatim so existing Overse
 * code keeps working; semantic aliases are layered on top.
 */

:root {
  /* ---- Brand palette (verbatim names from Overse codebase) ---- */
  --white-smoke: #f5f5f7;
  --black: #1e373c;
  --dark-slate-grey: #25454b;       /* primary */
  --dark-slate-grey-tint: #355d64;  /* lighter slate / primary hover */
  --cadet-blue: #4e8191;
  --orange: #ee8348;                /* accent / "tint" */
  --chocolate: #d36d35;             /* darker orange / accent hover */
  --alice-blue: #dde9ec;            /* light mist tint */
  --white: #ffffff;
  --border-color: #cccccc;
  --dark-grey: #aaaaaa;
  --grey: #686868;

  /* ---- Extended ramps (derived, for surfaces & states) ---- */
  --slate-900: #16282c;
  --slate-800: #1e373c;   /* = black */
  --slate-700: #25454b;   /* = dark-slate-grey (primary) */
  --slate-600: #355d64;   /* = dark-slate-grey-tint */
  --slate-500: #436f78;
  --slate-400: #4e8191;   /* = cadet-blue */
  --slate-200: #a9c3cb;
  --slate-100: #dde9ec;   /* = alice-blue */
  --slate-50:  #eef5f7;

  --orange-600: #c25e2a;
  --orange-500: #d36d35;  /* = chocolate */
  --orange-400: #ee8348;  /* = orange (accent) */
  --orange-300: #f4a473;
  --orange-100: #fce4d4;
  --orange-50:  #fdf2ea;

  --neutral-0:   #ffffff;
  --neutral-50:  #f5f5f7;  /* = white-smoke */
  --neutral-100: #ededf0;
  --neutral-200: #e0e0e4;
  --neutral-300: #cccccc;  /* = border-color */
  --neutral-400: #aaaaaa;  /* = dark-grey */
  --neutral-500: #686868;  /* = grey */
  --neutral-700: #3f4a4d;

  /* ---- Semantic aliases ---- */
  --color-bg: var(--white-smoke);
  --color-bg-inverse: var(--dark-slate-grey);
  --surface-card: var(--white);
  --surface-muted: var(--alice-blue);
  --surface-subtle: var(--neutral-50);
  --surface-inverse: var(--dark-slate-grey);
  --surface-inverse-deep: var(--black);

  --color-primary: var(--dark-slate-grey);
  --color-primary-hover: var(--dark-slate-grey-tint);
  --color-primary-active: var(--slate-900);
  --color-accent: var(--orange);
  --color-accent-hover: var(--chocolate);
  --color-accent-active: var(--orange-600);

  --text-strong: var(--black);
  --text-body: var(--black);
  --text-muted: var(--grey);
  --text-faint: var(--dark-grey);
  --text-on-dark: var(--white);
  --text-on-accent: var(--white);
  --text-link: var(--cadet-blue);

  --border: var(--border-color);
  --border-strong: var(--dark-grey);
  --border-muted: var(--neutral-200);
  --border-on-dark: rgba(255,255,255,0.16);

  --ring: var(--cadet-blue);

  /* ---- Status ---- */
  --success: #2f8f6b;
  --success-bg: #e3f3ec;
  --warning: #d98a1f;
  --warning-bg: #fbf0db;
  --danger:  #c0492f;
  --danger-bg: #f9e5e0;
  --info: var(--cadet-blue);
  --info-bg: var(--alice-blue);

  /* ---- Teal "leaf" background objects (decorative) ---- */
  --leaf-teal: var(--cadet-blue);
  --leaf-teal-soft: rgba(78, 129, 145, 0.14);
  --leaf-teal-faint: rgba(78, 129, 145, 0.07);
  --leaf-slate-soft: rgba(37, 69, 75, 0.10);
  --leaf-mist: var(--alice-blue);
}