/* BeatOS renderer global stylesheet.
   Tokens mirror conventions/design-direction.md §3.
   3-tier: primitives (--c-*) -> semantic (--bg-*, --text-*, --accent, glass, motion). */

@import "@fontsource/inter/400.css";
@import "@fontsource/inter/500.css";
@import "@fontsource/inter/600.css";
@import "@fontsource/inter/700.css";
@import "@fontsource/jetbrains-mono/400.css";
@import "@fontsource/jetbrains-mono/500.css";

@tailwind base;
@tailwind components;
@tailwind utilities;

.glass {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
  /* Keep the blurred backdrop layer promoted so the compositor doesn't
     re-promote it every frame as the list scrolls under the bar. */
  will-change: backdrop-filter;
}

/* Same tint, no blur. For opaque side panels (e.g. the sidebar) that are their
   own scroll container — backdrop-filter there would re-blur on every scroll
   tick for no visual gain (nothing meaningful sits behind them). */
.glass-solid {
  background: var(--glass-bg);
}

/* Outer column / route card. The three main columns (sidebar, list, detail)
   and the single-pane route surfaces (editor/settings/trash/approvals) float
   as translucent backlit-glass cards over the AsciiBackdrop (`AsciiBackdrop`)
   on the black canvas — the obsidian-glass "panel" of design-direction §1.
   INNER elements keep their opaque `--bg-elevated` (table header, chips, code
   blocks, row states) so only the card edge reveals the backdrop. */
.beatos-card {
  background: var(--card-bg);
  backdrop-filter: blur(var(--card-blur)) saturate(1.3);
  -webkit-backdrop-filter: blur(var(--card-blur)) saturate(1.3);
  border: 1px solid var(--border-card);
}

/* App canvas behind the floating cards + ASCII backdrop. A whisper of depth
   over the obsidian void so transparent (low-opacity) panels reveal more than
   dead-flat black. */
.app-canvas {
  background:
    radial-gradient(130% 90% at 50% -8%, rgba(40, 45, 56, 0.3), transparent 55%),
    var(--bg-base);
}

/* Collapsed left rail (sidebar). Width is CSS-driven (not the inline store
   width) so the hover-peek `:hover` rule can widen it; the parent flex makes
   the middle column rescale via the aside's `transition-[width]`. */
.beatos-card[data-collapsed] {
  width: var(--rail-w-left);
  /* Transition lives ONLY on the collapsed rail so the collapse animation and
     hover-peek glide, while the expanded panel's resize-drag stays 1:1. */
  transition: width 0.2s var(--ease);
}
.beatos-card[data-collapsed]:hover {
  width: var(--rail-w-left-peek);
}

/* Collapsed right rail (detail panel). Same idea; the inner chevron nudges in
   and the ghost preview fades up on hover. */
.beatos-card[data-detail-collapsed] {
  width: var(--rail-w-right);
  transition: width 0.2s var(--ease);
}
.beatos-card[data-detail-collapsed]:hover {
  width: var(--rail-w-right-peek);
}
.beatos-card[data-detail-collapsed] .rail-expand {
  transition: transform 0.22s var(--ease), color 0.22s var(--ease);
}
.beatos-card[data-detail-collapsed]:hover .rail-expand {
  transform: translateX(-4px);
  color: var(--text-primary);
}
.rail-ghost {
  opacity: 0;
  transform: translateX(10px);
  transition: opacity 0.22s var(--ease), transform 0.22s var(--ease);
}
.beatos-card[data-detail-collapsed]:hover .rail-ghost {
  opacity: var(--rail-peek-ghost);
  transform: translateX(0);
}

/* Canonical micro-label ("eyebrow"). Section headers, field labels, stat
   captions all share this one scale (11px) so they read as one system instead
   of the prior 9/10/11px scatter. */
.beatos-eyebrow {
  font-size: 12px;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  color: var(--text-tertiary);
}

/* Softened primary action: glass fill + hairline, bright text. Replaces the
   old solid near-white `bg-accent text-white` (unreadable white-on-white). */
.btn-primary {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-primary);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transition: background-color 0.18s var(--ease), border-color 0.18s var(--ease);
}
.btn-primary:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.28);
}
.btn-primary:disabled {
  opacity: 0.5;
}

:root {
  /* tier 1 — primitives (raw; never referenced by components) */
  --c-void:        #08090b;
  --c-graphite-800:#111317;
  --c-graphite-700:#171a1f;
  --c-white:       #ffffff;
  --c-ash:         #e8e8ea;
  --c-slate-200:   #a4a6ab;
  --c-slate-300:   #6c6f76;
  --c-hair:        rgba(255,255,255,.07);

  /* tier 2 — semantic (the only layer components touch) */
  --bg-base:           var(--c-void);
  --bg-elevated:       var(--c-graphite-800);
  --bg-elevated-hover: var(--c-graphite-700);
  --bg-sidebar:        #000000;
  --bg-row-hover:      rgba(255,255,255,.04);
  --bg-row-selected:   rgba(255,255,255,.07);
  --bg-row-active:     rgba(255,255,255,.10);
  --border-subtle:     var(--c-hair);
  --text-primary:      var(--c-white);
  --text-secondary:    var(--c-slate-200);
  --text-tertiary:     var(--c-slate-300);
  --accent:            var(--c-ash);
  --accent-soft:       rgba(255,255,255,.10);
  --danger:            #f15e6c;
  --success:           #3ecf8e;
  --warning:           #f5b800;

  /* glass */
  --glass-bg:     rgba(16,18,22,.55);
  --glass-blur:   18px;

  /* card — translucent backlit-glass surface for the outer column/route cards
     (the AsciiBackdrop shows through, softened by the blur). Inner surfaces
     stay on the opaque `--bg-elevated`. */
  /* `--card-alpha` + `--card-blur` are driven live by the appearance store
     (Settings → Appearance → Panel opacity). These fallbacks mirror the
     CARD_OPACITY_DEFAULT (30 → alpha .30, blur .30×14 ≈ 4.2px) so the first
     paint matches before AppShell's effect runs. */
  --card-rgb:     17,19,23;
  --card-alpha:   .3;
  --card-bg:      rgba(var(--card-rgb), var(--card-alpha));
  --card-blur:    4.2px;
  --border-card:  rgba(255,255,255,.06);

  /* collapsed rail widths + hover-peek (left = sidebar, right = detail) */
  --rail-w-left:        76px;
  --rail-w-left-peek:   88px;
  --rail-w-right:       46px;
  --rail-w-right-peek:  56px;
  --rail-peek-ghost:    .32;

  /* motion */
  --ease:   cubic-bezier(.2,.7,.2,1);
  --spring: cubic-bezier(.34,1.56,.64,1);
  --dur-hover: 260ms;
  --dur-cover: 550ms;
}

html,
body,
#root {
  margin: 0;
  padding: 0;
  height: 100%;
  font-size: 16px;
  background: var(--bg-base);
  color: var(--text-primary);
  font-family:
    "Inter",
    system-ui,
    -apple-system,
    sans-serif;
  font-feature-settings:
    "ss01" on,
    "cv11" on;
}

.font-mono {
  font-variant-numeric: tabular-nums;
}

/* Hide native scrollbar on macOS "Always show" mode for inner content panels.
   Does not affect the AppShell outer scroll, VirtualTrackList, or Sidebar. */
.beatos-scroll::-webkit-scrollbar {
  width: 0;
  background: transparent;
}
.beatos-scroll {
  scrollbar-width: none;
}

/* Section divider — etched 1px line, fades at both ends (token color). */
.beatos-etch-divider {
  background: linear-gradient(
    90deg,
    transparent,
    var(--bg-row-selected) 20%,
    var(--bg-row-selected) 80%,
    transparent
  );
}
