/* ─────────────────────────────────────────
   TRAKELIX DESIGN TOKENS v1.0
   tokens.css — import before all other CSS

   Copied verbatim from docs/design/trakelix-handoff.md §10.
   The same values ship in Trakelix.Web/wwwroot/app.css.
   Do not edit here — edit the handoff and re-copy.
───────────────────────────────────────── */

:root {

  /* ── Primary ramp — Steel blue-grey ── */
  --primary-50:  #EDEEF2;
  --primary-100: #C8CBD8;
  --primary-200: #9499B0;
  --primary-400: #555C7A;
  --primary-600: #323858;
  --primary-800: #181D36;
  --primary-900: #0A0D1C;

  /* ── Accent ramp — Amber gold ── */
  --amber-50:  #FEF6E4;
  --amber-100: #FDDFA0;
  --amber-200: #FAC84A;
  --amber-400: #E5A800;
  --amber-600: #B07800;
  --amber-800: #7A5000;
  --amber-900: #3D2800;

  /* ── Neutral ramp — Slate ── */
  --slate-50:  #F4F6F9;
  --slate-100: #D8DCE6;
  --slate-200: #B2BACB;
  --slate-400: #7A8499;
  --slate-600: #4D5669;
  --slate-800: #1E2530;
  --slate-900: #0C1018;

  /* ── Semantic ── */
  --success:       #2E9E5B;
  --success-bg:    #E6F7EE;
  --success-text:  #1A6640;
  --error:         #D93636;
  --error-bg:      #FDECEA;
  --error-text:    #8A1A1A;
  --warning:       #E5A800;
  --warning-bg:    #FEF6E4;
  --warning-text:  #7A5000;

  /* ── Spacing ── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-6:  24px;
  --space-8:  32px;
  --space-12: 48px;
  --space-16: 64px;

  /* ── Border radius ── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-full: 9999px;

  /* ── Typography ── */
  --font-body: 'Inter', 'Segoe UI', 'Helvetica Neue', Arial, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'Cascadia Mono', Consolas, 'Liberation Mono', Menlo, monospace;
  --text-4xl:  32px;
  --text-3xl:  24px;
  --text-2xl:  18px;
  --text-xl:   15px;
  --text-base: 14px;
  --text-sm:   12px;
  --text-xs:   11px;
  --text-mono: 13px;

  /* ── Semantic surface tokens (light default) ── */
  --bg-app:         #F4F6F9;
  --bg-surface:     #FFFFFF;
  --bg-elevated:    #EDEEF2;
  --text-primary:   #0A0D1C;
  --text-secondary: #4D5669;
  --text-muted:     #7A8499;
  --border:         #D8DCE6;
  --border-strong:  #C8CBD8;

  /* ── Table tokens (from Trakelix.Web/wwwroot/app.css) ── */
  --table-head-bg:   #F4F6F9;
  --table-head-text: #7A8499;
  --row-hover:       #F4F6F9;
  --code-text:       #555C7A;
}

/* ── Dark theme overrides ── */
[data-theme="dark"] {
  --bg-app:         #0A0D1C;
  --bg-surface:     #181D36;
  --bg-elevated:    #323858;
  --text-primary:   #EDEEF2;
  --text-secondary: #9499B0;
  --text-muted:     #555C7A;
  --border:         #323858;
  --border-strong:  #555C7A;
  --success-bg:     #083020;
  --success-text:   #60DEB0;
  --warning-bg:     #3D2800;
  --warning-text:   #FAC84A;
  --error-bg:       #2D0E0E;
  --error-text:     #F08080;

  --table-head-bg:   #12162A;
  --table-head-text: #9499B0;
  --row-hover:       #232A47;
  --code-text:       #A9B0CC;
}

/* ── Auto dark if no manual override ── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg-app:         #0A0D1C;
    --bg-surface:     #181D36;
    --bg-elevated:    #323858;
    --text-primary:   #EDEEF2;
    --text-secondary: #9499B0;
    --text-muted:     #555C7A;
    --border:         #323858;
    --border-strong:  #555C7A;
    --success-bg:     #083020;
    --success-text:   #60DEB0;
    --warning-bg:     #3D2800;
    --warning-text:   #FAC84A;
    --error-bg:       #2D0E0E;
    --error-text:     #F08080;

    --table-head-bg:   #12162A;
    --table-head-text: #9499B0;
    --row-hover:       #232A47;
    --code-text:       #A9B0CC;
  }
}

/* ─────────────────────────────────────────
   Secondary palettes, copied from the app so the
   mockups on this page are tinted with the real thing.

   Status swatches   — Trakelix.Web/Theme/StatusColors.cs
   Field-type colours— Trakelix.Web/Theme/ItemFieldStyles.cs
   Process roles     — Trakelix.Web/Theme/StatusRoles.cs
   Wall palette      — Trakelix.Web/wwwroot/app.css, "wall display" section
───────────────────────────────────────── */
:root {
  /* Status swatches */
  --sw-white:    #FFFFFF;
  --sw-slate:    #D8DCE6;
  --sw-graphite: #7A8499;
  --sw-sky:      #9EC5EC;
  --sw-blue:     #5B8FD0;
  --sw-teal:     #8FD3CD;
  --sw-green:    #9FD9B4;
  --sw-forest:   #4F9E6E;
  --sw-amber:    #F5C86B;
  --sw-orange:   #E08B4A;
  --sw-rose:     #EFA3A3;
  --sw-purple:   #C3A9E0;

  /* Field-type colours */
  --ft-text:   #7A8499;
  --ft-number: #5B8FD0;
  --ft-date:   #4F9E6E;
  --ft-bool:   #8FD3CD;
  --ft-choice: #C3A9E0;
  --ft-email:  #E08B4A;
  --ft-phone:  #EFA3A3;
  --ft-url:    #5FA8C7;
  --ft-file:   #B79A6B;

  /* Process-step roles */
  --role-start: #2E9E5B;
  --role-inner: #7A8499;
  --role-end:   #C25757;

  /* Wall / TV display — deliberately always light, it is a room-scale screen */
  --wall-bg:        #F4F6FA;
  --wall-ink:       #1B2233;
  --wall-ink-deep:  #16202F;
  --wall-ink-2:     #48566B;
  --wall-muted:     #6B7A91;
  --wall-border:    #DDE3EC;
  --wall-tile:      #5B8FD0;
  --wall-error:     #C2453D;
}