/* ============================================================================
   nimryx.css — THE single source of truth for the NIMRYX app surface.
   ============================================================================

   Why this file exists
   --------------------
   Before it, an office page loaded up to four stylesheets that each declared
   their own --bg, and whichever happened to be linked last decided the page:

     app.css          --bg #080812   (dark navy)
     shell.css        --bg #020E1C   (dark teal)
     design-system.css--bg-base #F4F5F7
     theme-glass.css  --bg #F4F7FC   ← won on the Shell pages

   Meanwhile the standalone pages shipped their own :root at #F7F9FC, the
   transporter portal sat at #eef1f7, the upload portal at #EEF1F6, public
   tracking at #f4f6fb and the transporter login at a beige #f5f3ef. Five
   near-identical-but-different greys, three competing blues (#1A73FF, #2563EB,
   #0EA5E9) and two radii — so moving between pages read as moving between
   products.

   How it works
   ------------
   This file is linked LAST on every app page. It restates the canonical palette
   AND re-points every legacy token name (--t1, --b1, --s1, --blue, --gold,
   --dp-…, --st-… ) at that palette, so components written against the old dark
   tokens
   render in the house style without any of them being edited or deleted. Adding
   the link is therefore additive and reversible: remove it and the old cascade
   returns exactly as it was.

   Rules
   -----
   • Change a colour HERE. Never in a page's <style> block. The css-consistency
     guard fails the build on any page that redeclares the palette.
   • Page <style> blocks are for layout, not for tokens.
   • Marketing, legal, SUPX and the owner panel are deliberately a different,
     darker brand skin and do not link this file.
============================================================================ */

:root,
[data-skin="light"] {
  /* ── ground + surfaces ──────────────────────────────────────────────── */
  --bg:            #F7F9FC;
  --background:    #F7F9FC;
  --bg-base:       #F7F9FC;
  --surface:       #FFFFFF;
  --surface2:      #F7F9FB;
  --bg-surface:    #FFFFFF;
  --bg-card:       #FFFFFF;
  --bg-card-hover: #F3F6FB;
  --bg-input:      #F7F9FB;
  --bg-sidebar:    #FFFFFF;

  /* ── borders ───────────────────────────────────────────────────────── */
  --border:        #E2E7EF;
  --line:          #E2E7EF;
  --border-active: #1A73FF;

  /* ── text ──────────────────────────────────────────────────────────── */
  --text:           #111827;
  --text2:          #64748B;
  --text3:          #9CA3AF;
  --text-secondary: #64748B;
  --text-muted:     #9CA3AF;
  --muted:          #64748B;
  --faint:          #9CA3AF;

  /* ── accent + status ───────────────────────────────────────────────── */
  --accent:        #1A73FF;
  --accent-light:  #E8F0FE;
  --accent-dark:   #1557CC;
  --primary:       #1A73FF;
  --primary-dark:  #1557CC;
  --acc:           #1A73FF;

  --green:   #059669;  --green-l: #D1FAE5;  --success: #059669;
  --amber:   #D97706;  --amber-l: #FEF3C7;  --warning: #D97706;
  --red:     #DC2626;  --red-l:   #FEE2E2;  --danger:  #DC2626;
  --purple:  #7C3AED;

  /* ── type ──────────────────────────────────────────────────────────── */
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --mono: 'SF Mono', 'Fira Mono', Consolas, 'Courier New', monospace;
  --fs-2xs: 10px;  --fs-xs: 11px;  --fs-sm: 12.5px;
  --fs-base: 14px; --fs-lg: 16px;  --fs-xl: 20px;

  /* ── shape ─────────────────────────────────────────────────────────── */
  --radius-sm: 8px;  --r-sm: 8px;
  --radius-md: 12px; --r-md: 12px;
  --radius-lg: 20px; --r-lg: 20px;
  --r-xl: 20px;      --rd-xl: 20px;  --radius: 12px;

  /* ── spacing ───────────────────────────────────────────────────────── */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;

  /* ── elevation — flat house style, kept subtle ─────────────────────── */
  --shadow-sm: 0 1px 2px rgba(16,24,40,.04);
  --shadow:    0 1px 3px rgba(16,24,40,.06);
  --shadow-md: 0 1px 3px rgba(16,24,40,.06);
  --shadow-lg: 0 4px 14px rgba(16,24,40,.08);
  --shadow-xl: 0 4px 14px rgba(16,24,40,.08);
  --sh-sm: var(--shadow-sm); --sh-md: var(--shadow-md);
  --sh-lg: var(--shadow-lg); --sh-xl: var(--shadow-xl);

  --transition: 160ms cubic-bezier(.4,0,.2,1);
  --tn: 160ms cubic-bezier(.4,0,.2,1);
  --tf: 110ms cubic-bezier(.4,0,.2,1);

  --sidebar-w: 248px;

  /* ══ legacy aliases ════════════════════════════════════════════════════
     Old dark-theme token names, re-pointed at the house palette so pages and
     components written against them inherit the unified look untouched. */

  /* surfaces s1..s4 were dark panels; now they step from white to ground */
  --s1: #FFFFFF;
  --s2: #FFFFFF;
  --s3: #F7F9FB;
  --s4: #F0F3F9;

  /* borders b1..b3 were dark strokes */
  --b1: #E2E7EF;
  --b2: #D6DDE9;
  --b3: #C3CCDC;

  /* text t1..t3 ran light-on-dark; invert the ramp */
  --t1: #111827;
  --t2: #64748B;
  --t3: #9CA3AF;
  --t4: #E2E7EF;

  /* the old neon accents */
  --blue:      #1A73FF;
  --blue-b:    #1557CC;
  --blue-d:    rgba(26,115,255,.10);
  --blue-soft: #E8F0FE;
  --blue-glow: none;
  --blue-g:    #1A73FF;          /* was a gradient — house style is flat */
  --green-d:   rgba(5,150,105,.10);
  --green-g:   #059669;
  --amber-d:   rgba(217,119,6,.10);
  --amber-dim: rgba(217,119,6,.10);
  --amber-soft:#FEF3C7;
  --amber-g:   #D97706;
  --amber-glow:none;
  --red-d:     rgba(220,38,38,.10);
  --red-g:     #DC2626;

  /* the gold brand accent belongs to the marketing skin; on the app surface it
     resolves to the house accent so a stray reference cannot reintroduce it */
  --gold:   #1A73FF;
  --gold-l: #E8F0FE;
  --gold-d: rgba(26,115,255,.10);
  --gold-g: #1A73FF;

  /* glass panels flatten to plain surfaces — no blur in the house style */
  --glass:        #FFFFFF;
  --glass-bg:     #FFFFFF;
  --glass-border: #E2E7EF;

  /* trip-detail (dp-*) and settings (st-*) local scales */
  --dp-card: #FFFFFF;  --dp-raised: #F7F9FB;
  --dp-brd:  #E2E7EF;  --dp-brd-h:  #D6DDE9;
  --dp-t1:   #111827;  --dp-t2: #64748B;  --dp-t3: #9CA3AF;
  --dp-blue: #1A73FF;  --dp-green: #059669;
  --dp-red:  #DC2626;  --dp-amber: #D97706;
  --st-primary: #1A73FF; --st-line: #E2E7EF; --st-muted: #64748B;

  --pm: #1A73FF;   /* primary alias used by a few pages */
  --hk: #E8F0FE;   /* highlight/hover key */
}

/* ── base ──────────────────────────────────────────────────────────────────
   One body for every page: same ground, same type, same rendering. Pages had
   been setting their own font stack and background here; this settles it. */
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--fs-base);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Cards and KPI tiles share one corner across the app — these had drifted to
   10/12/14px on different pages against the 20px house style. */
.card, .kpi, .panel, .tile {
  border-radius: var(--radius-lg);
}

/* Controls share the smaller corner. */
.btn, button.btn, .pill, input.f, select.f, textarea.f {
  border-radius: var(--radius-sm);
}

/* Tabular figures wherever numbers stack in a column, so they line up. */
.mono, .num, td.num, .kv, .kpi .kv {
  font-variant-numeric: tabular-nums;
}

/* Focus is visible on every interactive element, one treatment everywhere. */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* The Settings "Reduce motion" switch has always set html.reduce-motion, and
   until now no stylesheet read that class, so the toggle did nothing at all.
   This is its consumer. It lives here because nimryx.css is linked last on
   every app page, which is what the toggle's scope (documentElement) needs.

   animation-iteration-count is deliberately NOT forced to 1: that would stop a
   loading spinner after a single turn and make pending work look finished.
   Spinners keep spinning; everything else stops moving. */
html.reduce-motion *,
html.reduce-motion *::before,
html.reduce-motion *::after {
  animation-duration: .01ms !important;
  transition-duration: .01ms !important;
  scroll-behavior: auto !important;
}