/* ══════════════════════════════════════════════
   StaxOS — Design Tokens (Portfolio / tattoo OS)
   Ink #0c0c0e · panels #141416 · gold #c8a44a · DM Sans
   ══════════════════════════════════════════════ */

/* ── Light-mode backstop ──────────────────────────────────────────────
   ThemeEngine.apply() drives all --os-* surface tokens INLINE on <html>
   for both modes (that is the source of truth). This block only mirrors the
   portfolio --stax-* tokens + a couple of literals so app-window content that
   references --stax-* also flips, and sets color-scheme for native controls.
   Dark stays the default — no [data-theme] attribute is present in dark. */
:root[data-theme="light"] {
  --stax-ink:       #f4f2ec;
  --stax-panel:     #ffffff;
  --stax-elevated:  #f1eee7;
  --stax-surface:   #ffffff;
  --stax-surface-2: #f1eee7;
  --stax-surface-3: #e9e5dc;
  --stax-border:    #d9d4c8;
  --stax-border-soft:#e6e1d6;
  --stax-text:      #1b1a17;
  --stax-text-dim:  #55524b;
  /* Faint and muted text are still text: 4.8:1 on the deepest paper
     surface (#e9e5dc), 6.1:1 on white. */
  --stax-text-faint:#66625a;
  --stax-muted:     #66625a;
  --stax-canvas:    #f4f2ec;
  --stax-rail:      #ffffff;
  --stax-sheet:     #ffffff;
  --stax-overlay:   rgba(27, 26, 23, 0.32);
  /* Focus, ok, danger, success and warning: light values live in tokens.css
     (Beta 1: one owner; these repeats loaded later and silently won). */
  --os-elevated:    #f1eee7;
  --os-text-inverse:#ffffff;
  color-scheme: light;
}

:root {
  /* Portfolio-aligned (apps may reference these in window content) */
  --stax-ink:       #0c0c0e;
  --stax-panel:     #141416;
  --stax-elevated:  #1a1a1e;
  --stax-border:    #2a2a2e;
  --stax-text:      #e8e4dc;
  --stax-muted:     #8f8c86;
  /* Beta 1: emphasis is Stax's identity (tokens.css), not the brand gold. */
  --stax-gold:      var(--stax-identity-stax);

  --os-bg:            #0c0c0e;
  --os-bg-alt:        #141416;
  --os-surface:       #141416;
  --os-surface-hover: #1a1a1e;
  --os-elevated:      #1a1a1e;
  --os-surface-glass: rgba(12, 12, 14, 0.92);
  --os-border:        #2a2a2e;
  --os-border-light:  #222226;
  --os-border-accent: var(--stax-identity-stax);

  --os-text:          #e8e4dc;
  --os-text-secondary:#a8a498;
  --os-text-muted:    #8f8c86;
  --os-text-inverse:  #0c0c0e;

  --os-accent:        var(--stax-identity-stax);
  --os-accent-hover:  color-mix(in srgb, var(--stax-identity-stax) 86%, #000);
  --os-accent-light:  color-mix(in srgb, var(--stax-identity-stax) 70%, #fff);
  --os-accent-glow:   color-mix(in srgb, var(--stax-identity-stax) 15%, transparent);
  --os-accent-bg:     color-mix(in srgb, var(--stax-identity-stax) 8%, transparent);

  --os-red:           #FF5F56;
  --os-yellow:        #FFBD2E;
  --os-green:         #c8a44a;

  --os-success:       #a8c97a;
  --os-warning:       #e0a050;
  --os-danger:        #e07060;
  --os-info:          #8ab4d4;

  --os-font:          'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --os-font-display:  'Cinzel', Georgia, serif;
  --os-font-mono:     'SF Mono', 'Fira Code', 'JetBrains Mono', 'Consolas', monospace;
  --os-font-size:     13px;
  --os-line-height:   1.5;

  --os-space-xs:      4px;
  --os-space-sm:      8px;
  --os-space-md:      12px;
  --os-space-lg:      16px;
  --os-space-xl:      24px;
  --os-space-2xl:     32px;

  --os-radius-xs:     3px;
  --os-radius-sm:     6px;
  --os-radius-md:     10px;
  --os-radius-lg:     14px;
  --os-radius-xl:     18px;
  --os-radius-round:  50%;

  --os-shadow-sm:     0 1px 2px rgba(0,0,0,0.35);
  --os-shadow-md:     0 4px 14px rgba(0,0,0,0.45);
  --os-shadow-lg:     0 12px 40px rgba(0,0,0,0.55);
  --os-shadow-xl:     0 20px 50px rgba(0,0,0,0.6);
  --os-shadow-window: 0 16px 48px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.04);

  --os-menubar-h:     28px;
  --os-dock-h:        72px;
  --os-dock-icon:     48px;
  --os-transition:    0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --os-transition-spring: 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Reserve space for the floating dock + iOS home indicator. */
@media (max-width: 768px) {
  :root {
    --os-dock-h: calc(64px + env(safe-area-inset-bottom, 0px));
  }
  .cb-bar,
  .cs-chat-input,
  .cs-pv-input {
    padding-bottom: max(10px, calc(8px + env(safe-area-inset-bottom, 0px)));
  }
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  font-size: var(--os-font-size);
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
}
body {
  font-family: var(--os-font);
  color: var(--os-text);
  line-height: var(--os-line-height);
  overflow: hidden;
  height: 100vh;
  width: 100vw;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  user-select: none;
  background: var(--os-bg);
}
.os-window-content { user-select: text; }
a { color: var(--os-accent); text-decoration: none; }
input, select, textarea, button {
  font-family: inherit;
  font-size: inherit;
  border: none;
  outline: none;
  background: none;
}
button { cursor: pointer; }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--os-border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--os-text-muted); }

.hidden { display: none !important; }
.text-muted { color: var(--os-text-muted); }
.text-sm { font-size: 0.85em; }
.text-xs { font-size: 0.75em; }
.text-center { text-align: center; }
.font-bold { font-weight: 600; }
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-sm { gap: var(--os-space-sm); }
.gap-md { gap: var(--os-space-md); }
.gap-lg { gap: var(--os-space-lg); }
.grow { flex: 1; }