/*
 * kit-theme.css -- single source of truth for design tokens, fonts, and
 * shared component styles. Hard-linked from both:
 *
 *   - frontend/index.html  (the React app entry, served at /)
 *   - frontend/public/landing.html  (the standalone marketing landing)
 *
 * Both surfaces stay visually identical because both <link> this exact
 * file. Editing here updates the app AND the landing in the same shot.
 *
 * Theming model:
 *
 *   - Default :root values are LIGHT mode.
 *   - @media (prefers-color-scheme: dark) swaps the values for users
 *     whose OS is set to dark.
 *   - html.theme-light / html.theme-dark are manual overrides set by the
 *     boot script in index.html based on localStorage('kit_theme').
 *
 * 2026-06-03 migration: replaced gold/bronze/steel-blue + DM Sans +
 * Cormorant with the wolf-gray + blood-red + Geist system Daniel
 * landed on after the type/palette exploration. The old --steel-blue,
 * --btn (bronze), --wordmark-gradient tokens are gone; --accent is
 * now the single brand color. Legacy aliases are mapped to --accent
 * so existing component CSS keeps working without a sweep on day one.
 */

/* ── Fonts ─────────────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ── Reset ──────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Design tokens (LIGHT mode default) ────────────────────────────────────── */
:root {
  color-scheme: light;

  /* Surfaces -- cool gray between sandstone and pure neutral (L2 pick:
     less yellow than sandstone, more warmth than pure neutral gray). */
  --bg:            #e2dfd5;
  --surface:       #d8d5ca;
  --surface-2:     #cdcabf;
  --surface-user:  #d4d1c6;

  /* Borders -- cool-neutral on warm light. */
  --border:        rgba(20,20,22,0.16);
  --border-mid:    rgba(20,20,22,0.26);
  --border-soft:   rgba(20,20,22,0.10);

  /* Text hierarchy -- cool dark on warm light reads cleanest. */
  --text-primary:   #18181a;
  --text-secondary: #545350;
  --text-muted:     #807e7a;
  --text-label:     #625f5c;

  /* Brand accent -- clean blood red, no orange undertone. */
  --accent:        #a4001c;
  --accent-text:   #ebe8de;
  --accent-tint:   rgba(164,0,28,0.10);
  --accent-strong: rgba(164,0,28,0.18);

  /* Legacy aliases -- old component CSS still references these names.
     Mapping them to the new accent keeps everything working without a
     full sweep on day one. Drop these once every consumer migrates. */
  --steel-blue:        var(--accent);
  --steel-blue-muted:  rgba(164,0,28,0.78);
  --steel-blue-focus:  var(--accent-tint);
  --steel-blue-glow:   rgba(164,0,28,0.22);
  --btn:               var(--accent);
  --btn-hover:         #b3022a;
  --btn-text:          var(--accent-text);

  /* Semantic colors -- kept independent of brand so they read consistently. */
  --green:       #4f8a5e;
  --red:         #a4001c;
  --red-dim:     rgba(164,0,28,0.12);
  --grail-color: #b5732a;       /* warm amber, reads as "special" on neutral palette */
  --conf-high:   var(--green);
  --conf-mid:    var(--grail-color);
  --conf-low:    var(--red);

  /* Notification badge -- standalone red, doesn't need to match brand
     exactly. KitNav previously hardcoded #c0392b for this. */
  --badge:       #c43030;

  /* Overlay / shadow -- semantic so dark mode can darken further. */
  --overlay:     rgba(20,20,22,0.42);
  --shadow:      rgba(20,20,22,0.18);

  /* Typography -- Geist replaces DM Sans + Cormorant. One family,
     different weights for hierarchy. Mono is for system labels (counts,
     timestamps, codes) where the monospace voice carries the "tool"
     register. */
  --font-display: 'Geist', -apple-system, system-ui, sans-serif;
  --font-body:    'Geist', -apple-system, system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* Wordmark -- size token kept for per-page scale overrides. */
  --wordmark-size: 34px;
}

/* ── Auto dark mode: user has OS set to dark, no manual override ───────────── */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;

    /* Wolf-fur gray with very slight cool undertone. Pushed up at each
       layer for dense-list contrast (empty checkbox borders, thumbnail
       containers) so interactive affordances stay visible. */
    --bg:            #353539;
    --surface:       #484850;
    --surface-2:     #565660;
    --surface-user:  #4e4e56;

    --border:        rgba(240,235,225,0.22);
    --border-mid:    rgba(240,235,225,0.30);
    --border-soft:   rgba(240,235,225,0.10);

    --text-primary:   #ede9e1;
    --text-secondary: #a09fa3;
    --text-muted:     #82828a;
    --text-label:     #8c8b8e;

    /* Brighter red in dark mode -- accent colors need ~+20% chroma
       against dark backgrounds to read as the same color. */
    --accent:        #b8002a;
    --accent-text:   #ede9e1;
    --accent-tint:   rgba(184,0,42,0.20);
    --accent-strong: rgba(184,0,42,0.30);

    --steel-blue:        var(--accent);
    --steel-blue-muted:  rgba(184,0,42,0.78);
    --steel-blue-focus:  var(--accent-tint);
    --steel-blue-glow:   var(--accent-strong);
    --btn:               var(--accent);
    --btn-hover:         #c80a32;
    --btn-text:          var(--accent-text);

    --green:       #6dbf8a;
    --red:         #b8002a;
    --red-dim:     rgba(184,0,42,0.18);
    --grail-color: #d4a04e;

    --badge:       #c4202e;

    --overlay:     rgba(0,0,0,0.62);
    --shadow:      rgba(0,0,0,0.40);
  }
}

/* ── Manual theme overrides (from Settings toggle / localStorage) ──────────── */
/* These win over the @media query above. Set on <html> by the boot script. */

html.theme-light {
  color-scheme: light;
  --bg: #e2dfd5;
  --surface: #d8d5ca;
  --surface-2: #cdcabf;
  --surface-user: #d4d1c6;
  --border: rgba(20,20,22,0.16);
  --border-mid: rgba(20,20,22,0.26);
  --border-soft: rgba(20,20,22,0.10);
  --text-primary: #18181a;
  --text-secondary: #545350;
  --text-muted: #807e7a;
  --text-label: #625f5c;
  --accent: #a4001c;
  --accent-text: #ebe8de;
  --accent-tint: rgba(164,0,28,0.10);
  --accent-strong: rgba(164,0,28,0.18);
  --steel-blue: var(--accent);
  --steel-blue-muted: rgba(164,0,28,0.78);
  --steel-blue-focus: var(--accent-tint);
  --steel-blue-glow: rgba(164,0,28,0.22);
  --btn: var(--accent);
  --btn-hover: #b3022a;
  --btn-text: var(--accent-text);
  --green: #4f8a5e;
  --red: #a4001c;
  --red-dim: rgba(164,0,28,0.12);
  --grail-color: #b5732a;
  --badge: #c43030;
  --overlay: rgba(20,20,22,0.42);
  --shadow: rgba(20,20,22,0.18);
}

html.theme-dark {
  color-scheme: dark;
  --bg: #353539;
  --surface: #484850;
  --surface-2: #565660;
  --surface-user: #4e4e56;
  --border: rgba(240,235,225,0.22);
  --border-mid: rgba(240,235,225,0.30);
  --border-soft: rgba(240,235,225,0.10);
  --text-primary: #ede9e1;
  --text-secondary: #a09fa3;
  --text-muted: #82828a;
  --text-label: #8c8b8e;
  --accent: #b8002a;
  --accent-text: #ede9e1;
  --accent-tint: rgba(184,0,42,0.20);
  --accent-strong: rgba(184,0,42,0.30);
  --steel-blue: var(--accent);
  --steel-blue-muted: rgba(184,0,42,0.78);
  --steel-blue-focus: var(--accent-tint);
  --steel-blue-glow: var(--accent-strong);
  --btn: var(--accent);
  --btn-hover: #c80a32;
  --btn-text: var(--accent-text);
  --green: #6dbf8a;
  --red: #b8002a;
  --red-dim: rgba(184,0,42,0.18);
  --grail-color: #d4a04e;
  --badge: #c4202e;
  --overlay: rgba(0,0,0,0.62);
  --shadow: rgba(0,0,0,0.40);
}

/* ── Wordmark ────────────────────────────────────────────────────────────────
   Used as <div>, <span>, or <a class="wordmark"> across every screen.
   Flat color, not the multi-stop gradient -- gradient wordmarks read as
   AI-template now. Page-specific size: add `--wordmark-size: Xpx;` to
   that page's :root.
────────────────────────────────────────────────────────────────────────────── */
.wordmark {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--wordmark-size);
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--accent);
  text-decoration: none;
  display: inline-block;
}

/* ── Responsive shell ──────────────────────────────────────────────────────
   Every page wraps content in <div class="shell"> (focused pages: chat,
   gate, settings, item detail) or <div class="shell shell-wide"> (grid
   pages: inventory, browse, community, profile).
────────────────────────────────────────────────────────────────────────── */
.shell {
  width: 100%;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  padding-top: env(safe-area-inset-top);
}

@media (min-width: 768px) {
  body { display: flex; justify-content: center; }
  .shell { max-width: 640px; }
  .shell.shell-wide { max-width: 900px; }
}

@media (min-width: 1200px) {
  .shell.shell-wide { max-width: 1080px; }
}

/* ── Bottom nav responsive ─────────────────────────────────────────────── */
@media (min-width: 768px) {
  .bottom-nav {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    max-width: 640px;
  }
  .shell-wide ~ .bottom-nav,
  .shell-wide .bottom-nav,
  body:has(.shell-wide) .bottom-nav { max-width: 900px; }
}

@media (min-width: 1200px) {
  body:has(.shell-wide) .bottom-nav { max-width: 1080px; }
}