/* ==========================================================================
   Admin skin for new-api  —  "Ledger" design system (matches the marketing site)
   --------------------------------------------------------------------------
   Injected by Caddy into every new-api HTML page on the ADMIN host only
   (admin.localhost / admin.yourdomain.com, see ../Caddyfile). Customers never
   see this UI; they use the Astro console at /console on the marketing site.

   new-api's UI (v1.x) is Tailwind v4 + shadcn-style CSS variables:
     :root -> light mode      html.dark -> dark mode
     body[data-theme-preset=...] -> optional per-user colour presets
   Only those VARIABLES are overridden (no layout selectors), with !important so
   they win over the app's own CSS, lazy-loaded CSS and any user preset.

   Palette source of truth: CLAUDE.md -> Design system "Ledger".
   Light: paper / surface / ink, one accent (Ledger blue #2F4F8F).
   Dark:  night tones, accent-on-night #A9BCE4.
   No gradients, no glows, no shadows beyond floating layers.

   After editing: bump BRAND_VERSION in gateway/.env and run
     docker compose up -d caddy
   Hard-refresh the browser (Ctrl+F5) to see the change.
   ========================================================================== */

/* ---------- Font: Inter, self-hosted (same origin, no external CDN) -------- */
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/_brand/fonts/inter-latin-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
    U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
    U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/_brand/fonts/inter-latin-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Ledger tokens (named, for the rules below) --------------------- */
html {
  --lk-paper: #f7f6f2;
  --lk-surface: #ffffff;
  --lk-sunken: #efede7;
  --lk-line: #e2dfd7;
  --lk-line-strong: #cfcbc1;
  --lk-ink: #141518;
  --lk-ink-2: #3d3f45;
  --lk-muted: #66676d;
  --lk-night: #111214;
  --lk-night-2: #1a1c20;
  --lk-night-line: #2a2d33;
  --lk-night-text: #e6e4de;
  --lk-night-muted: #9b9da3;
  --lk-accent: #2f4f8f;
  --lk-accent-hover: #233d70;
  --lk-accent-tint: #e8ecf5;
  --lk-accent-on-night: #a9bce4;
  --lk-success: #2e7d4f;
  --lk-warning: #9a6a00;
  --lk-danger: #b3261e;
  /* model families (data-viz only) */
  --lk-claude: #a8613f;
  --lk-gpt: #3e7a6b;
  --lk-grok: #55575e;
  --lk-glm: #5a6a9c;
  --lk-other: #8a7a55;
}

/* ---------- LIGHT mode ----------------------------------------------------- */
/* Primary actions are ink (confidence through restraint); accent is reserved
   for focus rings, links and the active navigation item. */
html,
html body {
  --font-sans: 'Inter Variable', 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI',
    Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'PingFang SC', 'Microsoft YaHei', sans-serif !important;
  --font-mono: ui-monospace, 'JetBrains Mono', SFMono-Regular, Menlo, Consolas, monospace !important;
  --radius: 0.625rem !important; /* 10px panels; shadcn derives 6px controls from it */

  --background: var(--lk-paper) !important;
  --foreground: var(--lk-ink) !important;
  --card: var(--lk-surface) !important;
  --card-foreground: var(--lk-ink) !important;
  --popover: var(--lk-surface) !important;
  --popover-foreground: var(--lk-ink) !important;

  --primary: var(--lk-ink) !important;
  --primary-foreground: var(--lk-paper) !important;
  --secondary: var(--lk-sunken) !important;
  --secondary-foreground: var(--lk-ink) !important;
  --muted: var(--lk-sunken) !important;
  --muted-foreground: var(--lk-muted) !important;
  --accent: var(--lk-accent-tint) !important;
  --accent-foreground: var(--lk-accent-hover) !important;

  --destructive: var(--lk-danger) !important;
  --destructive-foreground: #ffffff !important;
  --success: var(--lk-success) !important;
  --success-foreground: #ffffff !important;
  --warning: var(--lk-warning) !important;
  --warning-foreground: #ffffff !important;
  --info: var(--lk-accent) !important;
  --info-foreground: #ffffff !important;
  --neutral: var(--lk-muted) !important;
  --neutral-foreground: #ffffff !important;

  --border: var(--lk-line) !important;
  --input: var(--lk-line-strong) !important;
  --ring: var(--lk-accent) !important;

  --chart-1: var(--lk-claude) !important;
  --chart-2: var(--lk-gpt) !important;
  --chart-3: var(--lk-glm) !important;
  --chart-4: var(--lk-grok) !important;
  --chart-5: var(--lk-other) !important;
  --overview-accent-1: var(--lk-accent) !important;
  --overview-accent-2: var(--lk-gpt) !important;
  --overview-accent-3: var(--lk-claude) !important;

  --sidebar: var(--lk-paper) !important;
  --sidebar-foreground: var(--lk-ink-2) !important;
  --sidebar-primary: var(--lk-ink) !important;
  --sidebar-primary-foreground: var(--lk-paper) !important;
  --sidebar-accent: var(--lk-accent-tint) !important;
  --sidebar-accent-foreground: var(--lk-accent-hover) !important;
  --sidebar-border: var(--lk-line) !important;
  --sidebar-ring: var(--lk-accent) !important;

  --skeleton-base: var(--lk-sunken) !important;
  --skeleton-highlight: var(--lk-paper) !important;
}

/* ---------- DARK mode (night tones) ----------------------------------------- */
html.dark,
html.dark body {
  --background: var(--lk-night) !important;
  --foreground: var(--lk-night-text) !important;
  --card: var(--lk-night-2) !important;
  --card-foreground: var(--lk-night-text) !important;
  --popover: var(--lk-night-2) !important;
  --popover-foreground: var(--lk-night-text) !important;

  --primary: var(--lk-night-text) !important; /* light button, night text */
  --primary-foreground: var(--lk-night) !important;
  --secondary: var(--lk-night-2) !important;
  --secondary-foreground: var(--lk-night-text) !important;
  --muted: var(--lk-night-2) !important;
  --muted-foreground: var(--lk-night-muted) !important;
  --accent: #1f2633 !important; /* night-2 with a trace of Ledger blue */
  --accent-foreground: var(--lk-accent-on-night) !important;

  --destructive: #e0675f !important; /* danger lifted for 4.5:1 on night */
  --destructive-foreground: var(--lk-night) !important;
  --success: #6bb38a !important;
  --success-foreground: var(--lk-night) !important;
  --warning: #d4a63a !important;
  --warning-foreground: var(--lk-night) !important;
  --info: var(--lk-accent-on-night) !important;
  --info-foreground: var(--lk-night) !important;
  --neutral: var(--lk-night-muted) !important;
  --neutral-foreground: var(--lk-night) !important;

  --border: var(--lk-night-line) !important;
  --input: #3a3e46 !important;
  --ring: var(--lk-accent-on-night) !important;

  --chart-1: #c98a6a !important; /* claude, lifted for night */
  --chart-2: #6fa797 !important; /* gpt */
  --chart-3: #8d9bc6 !important; /* glm */
  --chart-4: #9b9da3 !important; /* grok */
  --chart-5: #b3a37c !important; /* other */
  --overview-accent-1: var(--lk-accent-on-night) !important;
  --overview-accent-2: #6fa797 !important;
  --overview-accent-3: #c98a6a !important;

  --sidebar: var(--lk-night) !important;
  --sidebar-foreground: var(--lk-night-muted) !important;
  --sidebar-primary: var(--lk-night-text) !important;
  --sidebar-primary-foreground: var(--lk-night) !important;
  --sidebar-accent: #1f2633 !important;
  --sidebar-accent-foreground: var(--lk-accent-on-night) !important;
  --sidebar-border: var(--lk-night-line) !important;
  --sidebar-ring: var(--lk-accent-on-night) !important;

  --skeleton-base: var(--lk-night-2) !important;
  --skeleton-highlight: var(--lk-night-line) !important;
}

/* ---------- Small global polish (no layout changes) ----------------------- */
html.dark {
  color-scheme: dark;
}
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-variant-numeric: tabular-nums;
  scrollbar-color: color-mix(in oklab, var(--foreground) 22%, transparent) transparent;
}
::selection {
  background: var(--lk-accent-tint);
  color: var(--lk-ink);
}
html.dark ::selection {
  background: #2a3550;
  color: var(--lk-night-text);
}

/* Inline code / API keys: sunken well, like the docs site */
html:not(.dark) code:not(pre code) {
  background: var(--lk-sunken);
  color: var(--lk-ink);
  border-radius: 2px;
}
html.dark code:not(pre code) {
  color: var(--lk-accent-on-night);
}

/* Custom footer HTML (System Settings -> Site -> Footer): links underlined,
   never colour-only. */
.custom-footer a {
  color: var(--foreground);
  text-decoration: underline;
  text-decoration-color: var(--lk-line-strong);
  text-underline-offset: 3px;
  transition: color 0.15s cubic-bezier(0.2, 0.7, 0.2, 1),
    text-decoration-color 0.15s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.custom-footer a:hover {
  color: var(--lk-accent);
  text-decoration-color: var(--lk-accent);
}
html.dark .custom-footer a:hover {
  color: var(--lk-accent-on-night);
  text-decoration-color: var(--lk-accent-on-night);
}

/* Flat buttons: no glow, no coloured shadow. Press = 1px nudge. */
[data-slot='button'] {
  box-shadow: none !important;
}
[data-slot='button']:active:not(:disabled) {
  transform: translateY(1px);
}

/* Visible focus ring in the accent colour (AA, keyboard users). */
:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .custom-footer a {
    transition: none;
  }
  [data-slot='button']:active:not(:disabled) {
    transform: none;
  }
}