/* ==========================================================================
   LSD Control — workspace skin (v2: Control Center design tokens)
   Source: Launchsite Digital design system (Claude Design bundle
   "lsd-control-center"). Tesla-style monochrome: black + grey + one red.
   Squared-off everything, hairline borders, eyebrow uppercase micro-labels,
   display numbers in Inter Tight 400 with tight tracking.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@300;400;500;600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ---- LSD palette (canonical) ---------------------------------------- */
  --lsd-black:      #0A0A0A;
  --lsd-ink:        #141414;
  --lsd-graphite:   #2A2A2A;
  --lsd-steel:      #5C5C5C;
  --lsd-silver:     #8C8C8C;
  --lsd-mist:       #C7C7C7;
  --lsd-fog:        #E5E5E5;
  --lsd-cloud:      #F4F4F4;
  --lsd-paper:      #FAFAFA;
  --lsd-white:      #FFFFFF;
  --lsd-signal:     #DC0000;
  --lsd-signal-hot: #FF1A1A;
  --lsd-signal-deep:#A80000;
  --lsd-volt:       #2563EB;
  --lsd-success:    #10B981;
  --lsd-warning:    #F59E0B;
  --lsd-danger:     #DC0000;

  /* ---- Override workspace's theme vars (every common naming) ---------- */
  --background:           var(--lsd-black);
  --background-secondary: var(--lsd-ink);
  --background-tertiary:  var(--lsd-graphite);
  --foreground:           var(--lsd-white);
  --foreground-muted:     var(--lsd-mist);
  --foreground-subtle:    var(--lsd-silver);
  --border:               rgba(255,255,255,0.10);
  --border-strong:        rgba(255,255,255,0.22);
  --primary:              var(--lsd-signal);
  --primary-hover:        var(--lsd-signal-hot);
  --primary-active:       var(--lsd-signal-deep);
  --primary-foreground:   var(--lsd-white);
  --accent:               var(--lsd-signal);
  --accent-foreground:    var(--lsd-white);
  --destructive:          var(--lsd-signal);
  --destructive-foreground: var(--lsd-white);
  --success:              #10B981;
  --warning:              #F59E0B;
  --info:                 var(--lsd-volt);

  /* Workspace built-in `claude-*` theme vars */
  --claude-bg:            var(--lsd-black);
  --claude-bg-elevated:   var(--lsd-ink);
  --claude-bg-sunken:     #050505;
  --claude-fg:            var(--lsd-white);
  --claude-fg-muted:      var(--lsd-mist);
  --claude-accent:        var(--lsd-signal);
  --claude-link:          var(--lsd-white);

  /* Font stack */
  --font-display: 'Inter Tight', 'Gotham', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body:    'Inter', 'Helvetica Neue', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-sans:    var(--font-body);
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --tracking-tight:  -0.03em;
  --tracking-snug:   -0.015em;
  --tracking-normal: 0;
  --tracking-wide:   0.08em;
  --tracking-mega:   0.18em;

  /* ---- Typography scale (canonical from LSD design system) ----------- */
  --fs-display-xl: 120px;
  --fs-display-l:  84px;
  --fs-display-m:  64px;
  --fs-display-s:  48px;
  --fs-h1:         40px;
  --fs-h2:         32px;
  --fs-h3:         24px;
  --fs-h4:         20px;
  --fs-body-l:     18px;
  --fs-body:       16px;
  --fs-body-s:     14px;
  --fs-caption:    12px;
  --fs-micro:      11px;
  --fw-light:      300;
  --fw-regular:    400;
  --fw-medium:     500;
  --fw-semibold:   600;
  --fw-bold:       700;
  --lh-tight:  1.02;
  --lh-snug:   1.15;
  --lh-normal: 1.4;
  --lh-body:   1.55;

  /* ---- Spacing (4px base grid) --------------------------------------- */
  --sp-0:  0;
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  32px;
  --sp-7:  48px;
  --sp-8:  64px;
  --sp-9:  96px;
  --sp-10: 128px;
  --sp-11: 160px;

  /* Tesla / Control Center radii — almost everything is sharp */
  --radius-0:  0;
  --radius-xs: 2px;
  --radius:    2px;
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-pill: 999px;

  /* ---- Shadows (rarely used; flat hairlines do the work) ------------- */
  --shadow-0:   none;
  --shadow-1:   0 1px 2px rgba(10,10,10,0.04);
  --shadow-2:   0 4px 16px rgba(10,10,10,0.06);
  --shadow-3:   0 12px 40px rgba(10,10,10,0.10);
  --shadow-pop: 0 20px 60px rgba(10,10,10,0.18);

  /* ---- Motion -------------------------------------------------------- */
  --ease-standard: cubic-bezier(0.4, 0.0, 0.2, 1);
  --ease-out:      cubic-bezier(0.0, 0.0, 0.2, 1);
  --ease-in:       cubic-bezier(0.4, 0.0, 1, 1);
  --dur-fast:      150ms;
  --dur-base:      250ms;
  --dur-slow:      500ms;
  --dur-cinema:    900ms;

  /* ---- Semantic surface vars used by Control Center components ------ */
  --bg:           var(--lsd-black);
  --bg-elev:      var(--lsd-ink);
  --bg-sunk:      #050505;
  --bg-inverse:   var(--lsd-white);
  --fg:           var(--lsd-white);
  --fg-muted:     var(--lsd-mist);
  --fg-subtle:    var(--lsd-silver);
  --fg-disabled:  var(--lsd-steel);
  --fg-inverse:   var(--lsd-black);
  --border-inverse: rgba(255,255,255,0.12);
  --accent-hover:  var(--lsd-signal-hot);
  --accent-active: var(--lsd-signal-deep);
  --link:          var(--lsd-white);
}

/* ---- Display utility classes (canonical) ---------------------------- */
.display-xl {
  font-family: var(--font-display);
  font-size: var(--fs-display-xl);
  font-weight: var(--fw-light);
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-tight);
}
.display-l {
  font-family: var(--font-display);
  font-size: var(--fs-display-l);
  font-weight: var(--fw-light);
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-tight);
}
.display-m {
  font-family: var(--font-display);
  font-size: var(--fs-display-m);
  font-weight: var(--fw-regular);
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-tight);
}
.display-s {
  font-family: var(--font-display);
  font-size: var(--fs-display-s);
  font-weight: var(--fw-regular);
  letter-spacing: var(--tracking-snug);
  line-height: var(--lh-snug);
}

/* ---- Heading sizes per the canonical spec --------------------------- */
h1 { font-size: var(--fs-h1); line-height: var(--lh-snug);
     letter-spacing: var(--tracking-snug); font-weight: var(--fw-medium); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-snug);
     letter-spacing: var(--tracking-snug); font-weight: var(--fw-medium); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-normal);
     letter-spacing: var(--tracking-snug); font-weight: var(--fw-semibold); }
h4 { font-size: var(--fs-h4); line-height: var(--lh-normal);
     letter-spacing: 0; font-weight: var(--fw-semibold); }

small, .caption {
  font-size: var(--fs-caption);
  color: var(--fg-muted);
}

/* The canonical .eyebrow already defined in :root section below; this
   re-declares with the exact tokens from the design system for parity. */
.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-mega);
  color: var(--fg-muted);
}

/* ---- Force dark, force LSD chrome regardless of theme picker --------- */
:root, html, body, html.light, html.dark, html[data-theme] {
  background: var(--lsd-black) !important;
  color: var(--lsd-white) !important;
}

html, body, button, input, select, textarea, [class*="font-"] {
  font-family: var(--font-body) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Display type uses Inter Tight, medium weight, tight tracking — the
   Tesla / LSD signature look. Numbers in KPIs should look monumental. */
h1, h2, h3, h4, h5, h6,
[class*="text-2xl"], [class*="text-3xl"], [class*="text-4xl"], [class*="text-5xl"],
[class*="text-6xl"], [class*="text-7xl"] {
  font-family: var(--font-display) !important;
  letter-spacing: var(--tracking-snug);
  font-weight: 500;
}

code, pre, kbd, samp, [class*="font-mono"] {
  font-family: var(--font-mono) !important;
  font-size: 0.92em;
}

/* ---- Primary CTA: red, sharp, uppercase, wide-tracked ---------------- */
button[data-variant="primary"],
.btn-primary,
[class*="bg-primary"]:not([class*="bg-primary-foreground"]),
[class*="bg-accent"]:not([class*="bg-accent-foreground"]),
button[type="submit"]:not([class*="ghost"]):not([class*="outline"]) {
  background: var(--lsd-signal) !important;
  color: var(--lsd-white) !important;
  border: 1px solid var(--lsd-signal) !important;
  border-radius: 0 !important;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  font-weight: 600;
  font-size: 12px;
}
button[data-variant="primary"]:hover,
.btn-primary:hover,
[class*="bg-primary"]:not([class*="bg-primary-foreground"]):hover,
button[type="submit"]:not([class*="ghost"]):not([class*="outline"]):hover {
  background: var(--lsd-signal-hot) !important;
  border-color: var(--lsd-signal-hot) !important;
}

/* Secondary buttons: transparent, hairline border, small radius */
button:not([data-variant="primary"]):not(.btn-primary):not([class*="bg-primary"]):not([class*="bg-accent"]) {
  border-radius: 2px;
}

/* Hairline borders everywhere — replace any thick/coloured borders */
[class*="border"]:not([class*="border-l"]):not([class*="border-r"]):not([class*="border-t"]):not([class*="border-b"]),
[class*="rounded"] {
  border-color: rgba(255,255,255,0.10) !important;
}

/* ---- Eyebrow / micro-label upgrade ----------------------------------- */
/* Any tiny uppercase text becomes a proper Tesla-style eyebrow */
[class*="text-xs"][class*="uppercase"],
[class*="text-[10px]"][class*="uppercase"],
[class*="text-[11px]"][class*="uppercase"],
.eyebrow, .overline {
  font-family: var(--font-body) !important;
  font-weight: 600;
  letter-spacing: var(--tracking-mega);
  text-transform: uppercase;
  color: var(--lsd-mist);
  font-size: 10px;
}

/* ---- Display numbers — KPIs, badges, version chips ------------------- */
.lsd-display-num, [data-display-num] {
  font-family: var(--font-display) !important;
  font-weight: 400;
  letter-spacing: var(--tracking-tight);
  font-size: 32px;
  line-height: 1;
}

/* ---- Scrollbars: square, hairline ------------------------------------ */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.10); border-radius: 0; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.22); }
::-webkit-scrollbar-track { background: transparent; }

/* ---- Favicons / avatars get LSD logo --------------------------------- */
img[src*="claude-avatar"],
img[src*="claude-icon"],
img[src*="claude-logo"],
img[src*="hermesworld-logo"],
img[alt*="Hermes" i],
img[alt*="Claude" i] {
  content: url("/lsd-logo-white.png");
}

/* ---- Header wordmark — LSD Control + tagline ------------------------- */
/* Most workspace builds put the brand in <header a[href="/"]> or a div
   with class containing "logo" / "title". We hide the original text,
   then insert our own LSD Control mark + monospace tagline via ::before. */
header a[href="/"] > *,
header a[href="/"] > span,
[data-testid="sidebar-logo"] > *,
[class*="app-title"], [class*="brand-name"] {
  font-family: var(--font-display) !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  text-transform: none !important;
  font-size: 14px !important;
  color: var(--lsd-white) !important;
  line-height: 1 !important;
}

/* Hairline divider lines between header / sidebar sections */
header, aside, [class*="sidebar"], [class*="topbar"], [class*="header"] {
  border-color: rgba(255,255,255,0.10) !important;
}

/* ---- Inputs: square, hairline, mono for keys/codes ------------------- */
input, textarea, select {
  background: var(--lsd-ink) !important;
  color: var(--lsd-white) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  border-radius: 2px !important;
}
input:focus, textarea:focus, select:focus {
  border-color: rgba(255,255,255,0.32) !important;
  outline: none !important;
}
input::placeholder, textarea::placeholder { color: var(--lsd-silver) !important; }

/* ---- Status pulse — used by status dots throughout the UI ----------- */
@keyframes lsd-pulse {
  0%   { box-shadow: 0 0 0 0 currentColor; }
  70%  { box-shadow: 0 0 0 6px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
[data-status="live"]::before, [data-status="active"]::before,
[data-status="healthy"]::before {
  display: inline-block; content: ''; width: 8px; height: 8px;
  border-radius: 50%; background: #10B981; margin-right: 8px;
  color: #10B981; animation: lsd-pulse 1.6s ease-out infinite;
}
[data-status="incident"]::before, [data-status="escalated"]::before {
  display: inline-block; content: ''; width: 8px; height: 8px;
  border-radius: 50%; background: var(--lsd-signal); margin-right: 8px;
  color: var(--lsd-signal); animation: lsd-pulse 1.6s ease-out infinite;
}

/* ---- Card / panel surfaces ------------------------------------------ */
/* Replace busy gradients + heavy shadows with flat ink panels + hairline */
[class*="card"], [class*="panel"], [class*="rounded-lg"], [class*="rounded-xl"] {
  background: var(--lsd-ink) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  border-radius: 2px !important;
  box-shadow: none !important;
}

/* Links: white underline, opacity hover (Tesla treatment) */
a {
  color: var(--lsd-white) !important;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
a:hover { opacity: 0.65; }