/* ============================================================
   Domain Panel — design tokens
   ------------------------------------------------------------
   The only place where raw values may live. Everything else refers here.
   Never put a hex code or a pixel number directly in a component.
   ============================================================ */

:root {
  /* --- neutral scale ----------------------------------------------- */
  --gray-0:  #ffffff;
  --gray-50: #f8f9fb;
  --gray-100:#f1f3f6;
  --gray-200:#e6e9ee;
  --gray-300:#d9dde4;
  --gray-400:#b9bfc9;
  --gray-500:#8b93a1;
  --gray-600:#626b7a;
  --gray-700:#3f4653;
  --gray-800:#262b35;
  --gray-900:#14171d;

  /* --- accent ------------------------------------------------------ */
  --accent-50: #edf1fc;
  --accent-100:#d8e0f8;
  --accent-200:#b9c7f1;
  --accent-500:#1f4fd8;
  --accent-600:#1a40b0;
  --accent-700:#24388a;

  /* --- semantic colours --------------------------------------------
     Four states, always with the same meaning:
       ok    = works as it should
       warn  = works, but should be looked at
       error   = broken or dangerous
       vilar = deliberately inactive, not a problem                    */
  --ok-surface:   #e8f6ec;  --ok-border:   #b8e2c4;  --ok-text:   #248a3d;
  --warn-surface: #fdf0e3;  --warn-border: #f2d5ab;  --warn-text: #b25000;
  /* Errors read as red, never pink: the surface is the neutral grey of the
     scale, and the red sits in the border and the text only. */
  --error-surface:  #f5f5f7;  --error-border:  #d32029;  --error-text:  #c0151d;
  --idle-surface:#f0f0f3;  --idle-border:#e0e0e5;  --idle-text:#6e6e73;

  /* --- roles (what components actually use) ------------------------ */
  --surface-sunken:  var(--gray-100);
  --surface:         var(--gray-0);
  --surface-muted:  var(--gray-50);
  --surface-hover:   var(--gray-200);
  --border:        var(--gray-300);
  --border-strong:  var(--gray-400);

  --text:        var(--gray-900);
  /* Higher contrast 2026-10-02. --text-faint was grey-500 (#a1a1a6), roughly
     2.4:1 against white — below the limit for readable text, and that was what
     made the whole panel feel grey. Now 4.8:1 and 8:1 respectively. */
  --text-muted: var(--gray-700);
  --text-faint:   var(--gray-600);
  --text-inverse: var(--gray-0);

  /* The sidebar is ink in both themes: the one dark surface in the light theme. */
  --sidebar-bg:     var(--gray-900);
  --sidebar-text:   #e8ebf0;
  --sidebar-muted:  #9aa3b2;
  /* Group headings: brighter than the entries' muted grey, so they read as headings. */
  --sidebar-heading: #cfd5df;
  --sidebar-hover:  rgba(255,255,255,.07);
  --sidebar-active: rgba(255,255,255,.10);
  --sidebar-border: rgba(255,255,255,.10);

  --accent:      var(--accent-500);
  --accent-dark: var(--accent-600);
  --accent-surface:  var(--accent-50);
  --accent-border: var(--accent-200);

  /* --- typography --------------------------------------------------- */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, "SF Mono", monospace;

  /* Raised from 10.5px 2026-10-02: uppercase text at that size is hard to read,
     and the labels were also light grey — three aggravating factors at once. */
  /* The scale was squeezed between 11.5 and 17 px, and 2xs/xs were the SAME value —
     a step that did nothing. Everything therefore looked equally important, and
     the body text was too small to read comfortably.
     Now a real step between each level, with 14.5 px as body text. */
  --text-2xs: 11px;
  --text-xs:  12.5px;
  --text-sm:  13px;
  --text-md:  14.5px;
  --text-lg:  16px;
  --text-xl: 20px;
  --text-2xl: 26px;
  --text-3xl: 32px;

  --weight-normal: 400;
  --weight-medium: 500;
  --weight-bold:    600;

  --row-height-tight:   1.35;
  --row-height:       1.5;
  --row-height-airy:1.65;

  /* Uppercase with spacing — used for all labels and table headings. */
  --label-spacing: .08em;

  /* --- dimensions --------------------------------------------------- */
  --step-1: 4px;
  --step-2: 7px;
  --step-3: 11px;
  --step-4: 15px;
  --step-5: 20px;
  --step-6: 28px;
  --step-7: 40px;

  /* Form controls. One height for every field and button that sits on a row
     with another, so a text box and a dropdown beside it line up instead of
     being a pixel or two apart — which is the kind of thing nobody can name
     but everybody sees. */
  --control-height: 36px;
  --control-padding: var(--step-2) var(--step-3);

  /* Sharp. One small radius for everything that is not a dot; nothing half-round. */
  --radius-sm: 0;
  --radius:    2px;
  --radius-lg: 2px;
  --radius-xl: 3px;
  --radius-pill: 2px;

  /* Edges come from borders, not from glow. Only floating layers cast a shadow. */
  --shadow-sm: none;
  --shadow:    0 1px 2px rgba(20,23,29,.08);
  --shadow-lg: 0 16px 40px rgba(20,23,29,.18);

  --fast: 120ms ease;
  --slow:  220ms ease;

  /* Used to be a fixed 1180px. With larger body text the table's columns got too little room
     and the text was clipped more often — while hundreds of pixels stood empty on a wide
     screen. Now the page may grow, but not so that the lines become uncomfortably
     long to read. */
  --max-width: min(94vw, 1360px);
  --sidebar: 360px;
}

/* --- dark mode -----------------------------------------------------
   Only the roles are rewritten. The components know nothing about the theme.      */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface-sunken:  #0f1115;
    --surface:         #171a20;
    --surface-muted:  #1d2128;
    --surface-hover:   #252a33;
    --border:        #2b313b;
    --border-strong:  #3c4350;

    --text:        #f2f2f5;
    --text-muted: #c7c7cc;
    --text-faint:   #9a9aa0;

    --accent:      #6a85f1;
    --accent-dark: #8199f4;
    --accent-surface:  #22263d;
    --accent-border: #39406a;

    --ok-surface:   #16301f;  --ok-border:   #234a2e;  --ok-text:   #5ed17f;
    --warn-surface: #33240f;  --warn-border: #4d3818;    --warn-text: #f0a355;
    --error-surface:  #2a2a2f;  --error-border:  #c4262e;    --error-text:  #ff5c5c;
    --idle-surface:#2a2a2f;  --idle-border:#3a3a41;    --idle-text:#a1a1a6;

    --shadow-sm: 0 1px 2px rgba(0,0,0,.3);
    --shadow:    0 2px 8px rgba(0,0,0,.4);
    --shadow-lg: 0 4px 18px rgba(0,0,0,.5);
  }
}

:root[data-theme="dark"] {
  --surface-sunken:#0f1115; --surface:#171a20; --surface-muted:#1d2128; --surface-hover:#252a33;
  --sidebar-bg:#0b0d11; --sidebar-border:rgba(255,255,255,.08);
  --border:#2b313b; --border-strong:#3c4350;
  --text:#f2f2f5; --text-muted:#c7c7cc; --text-faint:#9a9aa0;
  --accent:#6a85f1; --accent-dark:#8199f4; --accent-surface:#22263d; --accent-border:#39406a;
  --ok-surface:#16301f; --ok-border:#234a2e; --ok-text:#5ed17f;
  --warn-surface:#33240f; --warn-border:#4d3818; --warn-text:#f0a355;
  --error-surface:#2a2a2f; --error-border:#c4262e; --error-text:#ff5c5c;
  --idle-surface:#2a2a2f; --idle-border:#3a3a41; --idle-text:#a1a1a6;
}