/* NGT DB CRM — tokens, surface engine, base. Shared by login + dashboard. */
/* ── TOKENS ─────────────────────────────────────
   --sx / --sy : direction shadows are cast (one light source, set by the login dial)
   --depth     : 0 flat → 1 fully extruded            */
@property --depth { syntax: "<number>"; inherits: true; initial-value: 1; }

:root {
  color-scheme: light;
  --bg: #e4e8ee;
  --text: #262e3d;
  --muted: #566174;
  --faint: #5d6879;
  --sh: rgba(136, 150, 175, .6);
  --hl: rgba(255, 255, 255, .95);
  --rim-hi: rgba(255, 255, 255, .75);
  --rim-lo: rgba(110, 125, 150, .16);
  --line: rgba(126, 140, 164, .34);
  --engrave: rgba(255, 255, 255, .85);
  --row-hover: rgba(126, 140, 164, .12);
  --scrim: rgba(60, 70, 90, .38);
  --accent: #f3a03a;
  --accent-ink: #8f4400;
  --on-accent: #2a1806;
  --accent-glow: rgba(243, 160, 58, .5);
  --accent-rim-hi: rgba(255, 236, 205, .9);
  --accent-rim-lo: rgba(150, 78, 4, .3);
  --accent-press-sh: rgba(160, 84, 6, .45);
  --accent-press-hl: rgba(255, 222, 170, .7);
  --ring: #8f4400;
  --danger: #ad231b;
  --success: #17693f;
  --info: #1f5f9e;
  --warn: #875400;
  --glow: rgba(255, 250, 242, .55);
  --spec: rgba(255, 255, 255, .75);
  --vignette: rgba(70, 84, 110, .09);
  --grain: .05;
  --skel-a: rgba(126, 140, 164, .17);
  --skel-b: rgba(255, 255, 255, .6);

  --sx: 1;
  --sy: 1;
  --beta: 315;
  --depth: 1;
  --shadow-t: .3s;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --spring: cubic-bezier(.34, 1.45, .64, 1);
  --f-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --f-ui: "Onest", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-mono: "Martian Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #24272d;
  --text: #e8ebf0;
  --muted: #a9b1bd;
  --faint: #8d96a3;
  --sh: rgba(6, 7, 10, .62);
  --hl: rgba(255, 255, 255, .06);
  --rim-hi: rgba(255, 255, 255, .07);
  --rim-lo: rgba(0, 0, 0, .3);
  --line: rgba(0, 0, 0, .42);
  --engrave: rgba(255, 255, 255, .06);
  --row-hover: rgba(255, 255, 255, .04);
  --scrim: rgba(8, 9, 12, .6);
  --accent: #ffad47;
  --accent-ink: #ffb65c;
  --on-accent: #231303;
  --accent-glow: rgba(255, 160, 60, .42);
  --accent-rim-hi: rgba(255, 230, 190, .75);
  --accent-rim-lo: rgba(120, 58, 0, .45);
  --accent-press-sh: rgba(120, 58, 0, .6);
  --accent-press-hl: rgba(255, 214, 160, .5);
  --ring: #ffb65c;
  --danger: #ff8a80;
  --success: #6fd9a0;
  --info: #84bdf5;
  --warn: #f0c36a;
  --glow: rgba(255, 150, 60, .1);
  --spec: rgba(255, 255, 255, .08);
  --vignette: rgba(0, 0, 0, .38);
  --grain: .06;
  --skel-a: rgba(255, 255, 255, .05);
  --skel-b: rgba(255, 255, 255, .13);
}

/* Accent themes (amber "Ember" is the default above) */
:root[data-accent="indigo"] { --accent:#8a90f7; --accent-ink:#3d41b8; --on-accent:#0f1140; --ring:#3d41b8; --accent-glow:rgba(120,128,245,.5); --accent-rim-hi:rgba(230,232,255,.9); --accent-rim-lo:rgba(50,55,160,.3); --accent-press-sh:rgba(60,65,170,.45); --accent-press-hl:rgba(215,218,255,.7); }
:root[data-accent="teal"]   { --accent:#39c1ae; --accent-ink:#0a655a; --on-accent:#03241f; --ring:#0a655a; --accent-glow:rgba(45,185,165,.48); --accent-rim-hi:rgba(210,250,243,.9); --accent-rim-lo:rgba(5,100,88,.3); --accent-press-sh:rgba(8,110,96,.45); --accent-press-hl:rgba(190,245,235,.7); }
:root[data-accent="rose"]   { --accent:#f4849f; --accent-ink:#a31f47; --on-accent:#3a0615; --ring:#a31f47; --accent-glow:rgba(240,110,140,.48); --accent-rim-hi:rgba(255,226,233,.9); --accent-rim-lo:rgba(160,30,70,.3); --accent-press-sh:rgba(170,35,75,.45); --accent-press-hl:rgba(255,210,222,.7); }
:root[data-accent="violet"] { --accent:#b48af3; --accent-ink:#6229b8; --on-accent:#1f0a3f; --ring:#6229b8; --accent-glow:rgba(170,125,240,.48); --accent-rim-hi:rgba(240,228,255,.9); --accent-rim-lo:rgba(90,40,170,.3); --accent-press-sh:rgba(95,45,175,.45); --accent-press-hl:rgba(228,212,255,.7); }
:root[data-theme="dark"][data-accent="indigo"] { --accent:#979dff; --accent-ink:#adb2ff; --on-accent:#11133a; --ring:#adb2ff; --accent-glow:rgba(140,148,255,.42); --accent-rim-hi:rgba(230,232,255,.75); --accent-rim-lo:rgba(40,44,130,.45); --accent-press-sh:rgba(40,44,130,.6); --accent-press-hl:rgba(210,214,255,.5); }
:root[data-theme="dark"][data-accent="teal"]   { --accent:#4fd6c3; --accent-ink:#6be3d2; --on-accent:#04251f; --ring:#6be3d2; --accent-glow:rgba(70,210,190,.38); --accent-rim-hi:rgba(210,250,243,.75); --accent-rim-lo:rgba(0,90,78,.45); --accent-press-sh:rgba(0,90,78,.6); --accent-press-hl:rgba(180,245,235,.5); }
:root[data-theme="dark"][data-accent="rose"]   { --accent:#ff8fa8; --accent-ink:#ffa3b8; --on-accent:#3a0615; --ring:#ffa3b8; --accent-glow:rgba(255,130,160,.38); --accent-rim-hi:rgba(255,226,233,.75); --accent-rim-lo:rgba(130,20,55,.45); --accent-press-sh:rgba(130,20,55,.6); --accent-press-hl:rgba(255,205,218,.5); }
:root[data-theme="dark"][data-accent="violet"] { --accent:#c29cff; --accent-ink:#cdaeff; --on-accent:#1f0a3f; --ring:#cdaeff; --accent-glow:rgba(185,145,255,.38); --accent-rim-hi:rgba(240,228,255,.75); --accent-rim-lo:rgba(70,30,140,.45); --accent-press-sh:rgba(70,30,140,.6); --accent-press-hl:rgba(225,208,255,.5); }

/* While the light is moving, shadows follow it 1:1 (no transition lag). */
:root.light-live { --shadow-t: 0s; }

/* ── SURFACE ENGINE ─────────────────────────────
   Raised and pressed lists keep the same slot types (outer, outer, inset, inset)
   so the browser morphs between them instead of jumping. */
.nm, .card, .stat, .camp-card, .btn, .ibtn, .sidebar, .modal, .toast, .control,
.field input, .field select, .field textarea, .pill, .seg, .seg-thumb, .pop,
.pg-btn, .tgl-track, .tgl-knob, .well, .check input, .mini-sel, .tbl-shell, .ph-block, .skel-block,
.pp-sel, .logo, .logo-core, .card-ico, .stat-ico, .empty-ico, .camp-filter input {
  --d: 6px;
  --ox: calc(var(--d) * var(--sx) * var(--depth));
  --oy: calc(var(--d) * var(--sy) * var(--depth));
  --bl: calc(var(--d) * 2.2 * var(--depth));
  --rx: calc(var(--sx) * var(--depth) * 1px);
  --ry: calc(var(--sy) * var(--depth) * 1px);
  --raise:
    var(--ox) var(--oy) var(--bl) var(--sh),
    calc(var(--ox) * -1) calc(var(--oy) * -1) var(--bl) var(--hl),
    inset var(--rx) var(--ry) calc(var(--depth) * 1.5px) var(--rim-hi),
    inset calc(var(--rx) * -1) calc(var(--ry) * -1) calc(var(--depth) * 2px) var(--rim-lo);
  --press:
    0 0 0 transparent,
    0 0 0 transparent,
    inset var(--ox) var(--oy) var(--bl) var(--sh),
    inset calc(var(--ox) * -1) calc(var(--oy) * -1) var(--bl) var(--hl);
}

/* ── BASE ────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  font: 400 15px/1.55 var(--f-ui);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
::selection { background: var(--accent); color: var(--on-accent); }
:focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; }
[tabindex="-1"]:focus { outline: none; }
button { touch-action: manipulation; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ic {
  display: block; flex: none; width: 20px; height: 20px;
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.sr-only {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* Smooth theme switch ("lamp" on / off). */
.theme-anim, .theme-anim *:not(input), .theme-anim *::before, .theme-anim *::after {
  transition:
    background-color .6s var(--ease), color .6s var(--ease), box-shadow .6s var(--ease),
    outline-color .6s, fill .6s, stroke .6s, opacity .3s, transform .5s var(--spring) !important;
}

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