/* =========================================================================
   Pailon Console — Dark theme
   -------------------------------------------------------------------------
   A cool, high-contrast remap of the Folio token system for a sharp,
   modern, technical control-plane surface. Load AFTER console.css.
   Most of the console flips automatically because screens reference the
   raw palette + semantic tokens; a few overloaded rules are restated below.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root {
  color-scheme: dark;

  /* ---- Surfaces (remap of the cream ramp) ----------------------------- */
  --cream-50:  #16181D;   /* elevated — cards, sidebar, inputs */
  --cream-100: #0B0C0F;   /* the page — near-black, cool */
  --cream-200: #1E2127;   /* sunken — chips, table head, kbd */
  --cream-300: #272B33;   /* hover */

  /* ---- Foreground (remap of the ink ramp) ----------------------------- */
  --ink-900: #ECEFF3;     /* primary text */
  --ink-700: #B7BdC9;     /* secondary */
  --ink-500: #848B98;     /* muted / meta */
  --ink-300: #565D69;     /* placeholder, neutral dot */
  --ink-200: #2B2F38;     /* hairline rule */
  --ink-100: #1F232B;     /* subtle rule */

  /* ---- Accent · Pailon green (brightened for dark) -------------------- */
  --folio-green-900: #84F0C2;   /* light mint — text on green tint */
  --folio-green-700: #2FD98A;   /* accent — bright emerald */
  --folio-green-500: #1FA873;
  --folio-green-100: rgba(47, 217, 138, 0.13);  /* dark green tint */

  /* ---- Bindery red ---------------------------------------------------- */
  --bindery-red-700: #FB9089;   /* light — text on red tint */
  --bindery-red-500: #F76C63;   /* signal red */
  --bindery-red-100: rgba(247, 108, 99, 0.13);

  /* ---- Parchment / amber ---------------------------------------------- */
  --parchment-700: #F2C27A;     /* light amber — text/dots */
  --parchment-100: rgba(242, 194, 122, 0.13);

  /* text/icons that sit ON the accent fill → dark */
  --fg-on-accent: #052017;

  /* ---- Type — sharp + technical --------------------------------------- */
  --font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;

  /* ---- Radii — a touch sharper ---------------------------------------- */
  --radius-md: 3px;
  --radius-lg: 5px;

  /* ---- Elevation — deeper on dark ------------------------------------- */
  --shadow-pop:   0 1px 2px rgba(0,0,0,0.5), 0 6px 16px rgba(0,0,0,0.45);
  --shadow-float: 0 1px 2px rgba(0,0,0,0.5), 0 12px 32px rgba(0,0,0,0.55);
  --shadow-modal: 0 2px 6px rgba(0,0,0,0.6), 0 28px 60px rgba(0,0,0,0.7);
}

/* ---- Body: faint technical grid behind the page --------------------- */
body {
  background-color: var(--cream-100);
  background-image:
    linear-gradient(rgba(255,255,255,0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.018) 1px, transparent 1px);
  background-size: 34px 34px;
}

/* ---- Sharpen the display type --------------------------------------- */
.page__title {
  font-weight: 500;
  letter-spacing: -0.03em;
  font-variation-settings: normal;
}
.brandword { font-weight: 600; letter-spacing: -0.02em; font-variation-settings: normal; }
.metric__value { font-weight: 500; letter-spacing: -0.03em; font-variation-settings: normal; }
.section__title,
.card__head h3,
h1, h2, h3, .h1, .h2, .h3 { font-variation-settings: normal; }
.eyebrow, .navgroup__label, .metric__label, .table th { color: var(--fg-3); }

/* ---- Sidebar: lift it off the page ---------------------------------- */
.side { background: var(--cream-50); }
.side__brand { border-bottom-color: var(--rule); }
.brandmark { filter: drop-shadow(0 0 10px rgba(47,217,138,0.35)); }

/* ---- Topbar: translucent dark + blur-free per Folio ----------------- */
.topbar { background: color-mix(in srgb, var(--cream-100) 88%, transparent); }

/* ---- Primary button: dark text on bright green, subtle glow --------- */
.btn--primary {
  color: var(--fg-on-accent);
  border-color: transparent;
  box-shadow: 0 0 0 1px rgba(47,217,138,0.25), 0 4px 14px rgba(47,217,138,0.16);
}
.btn--primary:hover { background: #46E39C; }
.btn--primary [data-lucide] { color: var(--fg-on-accent); }

.orgmark { color: var(--fg-on-accent); }

/* ---- Status pill: amber 'wait' has a hardcoded ink in console.css --- */
.status--wait { color: var(--parchment-700); }
.status--ok    { background: rgba(47,217,138,0.12); border-color: rgba(47,217,138,0.32); }
.status--stop  { background: rgba(247,108,99,0.12); border-color: rgba(247,108,99,0.34); }
.status--wait  { background: rgba(242,194,122,0.12); border-color: rgba(242,194,122,0.32); }

/* ---- Chips ---------------------------------------------------------- */
.chip { background: var(--cream-200); border-color: var(--rule); }
.chip--green { background: rgba(47,217,138,0.10); }
.chip--red { background: rgba(247,108,99,0.10); }

/* ---- Tables: header reads as an inset bar --------------------------- */
.table th { background: var(--cream-100); }
.table tbody tr:hover { background: var(--cream-200); }

/* ---- Inputs / search ------------------------------------------------ */
.searchbox, .input { background: var(--cream-100); }
.searchbox input::placeholder, .input::placeholder { color: var(--fg-4); }

/* ---- Scrollbars ----------------------------------------------------- */
* { scrollbar-color: var(--ink-200) transparent; scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--ink-200); border-radius: 6px; border: 2px solid var(--cream-100); }
::-webkit-scrollbar-thumb:hover { background: var(--ink-300); }

/* ---- Selection / focus --------------------------------------------- */
::selection { background: rgba(47,217,138,0.22); color: var(--ink-900); }