/* ============================================================
   Narvyn Invoice — "Celadon Court" theme (light)
   Jade-ceramic celadon ground, deep pine accent, ink-green text.
   Loads AFTER app.css and re-skins the compiled Tailwind utilities
   by overriding the design-token variables; component polish on top.
   No build step required.
   ============================================================ */

/* ------------------------------------------------ 1. Design tokens */
:root, :host {
  /* Celadon paper ground, porcelain panels, white fields */
  --color-obsidian:  #EFF4EE;   /* page canvas (also text on accent fills) */
  --color-graphite:  #FAFCF9;   /* cards / panels */
  --color-surface:   #FFFFFF;   /* inputs / raised fields */
  /* Deep pine accent, pine-ink emphasis, ink-green body text */
  --color-gold:      #1D5F57;   /* accent (buttons, links, active nav) */
  --color-champagne: #0E3A32;   /* emphasised values / headings */
  --color-ivory:     #14261E;   /* body text */
  --color-secondary: #5C7265;   /* muted text */
  /* "white" powers the hairlines & hover washes (white/5, white/10…):
     on a light ground those must be ink-based, so white IS ink here. */
  --color-white:     #14261E;
  /* Status semantics — kept distinct from the teal accent */
  --color-success:   #1E8A4C;
  --color-warning:   #9A6A10;
  --color-error:     #C0303A;
  --color-info:      #1D5E9E;
  /* Status text ramps (templates use *-200/*-300 shades): dark-on-light */
  --color-emerald-200: #2C7A50;
  --color-emerald-300: #1D6B44;
  --color-red-200:     #A83440;
  --color-red-300:     #A32D2D;
  --color-red-500:     #C0303A;
  --color-amber-200:   #8F5E0E;
  --color-amber-300:   #85560B;
  --color-blue-200:    #2762A8;
  --color-blue-300:    #1D5E9E;
}

/* ------------------------------------------------ 2. Page canvas */
body {
  background-color: var(--color-obsidian);
  background-image:
    radial-gradient(1100px 480px at 85% -10%, rgba(29, 95, 87, 0.06), transparent 60%),
    radial-gradient(900px 600px at -15% 110%, rgba(30, 138, 76, 0.04), transparent 55%),
    linear-gradient(180deg, #F1F5F0 0%, #ECF2EB 100%);
  background-attachment: fixed;
}
::selection { background: rgba(29, 95, 87, 0.18); color: #0E3A32; }

/* Refined light scrollbars */
* { scrollbar-width: thin; scrollbar-color: #C7D4C9 transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb {
  background: #C7D4C9; border-radius: 8px;
  border: 2px solid transparent; background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background-color: #AEC0B2; }

/* ------------------------------------------------ 3. Typography */
h1 { letter-spacing: -0.015em; }
main h1 {
  background: linear-gradient(105deg, #14261E 55%, #1D5F57 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, #FCFDFB 0%, #F7FAF6 70%);
  border-color: rgba(20, 38, 30, 0.08);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.8) inset,
    0 10px 28px -20px rgba(18, 40, 31, 0.25);
}
/* Section header hairline: whisper of pine 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) — glazed ceramic 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(29, 95, 87, 0.35);
  transform: translateY(-1px);
}

/* ------------------------------------------------ 5. Sidebar & nav */
aside.bg-graphite {
  background-image: linear-gradient(180deg, #F8FBF7 0%, #F2F7F1 100%);
  background-color: #F6FAF5;
  border-right-color: rgba(20, 38, 30, 0.08);
}
aside nav a { position: relative; transition: color .15s, background-color .15s; }
aside nav a[aria-current="page"] {
  background: linear-gradient(90deg, rgba(29, 95, 87, 0.12), rgba(29, 95, 87, 0.03));
  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); }

/* Top bar: light glass */
header.sticky {
  background: rgba(243, 247, 242, 0.82);
  border-bottom-color: rgba(20, 38, 30, 0.08);
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
}

/* Mobile bottom nav + More sheet */
nav.fixed.bottom-0 {
  background: rgba(247, 250, 246, 0.94);
  border-top-color: rgba(20, 38, 30, 0.09);
}
#more-sheet {
  background: rgba(250, 252, 249, 0.98) !important;
  border-color: rgba(20, 38, 30, 0.12) !important;
}

/* ------------------------------------------------ 6. Buttons */
.bg-gold {
  background-image: linear-gradient(180deg, #256B62 0%, #1A5750 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.18) inset,
    0 6px 16px -8px rgba(29, 95, 87, 0.55);
  transition: filter .15s ease, transform .12s ease, box-shadow .15s ease;
  color: #F1FAF6;
}
.bg-gold:hover {
  background-image: linear-gradient(180deg, #2C7A70 0%, #21645C 100%);
  filter: saturate(1.05);
  transform: translateY(-1px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.22) inset,
    0 10px 22px -10px rgba(29, 95, 87, 0.6);
}
.bg-gold:active { transform: translateY(0); }
/* Outline-accent 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(29, 95, 87, 0.7);
}

/* ------------------------------------------------ 7. Forms */
input, select, textarea {
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
  color: var(--color-ivory);
}
input:focus, select:focus, textarea:focus {
  box-shadow: 0 0 0 3px rgba(29, 95, 87, 0.16);
  background-color: #FFFFFF;
}
input::placeholder, textarea::placeholder { color: rgba(92, 114, 101, 0.65); }
input[type="date"] { color-scheme: light; }
input[type="checkbox"] { accent-color: #1D5F57 !important; }

/* ------------------------------------------------ 8. Tables */
main table thead tr {
  background: rgba(20, 38, 30, 0.03);
}
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(29, 95, 87, 0.05); }

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

/* ------------------------------------------------ 9. Status accents */
.text-emerald-300 { color: #1D6B44; }
.text-red-300 { color: #A32D2D; }
.text-amber-300 { color: #85560B; }
.text-sky-300 { color: #1D5E9E; }

/* Message toasts: porcelain + accent bar */
[role="status"] > div {
  border-left-width: 3px;
  background-color: #FFFFFF;
  backdrop-filter: blur(8px);
  box-shadow: 0 10px 24px -16px rgba(18, 40, 31, 0.35);
}

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

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

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

/* A revealed secret must not survive into a print-to-PDF. */
@media print {
  [data-vault-output],
  [data-vault-secret] { display: none !important; }
}