/* =======================================================
   OpenSpaces Color System
   Supports: Dark + Light themes
   ======================================================= */

/* -----------------------------------------------
   DEFAULT / DARK THEME
   ----------------------------------------------- */
:root,
:root[data-theme="dark"] {
  --black: #0b0b0b;
  --dark: #111111;
  --darker: #181818;
  --grey: #2a2a2a;
  --text: #eaeaea;
  --muted: #9aa0a6;

  /* Core brand/action colors */
  --green: #2e7d52;
  --green-dark: #256a45;
--amber: #ffcc00;       /* bright yellow */
--amber-dark: #e6b800;  /* slightly darker for hover */
  --red: #b22d2d;
  --red-dark: #922323;
  --blue: #82aaff;
  --blue-light: #c3d4ff;

  /* Layer surfaces */
  --surface-0: var(--black);   /* page background */
  --surface-1: var(--dark);    /* cards/panels */
  --surface-2: var(--darker);  /* header/footer */
  --border: var(--grey);

  /* Texts */
  --text-main: var(--text);
  --text-muted: var(--muted);

  /* Buttons / actions */
  --action-ok: var(--green);
  --action-ok-hover: var(--green-dark);
  --action-warn: var(--amber);
  --action-warn-hover: var(--amber-dark);
  --action-stop: var(--red);
  --action-stop-hover: var(--red-dark);

  /* Links */
  --link: var(--blue);
  --link-hover: var(--blue-light);

  --theme-color: var(--dark);
}

/* -----------------------------------------------
   LIGHT THEME — softened whites + darker panels
   ----------------------------------------------- */
:root[data-theme="light"] {
  --black: #f7f9fb;       /* page background (soft off-white) */
  --dark: #e3e7eb;        /* panel/card background */
  --darker: #d8dde2;      /* header/footer */
  --grey: #bcc4cc;        /* borders */
  --text: #1e1e1e;        /* main text */
  --muted: #5f6670;       /* muted/secondary text */

  /* Core brand/action colors */
  --green: #2e7d52;
  --green-dark: #256a45;
--amber: #ffcc00;       /* bright yellow */
--amber-dark: #e6b800;  /* slightly darker for hover */
  --red: #b22d2d;
  --red-dark: #922323;
  --blue: #185adb;
  --blue-light: #0f4ac6;

  /* Surfaces */
  --surface-0: var(--black);   /* background */
  --surface-1: var(--dark);    /* panels/cards (darker than bg) */
  --surface-2: var(--darker);  /* headers/footers (darkest) */
  --border: var(--grey);

  /* Texts */
  --text-main: var(--text);
  --text-muted: var(--muted);

  /* Buttons / actions */
  --action-ok: var(--green);
  --action-ok-hover: var(--green-dark);
  --action-warn: var(--amber);
  --action-warn-hover: var(--amber-dark);
  --action-stop: var(--red);
  --action-stop-hover: var(--red-dark);

  /* Links */
  --link: var(--blue);
  --link-hover: var(--blue-light);

  --theme-color: var(--black);
}

/* -----------------------------------------------
   UTILITIES & GRADIENTS
   ----------------------------------------------- */
:root {
  --gradient-ok: linear-gradient(180deg, var(--green), var(--green-dark));
  --gradient-warn: linear-gradient(180deg, var(--amber), var(--amber-dark));
  --gradient-stop: linear-gradient(180deg, var(--red), var(--red-dark));
}

/* Optional: subtle shadow for raised panels */
[data-theme="light"] .card {
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
[data-theme="dark"] .card {
  box-shadow: 0 1px 3px rgba(0,0,0,0.35);
}