/* Capslock Supply · FlowDesk — e-Invoice
   Design System (Operate mode)
   Surfaces: obsidian dark, architectural graphite, hairline specular borders.
   Accents: emerald telemetry, high-contrast floating bond paper preview. */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root {
  /* Fonts */
  --font-sans: 'IBM Plex Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Surface Hierarchy (Obsidian) */
  --field:                  #0a0c10;
  --surface-lowest:         #0c0e12;
  --surface-low:            #11141a;
  --surface-card:           #181c24;
  --surface-high:           #282a2e;
  --surface-highest:        #333539;

  --plane:                  #12141a;
  --plane-2:                #181b22;

  /* Typography Colors */
  --fg:                     #e2e2e8;
  --fg-2:                   #bbcabf;
  --fg-3:                   #86948a;

  /* Hairline Specular Borders */
  --spec:                   rgba(255, 255, 255, 0.08);
  --spec-hover:             rgba(255, 255, 255, 0.18);
  --line-soft:              rgba(255, 255, 255, 0.07);
  --line-firm:              rgba(255, 255, 255, 0.15);

  /* Accents & Telemetry */
  --primary:                #4edea3;
  --primary-container:      #10b981;
  --on-primary:             #003824;

  --secondary:              #7bd0ff;
  --secondary-container:    #00a6e0;
  --on-secondary:           #00354a;

  --tertiary:               #ffb2b7;
  --tertiary-container:     #ff7886;

  /* Filing Statuses */
  --good:                   #4edea3;
  --good-wash:              rgba(78, 222, 163, 0.14);
  --good-border:            rgba(78, 222, 163, 0.28);

  --bad:                    #ff8f99;
  --bad-wash:               rgba(255, 120, 134, 0.14);
  --bad-border:             rgba(255, 120, 134, 0.28);

  --wait:                   #7bd0ff;
  --wait-wash:              rgba(123, 208, 255, 0.14);
  --wait-border:            rgba(123, 208, 255, 0.28);

  --gone:                   #86948a;
  --gone-wash:              rgba(134, 148, 138, 0.12);

  /* Primary interactive tint */
  --tint:                   var(--primary);
  --tint-ink:               var(--on-primary);
  --tint-wash:              var(--good-wash);

  /* Glass physics (structural blur only — no decorative drift) */
  --sheet:                  rgba(24, 28, 36, 0.65);
  --sheet-hi:               rgba(255, 255, 255, 0.09);
  --sheet-lo:               rgba(255, 255, 255, 0.035);

  --blur:                   saturate(200%) blur(24px);
  --drop:                   0 4px 16px 0 rgba(0, 0, 0, 0.5);
  --drop-lift:              0 12px 40px rgba(0, 0, 0, 0.7), 0 2px 8px rgba(0, 0, 0, 0.35);

  /* Radii: 4px system, pill only for segdock */
  --r:                      4px;
  --r-sm:                   2px;
  --r-lg:                   6px;
  --r-full:                 9999px;

  /* Spring physics */
  --spring:                 cubic-bezier(.32,.72,0,1);
  --quick:                  180ms var(--spring);
  --calm:                   280ms var(--spring);

  /* The Paper Paradox: Pristine Bond Sheet Canvas */
  --paper:                  #ffffff;
  --paper-ink:              #0f172a;
  --paper-muted:            #64748b;
  --paper-subtle:           #94a3b8;
  --paper-border:           #e2e8f0;
  --paper-bg-row:           #f8fafc;

  /* Aliases for landing & backward compatibility */
  --panel:                  var(--plane-2);
  --surface:                var(--plane);
  --ink:                    var(--fg);
  --ink-2:                  var(--fg-2);
  --ink-3:                  var(--fg-3);
  --rule:                   var(--line-soft);
  --rule-firm:              var(--line-firm);
  --stamp:                  var(--primary);
  --stamp-ink:              var(--on-primary);
  --stamp-wash:             var(--good-wash);
  --stamp-edge:             var(--line-firm);
  --valid:                  var(--good);
  --valid-wash:             var(--good-wash);
  --invalid:                var(--bad);
  --invalid-wash:           var(--bad-wash);
  --pending:                var(--wait);
  --pending-wash:           var(--wait-wash);
  --lift:                   var(--drop);
  --lift-2:                 var(--drop-lift);
}

/* Light Mode Support (Explicit toggle only) */
:root[data-theme="light"] {
    --field:           #f2f4f8;
    --surface-lowest:   #ffffff;
    --surface-low:      #eaecf2;
    --surface-card:     #ffffff;
    --surface-high:     #e2e5ec;
    --plane:            #ffffff;
    --plane-2:          #f7f8fb;
    --fg:               #0f172a;
    --fg-2:             #475569;
    --fg-3:             #64748b;
    --line-soft:        rgba(15, 23, 42, 0.08);
    --line-firm:        rgba(15, 23, 42, 0.16);
    --spec:             rgba(255, 255, 255, 0.9);
    --sheet:            rgba(255, 255, 255, 0.78);
    --sheet-hi:         rgba(255, 255, 255, 0.95);
    --sheet-lo:         rgba(15, 23, 42, 0.03);
    --primary:          #059669;
    --primary-container:#10b981;
    --on-primary:       #ffffff;
    --good:             #059669;
    --good-wash:        rgba(16, 185, 129, 0.12);
    --bad:              #e11d48;
    --bad-wash:         rgba(225, 29, 72, 0.12);
    --wait:             #0284c7;
    --wait-wash:        rgba(2, 132, 199, 0.12);
    --drop:             0 4px 16px rgba(0, 0, 0, 0.08);
    --drop-lift:        0 12px 30px rgba(0, 0, 0, 0.12);
}

/* Base */
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--field);
  color: var(--fg);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Browser surface theming */
:root {
  accent-color: var(--primary);
  caret-color: var(--primary);
  color-scheme: dark;
}

/* Unified focus ring */
:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* Tabular numbers for all financial & hash values */
.num, .font-mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* Custom scrollbars */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--line-firm);
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover { background: var(--fg-3); }

::selection {
  background: rgba(78, 222, 163, 0.3);
  color: #ffffff;
}

@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}