/* ============================================================
   Narvyn Invoice — "Ledger & Gold" theme
   Loads AFTER app.css. Re-skins the compiled Tailwind utilities by
   overriding the design-token variables, then layers hand-tuned
   component polish on top. No build step required.
   ============================================================ */

/* ------------------------------------------------ 1. Design tokens */
:root, :host {
  /* Deep ink-emerald ground — darker and warmer than a generic dark UI */
  --color-obsidian:  #0A0F0D;
  --color-graphite:  #111816;
  --color-surface:   #19231F;
  /* Aged gold, champagne highlight, warm ivory text */
  --color-gold:      #D3A960;
  --color-champagne: #EFDFB4;
  --color-ivory:     #F6F2E8;
  --color-secondary: #7E8A83;
  --color-success:   #2EA47C;
  --color-warning:   #C98F2E;
  --color-error:     #CE4D57;
  --color-info:      #4C8FD6;
}

/* ------------------------------------------------ 2. Page canvas */
body {
  background-color: var(--color-obsidian);
  background-image:
    radial-gradient(1100px 480px at 85% -10%, rgba(211, 169, 96, 0.07), transparent 60%),
    radial-gradient(900px 600px at -15% 110%, rgba(46, 164, 124, 0.05), transparent 55%),
    linear-gradient(180deg, #0B100E 0%, #090E0C 100%);
  background-attachment: fixed;
}
::selection { background: rgba(211, 169, 96, 0.30); color: #FFF8E7; }

/* Subtle refined scrollbars */
* { scrollbar-width: thin; scrollbar-color: #2A352F transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb {
  background: #2A352F; border-radius: 8px;
  border: 2px solid transparent; background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background-color: #3A473F; }

/* ------------------------------------------------ 3. Typography */
h1 { letter-spacing: -0.015em; }
main h1 {
  background: linear-gradient(105deg, #F6F2E8 55%, #E4CD96 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
main h2 { letter-spacing: 0.09em; }

/* ------------------------------------------------ 4. Cards & panels */
main .bg-graphite {
  background-image: linear-gradient(160deg, #131B18 0%, #0F1614 70%);
  border-color: rgba(255, 255, 255, 0.06);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.045) inset,
    0 12px 32px -18px rgba(0, 0, 0, 0.65);
}
/* Section header hairline: whisper of gold under panel titles */
main section > h2:first-child,
main section > div:first-child > h2 {
  position: relative;
}
main section > h2:first-child::after,
main section > div:first-child > h2::after {
  content: ""; position: absolute; left: 1.25rem; bottom: -1px;
  width: 2.25rem; height: 1px;
  background: linear-gradient(90deg, var(--color-gold), transparent);
}

/* Stat tiles (dashboard) — engraved plate feel */
main .bg-graphite.p-5, main .bg-graphite.p-4 {
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
main a.bg-graphite:hover, main .bg-graphite.hover-lift:hover {
  border-color: rgba(211, 169, 96, 0.28);
  transform: translateY(-1px);
}

/* ------------------------------------------------ 5. Sidebar & nav */
aside.bg-graphite {
  background-image: linear-gradient(180deg, #101714 0%, #0C1210 100%);
  background-color: #0E1512;
  border-right-color: rgba(255, 255, 255, 0.05);
}
aside nav a { position: relative; transition: color .15s, background-color .15s; }
aside nav a[aria-current="page"] {
  background: linear-gradient(90deg, rgba(211, 169, 96, 0.14), rgba(211, 169, 96, 0.04));
  color: var(--color-champagne);
  box-shadow: inset 2px 0 0 var(--color-gold);
}
aside nav a[aria-current="page"] span:first-child { color: var(--color-gold); }

/* Brand wordmark glow */
aside .font-heading.font-bold.tracking-\[0\.18em\] {
  text-shadow: 0 0 18px rgba(211, 169, 96, 0.35);
}

/* Top bar: deeper glass */
header.sticky {
  background: rgba(9, 14, 12, 0.78);
  border-bottom-color: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(14px) saturate(1.15);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
}

/* Mobile bottom nav */
nav.fixed.bottom-0 {
  background: rgba(13, 19, 16, 0.92);
  border-top-color: rgba(255, 255, 255, 0.06);
}

/* ------------------------------------------------ 6. Buttons */
.bg-gold {
  background-image: linear-gradient(180deg, #E2BC74 0%, #C89D53 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.35) inset,
    0 6px 16px -8px rgba(211, 169, 96, 0.55);
  transition: filter .15s ease, transform .12s ease, box-shadow .15s ease;
}
.bg-gold:hover {
  background-image: linear-gradient(180deg, #EFD198 0%, #D3A960 100%);
  filter: saturate(1.05);
  transform: translateY(-1px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.4) inset,
    0 10px 22px -10px rgba(211, 169, 96, 0.65);
}
.bg-gold:active { transform: translateY(0); }

/* Outline-gold buttons */
a.border-gold\/40, button.border-gold\/40 {
  transition: background-color .15s, border-color .15s, color .15s;
}
a.border-gold\/40:hover, button.border-gold\/40:hover {
  border-color: rgba(211, 169, 96, 0.7);
}

/* ------------------------------------------------ 7. Forms */
input, select, textarea {
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
input:focus, select:focus, textarea:focus {
  box-shadow: 0 0 0 3px rgba(211, 169, 96, 0.18);
  background-color: #1C2723;
}
input::placeholder, textarea::placeholder { color: rgba(126, 138, 131, 0.65); }
input[type="date"] { color-scheme: dark; }
input[type="checkbox"] { accent-color: #D3A960; }

/* ------------------------------------------------ 8. Tables */
main table thead tr {
  background: rgba(255, 255, 255, 0.025);
}
main table thead th { letter-spacing: 0.1em; font-weight: 600; padding-top: 0.75rem; padding-bottom: 0.75rem; }
main table tbody tr { transition: background-color .12s ease; }
main table tbody tr:hover { background: rgba(211, 169, 96, 0.045); }

/* Numbers: consistent tabular alignment */
.tabular { font-variant-numeric: tabular-nums lining-nums; }

/* ------------------------------------------------ 9. Status accents */
.text-emerald-300 { color: #5CD6A9; }
.text-red-300 { color: #F1808A; }
.text-amber-300 { color: #EBC26E; }
.text-sky-300 { color: #85BCEC; }

/* Message toasts: glass + accent bar */
[role="status"] > div {
  border-left-width: 3px;
  backdrop-filter: blur(8px);
  box-shadow: 0 10px 24px -16px rgba(0, 0, 0, 0.6);
}

/* Filter tabs (documents list) */
main a[href^="?status"] { transition: background-color .15s, color .15s; }

/* ------------------------------------------------ 10. Focus ring */
:focus-visible {
  outline: 2px solid rgba(211, 169, 96, 0.85);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Reduced motion: the reset in app.css already zeroes transitions. */