/* ============================================================================
   Nomadic / 8 Figure Rolodex design system
   Single source of truth for the Control Center skin.

   Taken from the production CSS of the Nomadic Connector app, not from the
   page source (the served HTML inlines the Manus builder runtime, which carries
   its own unrelated tokens: --text-primary:#34322d, --Button-primary-brand:
   #0081f2 and friends. None of that is the brand).

   The four rules that carry the family resemblance:
     1. The accent is spent ONCE per screen. Everything else is neutral.
     2. Gold #C99717 on white is 2.65:1 and fails WCAG AA, so gold is never
        used for text. Gold TEXT is --gold-text #8A6800 (5.17:1). Gold as a
        fill is fine, and it always takes dark type, never white (6.76:1).
     3. Borders are warm. A cool grey breaks the family resemblance instantly.
     4. Depth comes from the hairline border, not from shadow.

   Inter needs "cv11" and "ss01" or it reads as stock Inter, i.e. anyone.
   ========================================================================= */

:root{
  /* --- ground and surfaces ------------------------------------------- */
  --ground:#F7F6F2;                     /* warm off-white page ground     */
  --surface:#FFFFFF;                    /* cards, panels, rows            */
  --surface-2:#F2F0EA;                  /* recessed: table headers, wells */
  --surface-3:#FBFAF7;                  /* hover on a white surface       */
  --rail:#070707;                       /* the dark sidebar rail          */
  --rail-2:#141414;                     /* rail hover                     */

  /* --- borders (warm, never cool grey) -------------------------------- */
  --border:#E8E5DD;
  --border-strong:#D4D0C8;
  --rail-border:#242424;                /* hairline inside the dark rail  */

  /* --- accent --------------------------------------------------------- */
  --gold:#C99717;                       /* fill only                      */
  --gold-light:#E9C75B;                 /* fill / on-dark type            */
  --gold-soft:#FBF5E3;                  /* pale tint background           */
  --gold-border:#E2C96A;
  --gold-text:#8A6800;                  /* the only gold safe for type    */
  --gold-text-strong:#7A5C00;           /* 6.25:1 where AAA-ish is wanted */

  /* --- type ----------------------------------------------------------- */
  --text:#171717;
  /* The kit's #6F6F6F / #717171 are 4.55:1 on the ground and 4.28-4.41:1 on a
     recessed surface, i.e. they fail AA exactly where this app puts most of its
     secondary type (table headers, sub-labels, wells). Darkened by ~3% so every
     screen passes, the same correction the kit already makes for gold type. */
  --text-2:#666666;
  --text-3:#6A6A6A;
  --text-on-rail:#F4F3F0;
  --text-on-rail-2:#8A8A8A;

  /* --- semantics ship as base + soft + border trios -------------------- */
  --success:#13754F; --success-soft:#E8F3EE; --success-border:#B7DBCA;
  --warning:#996000; --warning-soft:#FBF2E3; --warning-border:#E6CB98;
  --danger:#B52E2E;  --danger-soft:#F9EAEA;  --danger-border:#E7B4B4;
  --info:#1D5EC9;    --info-soft:#EAF0FB;    --info-border:#B4C9EC;
  --purple:#5B3FD4;  --purple-soft:#EFECFB;  --purple-border:#C9BFF0;
  --teal:#146C7E;    --teal-soft:#E7F2F4;    --teal-border:#B3D5DC;
  --magenta:#A82D6E; --magenta-soft:#FAEAF2; --magenta-border:#EBBBD3;

  /* --- shape, motion, type stack -------------------------------------- */
  --r-btn:8px; --r-input:10px; --r-card:12px; --r-panel:14px; --r-pill:999px;
  --ease:160ms cubic-bezier(.23,1,.32,1);
  --body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;

  /* Shadows are near-invisible on purpose. Reach for --border first. */
  --shadow-sm:0 1px 2px rgba(23,23,23,0.04);
  --shadow-md:0 2px 8px rgba(23,23,23,0.06);
  --shadow-pop:0 8px 28px rgba(23,23,23,0.10);

  /* ==================================================================
     Legacy aliases. The Control Center grew two CSS dialects before this
     file existed: the Lexend shell (app/login/account) and the Archivo +
     JetBrains Mono modules (everything else). Both are mapped here so the
     component CSS in each page keeps working untouched.
     ================================================================== */

  /* dialect A - the Lexend shell */
  --bg:var(--ground);
  --sidebar:var(--rail);
  --card:var(--surface);
  --card-hover:var(--surface-3);
  --card-light:var(--surface-2);
  --border-light:var(--border-strong);
  --gold-bg:var(--gold-soft);
  --cream:var(--text);
  --text-soft:var(--text-2);

  /* dialect B - the Archivo modules */
  --line:var(--border);
  --line-strong:var(--border-strong);
  --ink:var(--text);
  --muted:var(--text-2);
  --muted-2:var(--text-3);
  --gold-bright:var(--gold-text);
  --gold-dim:var(--gold-text);
  --disp:var(--body);
  --mono:var(--body);

  /* status colours the modules ask for by name */
  --green:var(--success);  --green-bg:var(--success-soft);
  --red:var(--danger);     --red-bg:var(--danger-soft);
  --amber:var(--warning);  --amber-bg:var(--warning-soft);
  --blue:var(--info);      --blue-bg:var(--info-soft);
  --purple-bg:var(--purple-soft);
  --cyan:var(--teal);      --cyan-bg:var(--teal-soft);
  --pink:var(--magenta);   --pink-bg:var(--magenta-soft);
  --paid:var(--success);   --pending:var(--warning);
  --void:var(--danger);

  /* dialect C - the funnel call / review screens */
  --sunk:var(--surface-2);
  --line-2:var(--border-strong);
  --text-dim:var(--text-2);
  --text-mute:var(--text-3);
  --faint:var(--text-3);
  --head:var(--body);
  --accent:var(--gold);
  --accent-line:var(--gold-border);
  --accent-soft:var(--gold-soft);
  --green-line:var(--success-border);
  --red-line:var(--danger-border);
  --amber-line:var(--warning-border);

  /* offers kanban stages */
  --selling:var(--gold-text); --onboarding:var(--warning);
  --recruiting:var(--info);   --active:var(--success);
  --closed:var(--text-3);

  --r:var(--r-input);
}

/* ---------------------------------------------------------------------
   Base. Pages layer their own component CSS on top of this.
   ------------------------------------------------------------------ */
html,body{margin:0}
body{
  background:var(--ground);
  color:var(--text);
  font-family:var(--body);
  font-feature-settings:"cv11","ss01";
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Numbers line up in every table and metric. Prose keeps proportional
   figures, which is why this is a list and not a rule on body. */
table,th,td,input,select,textarea,
.num,.val,.cmp,.chg,.kpi .val,.tile .val,.stat-val,.metric-val{
  font-variant-numeric:tabular-nums;
}

/* Uppercase eyebrows tracked 0.14-0.22em at ~11px are a real device in this
   system, so scrollbars and selection should not fight them. */
::selection{background:var(--gold-soft);color:var(--text)}
*{scrollbar-color:var(--border-strong) transparent}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:var(--r-pill);
  border:3px solid transparent;background-clip:content-box}
*::-webkit-scrollbar-track{background:transparent}