/* DevLov — shared design tokens.

   Single source of truth for the color/font/radius custom properties used by
   BOTH panels: the client portal (assets/devlov/theme-overrides.css) and the
   staff panel (scp/css/scp.css, scp/css/login.css). Load this file BEFORE
   whichever panel-specific override file applies, so both can reference the
   same :root variables instead of redeclaring (and silently drifting from)
   the same colors.

   --dl-dark and --dl-dark-staff are intentionally two different shades, not
   a naming inconsistency to "fix" — the client login/sidebar and the staff
   sidebar were designed with slightly different dark tones and unifying
   them would be a real visual change, not a refactor. */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600&family=Instrument+Serif:ital@0;1&display=swap');

:root {
  --dl-violet: #7f6bf2;
  --dl-violet-hover: #6b54e8;
  --dl-violet-tint: rgba(127,107,242,0.08);
  --dl-violet-tint-strong: rgba(127,107,242,0.2);
  --dl-orange: #ff9d4d;
  --dl-orange-hover: #ffb066;
  --dl-ink: #15161d;
  --dl-ink-soft: rgba(21,22,29,0.62);
  --dl-ink-faint: rgba(21,22,29,0.42);
  --dl-surface: #ffffff;
  --dl-neutral: #f5f4f1;
  --dl-border: rgba(21,22,29,0.14);
  --dl-dark: #241f33;
  --dl-dark-staff: #1a1b23;
  --dl-dark-border: rgba(255,255,255,0.14);
  --dl-radius-sm: 10px;
  --dl-radius: 12px;
  --dl-radius-nav: 8px;
  --dl-radius-pill: 999px;
  --dl-font-body: 'Space Grotesk', helvetica, arial, sans-serif;
  --dl-font-display: 'Instrument Serif', Georgia, serif;
}

/* "Modo creativo" — dark theme. Values sourced from DevLov's own existing
   dark identity in F:\IA\devlov-app\src\theme.ts (COLORS), not invented:
   near-black radial-gradient bg (#07080e/#020208/#000000), white primary
   text, muted text at the same alpha DevLov already uses there
   (textMuted: rgba(255,255,255,0.55), rounded up slightly to 0.62/0.42 to
   match this file's existing light-mode alpha steps exactly). Accent
   colors (--dl-violet/--dl-orange) are DELIBERATELY UNCHANGED — devlov-app
   uses the identical accent hex in both its light and dark modes
   (LIGHT_COLORS.accent === COLORS.accent), so brand accent doesn't shift
   between themes here either. --dl-surface reuses --dl-dark-staff
   (#1a1b23, the staff sidebar's existing proven-live dark tone) as a
   single shared card surface for both panels in dark mode — a
   simplification over maintaining the client/staff surface split through
   a second theme dimension, called out explicitly rather than silently
   decided. --dl-dark/--dl-dark-staff/--dl-dark-border are already-dark
   values used by the always-dark login split-screen panel and stay as
   they are regardless of theme. */
:root[data-theme="dark"] {
  --dl-violet-tint: rgba(127,107,242,0.16);
  --dl-violet-tint-strong: rgba(127,107,242,0.32);
  --dl-ink: #ffffff;
  --dl-ink-soft: rgba(255,255,255,0.62);
  --dl-ink-faint: rgba(255,255,255,0.42);
  --dl-surface: #1a1b23;
  --dl-neutral: #07080e;
  --dl-border: rgba(255,255,255,0.14);
}

/* "Vista clásica" / "Modo creativo" toggle — a single fixed, always-on-top
   control, top-right of the viewport, present on every page this file is
   loaded on (client portal, staff panel, AND staff login — the three
   places that <link> tokens.css). Deliberately NOT tied to the sidebar or
   any header bar: those don't render on every page (login screens have
   neither), so this is the one placement guaranteed reachable everywhere.
   Icon swap is pure CSS; click/localStorage wiring is
   assets/devlov/theme-toggle.js, which finds it via the shared
   .dl-theme-toggle class like every other toggle instance. */
.dl-theme-toggle-fixed {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--dl-border);
  background: var(--dl-violet-tint);
  backdrop-filter: blur(6px);
  color: var(--dl-ink-soft);
  cursor: pointer;
}
.dl-theme-toggle-fixed:hover {
  background: var(--dl-violet-tint-strong);
  color: var(--dl-ink);
}
.dl-theme-toggle-fixed .dl-theme-toggle-icon {
  /* flex: 0 0 18px (not just width:18px) — on the client portal specifically,
     this SVG was collapsing to 0 width (height stayed correct at 18px)
     because as a flex child its default min-width:auto/flex-shrink:1 let it
     shrink away; forcing a fixed flex-basis with no grow/shrink sidesteps
     that resolution entirely regardless of root cause. */
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
}
.dl-theme-toggle-fixed .dl-theme-toggle-sun {
  display: none;
}
[data-theme="dark"] .dl-theme-toggle-fixed .dl-theme-toggle-moon {
  display: none;
}
[data-theme="dark"] .dl-theme-toggle-fixed .dl-theme-toggle-sun {
  display: block;
}
@media (max-width: 480px) {
  .dl-theme-toggle-fixed {
    top: 10px;
    right: 10px;
    width: 36px;
    height: 36px;
  }
}

/* Twinkling starfield (assets/devlov/starfield.js) — mounted into any
   [data-dl-starfield] container, dark mode only. Both requirements below
   are enforced generically here (not left to each call site to remember):
   the container is forced positioned so the canvas's inset:0 fills it
   (#brickwall on staff login already was; #content on open.php/view.php
   was not), and every one of its OTHER children is promoted to its own
   stacking context above the canvas — per CSS2.1 painting order, a
   position:absolute z-index:0 canvas would otherwise paint ABOVE plain
   static-flow siblings, not below them. Same z-index:1-on-children
   technique already used for the login glow blobs (.login-brand > *).

   Real bug hit shipping this on login.php: .login-brand > * / .login-panel
   > * (theme-overrides.css, pre-existing, sets position:relative on EVERY
   child including the canvas) has the exact same specificity as a plain
   .dl-starfield-canvas rule and loads later in the cascade, so it won —
   flipping the canvas from absolute to relative, which turned it into a
   real ~800px-tall block in normal flow and pushed the entire login form
   off-screen. .dl-starfield-canvas's positioning rules are scoped with
   the parent attribute selector below specifically to always outrank any
   plain `> *` rule regardless of source order or which page adds one next. */
[data-dl-starfield] {
  position: relative;
}
[data-dl-starfield] > :not(.dl-starfield-canvas) {
  position: relative;
  z-index: 1;
}
.dl-starfield-canvas {
  display: block;
  pointer-events: none;
}
[data-dl-starfield] > .dl-starfield-canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
}