/* ================================================================
   PostPro Nexus - Console design system - TOKENS
   ----------------------------------------------------------------
   Section 1 of design_handoff_nexus_console/nexus-design-library.md,
   transcribed verbatim. This file holds custom properties ONLY - no
   component rules, no selectors beyond the three theme roots.

   Theme resolution mirrors js/theme.js, which has three states:
     - explicit light  -> html[data-theme="light"]
     - explicit dark   -> html[data-theme="dark"]
     - unset (default) -> no attribute, follow prefers-color-scheme
   So every dark value is declared twice: once behind the media query
   (guarded against an explicit light choice) and once behind the
   attribute, so the toggle wins in both directions.

   Load order on every page:  tokens.css -> console.css -> [compat.css]
   ================================================================ */

:root {
  color-scheme: light;

  /* ---- Surfaces ---- */
  --nx-page-bg:        #F3F6F6;
  --nx-surface:        #FFFFFF;
  --nx-sunken:         #FAFCFC;   /* also the row hover fill */

  /* ---- Lines ---- */
  --nx-line:           #E1E8E8;   /* card + table borders */
  --nx-row-divider:    #EDF2F2;   /* between table rows */
  --nx-border-strong:  #DCE4E4;   /* inputs, ghost buttons, chips */

  /* ---- Ink ---- */
  --nx-ink:            #0C1517;
  --nx-ink-strong:     #0C1517;
  --nx-muted:          #5C7070;
  --nx-faint:          #93A6A6;
  --nx-empty:          #AFC2C2;   /* disabled + the "-" empty marker */

  /* ---- Accent ---- */
  --nx-accent:         #0F9D8F;   /* fills, underlines, focus ring */
  --nx-accent-text:    #0B7568;   /* links, accent-coloured text */
  --nx-accent-soft-bg: #E4F3F0;
  --nx-accent-soft-fg: #0B5F56;
  --nx-accent-soft-line: #B9E9DF;
  --nx-live-bg:        #DFF7F2;   /* LIVE pill on detail pages */

  /* ---- Row states ---- */
  --nx-selected-row:   #F4FBFA;
  --nx-selected-row-2: #F0F7F6;

  /* ---- Semantic: green ---- */
  --nx-green-fg:       #15803D;
  --nx-green-bg:       #DCFCE7;
  --nx-green-dot:      #16A34A;

  /* ---- Semantic: amber ---- */
  --nx-amber-fg:       #B45309;
  --nx-amber-bg:       #FEF3C7;
  --nx-amber-dot:      #D97706;
  --nx-amber-tint:     #FFFBF4;   /* attention row tint */
  --nx-amber-tint-2:   #FFF7ED;   /* attention card fill */
  --nx-amber-tint-line:#FDE1C3;
  --nx-amber-strong:   #C2410C;   /* KPI number on an amber card */

  /* ---- Semantic: rose ---- */
  --nx-rose-fg:        #BE123C;
  --nx-rose-fg-2:      #E11D48;   /* the louder of the pair */
  --nx-rose-bg:        #FFE4E6;
  --nx-rose-line:      #F3C6D0;   /* rose-outline (Delete) button */
  --nx-rose-tint:      #FFF8F8;   /* attention row tint */

  /* ---- Buttons ---- */
  --nx-btn-primary-bg: #0C1517;
  --nx-btn-primary-fg: #FFFFFF;
  --nx-btn-ghost-bg:   #FFFFFF;
  --nx-btn-ghost-line: #DCE4E4;

  /* ---- Top bar (ink in light, near-black in dark) ---- */
  --nx-topbar-bg:      #0C1517;
  --nx-topbar-line:    transparent;
  --nx-topbar-fg:      #F2F5F5;
  --nx-topbar-dim:     #7E9494;
  --nx-topbar-active:  #FFFFFF;   /* active tab label on the always-dark bar */

  /* ---- Misc ---- */
  --nx-on-rose:        #FFFFFF;   /* text on a solid rose fill */
  --nx-dashed-line:    #C6D2D2;   /* NOT LINKED tag, + Filter button */
  --nx-overlay:        rgba(12, 21, 23, .52);

  /* ================= Non-colour tokens (theme-invariant) ========= */

  /* Fonts */
  --nx-font-sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --nx-font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Type scale */
  --nx-fs-page-title: 25px;   /* 24-26 / 700 */
  --nx-fs-card-title: 16px;   /* / 700 */
  --nx-fs-overline:   10px;   /* / 600, .1em, UPPERCASE */
  --nx-fs-body:       13px;
  --nx-fs-secondary:  12px;
  --nx-fs-secondary-lg: 12.5px;
  --nx-fs-meta:       11px;
  --nx-fs-meta-sm:    10px;
  --nx-fs-kpi:        18px;   /* ribbon */
  --nx-fs-kpi-lg:     30px;   /* wallboard */
  --nx-ls-overline:   .1em;
  --nx-ls-meta:       .08em;

  /* Radii */
  --nx-r-chip:   4px;   /* 3-4 */
  --nx-r-chip-sm:3px;
  --nx-r-control:6px;   /* inputs / buttons */
  --nx-r-card:   8px;   /* 6-8 */
  --nx-r-frame:  12px;  /* frames / modals, 10-12 */

  /* Spacing grid 4/8/12/16/20/24 */
  --nx-s1: 4px;
  --nx-s2: 8px;
  --nx-s3: 12px;
  --nx-s4: 16px;
  --nx-s5: 20px;
  --nx-s6: 24px;
  --nx-gutter: 20px;    /* content gutter */
  --nx-topbar-h: 48px;

  /* Shadows - cards get a 1px border instead of a shadow */
  --nx-shadow-menu:  0 12px 28px rgba(12, 21, 23, .14);
  --nx-shadow-modal: 0 24px 64px rgba(12, 21, 23, .35);

  /* Motion */
  --nx-ease: cubic-bezier(.2, .6, .2, 1);
  --nx-dur:  140ms;
}

/* ---------------------------------------------------------------
   DARK - values from the same table. Declared twice on purpose:
   once for "user has no preference and the OS is dark", once for
   "user explicitly chose dark".
   --------------------------------------------------------------- */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --nx-page-bg:        #0A0E0F;
    --nx-surface:        #101617;
    --nx-sunken:         #0C1214;

    --nx-line:           #1E2A2B;
    --nx-row-divider:    #182022;
    --nx-border-strong:  #2E3D3E;

    --nx-ink:            #E6EDED;
    --nx-ink-strong:     #F2F5F5;
    --nx-muted:          #7E9494;
    --nx-faint:          #5C7070;
    --nx-empty:          #4E6263;

    --nx-accent:         #2DD4BF;
    --nx-accent-text:    #5EEAD4;
    --nx-accent-soft-bg: #0F2A26;
    --nx-accent-soft-fg: #5EEAD4;
    --nx-accent-soft-line: #1C4740;
    --nx-live-bg:        #0F2A26;

    --nx-selected-row:   #0F1D1C;
    --nx-selected-row-2: #0F2A26;

    --nx-green-fg:       #4ADE80;
    --nx-green-bg:       #12291B;
    --nx-green-dot:      #4ADE80;

    --nx-amber-fg:       #FBBF24;
    --nx-amber-bg:       #2C230D;
    --nx-amber-dot:      #FBBF24;
    --nx-amber-tint:     #1E1708;
    --nx-amber-tint-2:   #1E1708;
    --nx-amber-tint-line:#3A2E10;
    --nx-amber-strong:   #FBBF24;

    --nx-rose-fg:        #FB7185;
    --nx-rose-fg-2:      #FB7185;
    --nx-rose-bg:        #331119;
    --nx-rose-line:      #4A2530;
    --nx-rose-tint:      #170D11;

    --nx-btn-primary-bg: #2DD4BF;
    --nx-btn-primary-fg: #062B26;
    --nx-btn-ghost-bg:   #101617;
    --nx-btn-ghost-line: #2E3D3E;

    --nx-topbar-bg:      #0A0E0F;
    --nx-topbar-line:    #1E2A2B;
    --nx-topbar-fg:      #F2F5F5;
    --nx-topbar-dim:     #7E9494;
    --nx-topbar-active:  #FFFFFF;
    --nx-on-rose:        #2A0A11;

    --nx-dashed-line:    #2E3D3E;
    --nx-overlay:        rgba(0, 0, 0, .6);

    --nx-shadow-menu:  0 12px 28px rgba(0, 0, 0, .45);
    --nx-shadow-modal: 0 24px 64px rgba(0, 0, 0, .6);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --nx-page-bg:        #0A0E0F;
  --nx-surface:        #101617;
  --nx-sunken:         #0C1214;

  --nx-line:           #1E2A2B;
  --nx-row-divider:    #182022;
  --nx-border-strong:  #2E3D3E;

  --nx-ink:            #E6EDED;
  --nx-ink-strong:     #F2F5F5;
  --nx-muted:          #7E9494;
  --nx-faint:          #5C7070;
  --nx-empty:          #4E6263;

  --nx-accent:         #2DD4BF;
  --nx-accent-text:    #5EEAD4;
  --nx-accent-soft-bg: #0F2A26;
  --nx-accent-soft-fg: #5EEAD4;
  --nx-accent-soft-line: #1C4740;
  --nx-live-bg:        #0F2A26;

  --nx-selected-row:   #0F1D1C;
  --nx-selected-row-2: #0F2A26;

  --nx-green-fg:       #4ADE80;
  --nx-green-bg:       #12291B;
  --nx-green-dot:      #4ADE80;

  --nx-amber-fg:       #FBBF24;
  --nx-amber-bg:       #2C230D;
  --nx-amber-dot:      #FBBF24;
  --nx-amber-tint:     #1E1708;
  --nx-amber-tint-2:   #1E1708;
  --nx-amber-tint-line:#3A2E10;
  --nx-amber-strong:   #FBBF24;

  --nx-rose-fg:        #FB7185;
  --nx-rose-fg-2:      #FB7185;
  --nx-rose-bg:        #331119;
  --nx-rose-line:      #4A2530;
  --nx-rose-tint:      #170D11;

  --nx-btn-primary-bg: #2DD4BF;
  --nx-btn-primary-fg: #062B26;
  --nx-btn-ghost-bg:   #101617;
  --nx-btn-ghost-line: #2E3D3E;

  --nx-topbar-bg:      #0A0E0F;
  --nx-topbar-line:    #1E2A2B;
  --nx-topbar-fg:      #F2F5F5;
  --nx-topbar-dim:     #7E9494;
  --nx-topbar-active:  #FFFFFF;
  --nx-on-rose:        #2A0A11;

  --nx-dashed-line:    #2E3D3E;
  --nx-overlay:        rgba(0, 0, 0, .6);

  --nx-shadow-menu:  0 12px 28px rgba(0, 0, 0, .45);
  --nx-shadow-modal: 0 24px 64px rgba(0, 0, 0, .6);
}