/* ============================================================
   CloneX.wtf — Luxury Baseline
   Shared design tokens & studio aesthetic for the ecosystem
   Version: 1.0.0

   INTEGRATION:
     gm-login  → @import in index.css (before Tailwind)
     gro       → @import in globals.css (before Tailwind)
     shell-app → @import in entry CSS (future)

   HTML HOOKS:
     html[data-mode="light|dark"]     — light/dark mode
     html[data-dna="human|robot|…"]   — DNA accent theming

   TOKEN CONTRACT:
     --lux-accent            DNA accent color
     --lux-accent-contrast   Text on accent surfaces
     --lux-bg                Page background
     --lux-surface           Card / panel background
     --lux-surface-raised    Elevated card / popover
     --lux-text              Primary text
     --lux-text-muted        Secondary text
     --lux-border            Subtle divider
     --lux-border-hover      Border on interaction
     --lux-shadow            Ambient elevation shadow
     --lux-radius            Default corner radius
     --lux-radius-lg         Large corner radius (cards)
     --lux-radius-pill       Pill (buttons, badges)
     --lux-dna-glow          DNA-colored glow for focus states
     --lux-cove              Studio cove gradient (background)
   ============================================================ */

/* ========================================
   1. LIGHT MODE DEFAULTS (Infinity Cove)
   ======================================== */

:root,
html[data-mode="light"] {
  /* Structural */
  --lux-bg:              #F9F8F5;
  --lux-surface:         rgba(255, 255, 255, 0.85);
  --lux-surface-raised:  rgba(255, 255, 255, 0.95);
  --lux-text:            #1A1A1A;
  --lux-text-muted:      #6B6B6B;
  --lux-border:          rgba(0, 0, 0, 0.06);
  --lux-border-hover:    rgba(0, 0, 0, 0.12);
  --lux-shadow:          0 1px 3px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.03);
  --lux-radius:          12px;
  --lux-radius-lg:       16px;
  --lux-radius-pill:     9999px;

  /* Accent defaults (overridden by DNA) */
  --lux-accent:          #5DA3FF;
  --lux-accent-contrast: #FFFFFF;
  --lux-dna-glow:        0 0 40px rgba(93,163,255,0.15);

  /* Studio Cove — white photo studio with faint DNA light spill */
  --lux-cove:            radial-gradient(
                           ellipse 120% 90% at 50% 100%,
                           color-mix(in srgb, var(--lux-accent) 4%, #F9F8F5) 0%,
                           #F9F8F5 70%
                         );

  color-scheme: light;
}


/* ========================================
   2. DARK MODE (Charcoal Studio)
   ======================================== */

html[data-mode="dark"] {
  --lux-bg:              #141416;
  --lux-surface:         rgba(28, 28, 32, 0.85);
  --lux-surface-raised:  rgba(36, 36, 42, 0.95);
  --lux-text:            #E8E8EC;
  --lux-text-muted:      #8E8E96;
  --lux-border:          rgba(255, 255, 255, 0.06);
  --lux-border-hover:    rgba(255, 255, 255, 0.12);
  --lux-shadow:          0 1px 3px rgba(0,0,0,0.20), 0 4px 16px rgba(0,0,0,0.16);

  /* Charcoal cove with DNA rim light */
  --lux-cove:            radial-gradient(
                           ellipse 120% 80% at 50% 100%,
                           color-mix(in srgb, var(--lux-accent) 8%, #141416) 0%,
                           #141416 65%
                         );

  color-scheme: dark;
}


/* ========================================
   3. DNA ACCENT THEMES — Light Mode
   ======================================== */

html[data-dna="human"]   { --lux-accent: #5DA3FF; --lux-accent-contrast: #FFF; --lux-dna-glow: 0 0 40px rgba(93,163,255,0.15); }
html[data-dna="robot"]   { --lux-accent: #B673FF; --lux-accent-contrast: #FFF; --lux-dna-glow: 0 0 40px rgba(182,115,255,0.15); }
html[data-dna="demon"]   { --lux-accent: #FF4D4D; --lux-accent-contrast: #FFF; --lux-dna-glow: 0 0 40px rgba(255,77,77,0.15); }
html[data-dna="angel"]   { --lux-accent: #F9B8E1; --lux-accent-contrast: #000; --lux-dna-glow: 0 0 40px rgba(249,184,225,0.15); }
html[data-dna="reptile"] { --lux-accent: #9ADF4D; --lux-accent-contrast: #000; --lux-dna-glow: 0 0 40px rgba(154,223,77,0.15); }
html[data-dna="undead"]  { --lux-accent: #4A7AAF; --lux-accent-contrast: #FFF; --lux-dna-glow: 0 0 40px rgba(74,122,175,0.15); }
html[data-dna="alien"]   { --lux-accent: #00FFA3; --lux-accent-contrast: #000; --lux-dna-glow: 0 0 40px rgba(0,255,163,0.15); }
html[data-dna="murakami"]{ --lux-accent: #FF6BDA; --lux-accent-contrast: #000; --lux-dna-glow: 0 0 40px rgba(255,107,218,0.15); }


/* ========================================
   4. DNA ACCENT THEMES — Dark Mode
   Brighter accents for dark backgrounds
   ======================================== */

html[data-mode="dark"][data-dna="human"]   { --lux-accent: #7DB8FF; --lux-accent-contrast: #000; --lux-dna-glow: 0 0 50px rgba(125,184,255,0.20); }
html[data-mode="dark"][data-dna="robot"]   { --lux-accent: #D4A3FF; --lux-accent-contrast: #000; --lux-dna-glow: 0 0 50px rgba(212,163,255,0.20); }
html[data-mode="dark"][data-dna="demon"]   { --lux-accent: #FF7070; --lux-accent-contrast: #000; --lux-dna-glow: 0 0 50px rgba(255,112,112,0.20); }
html[data-mode="dark"][data-dna="angel"]   { --lux-accent: #FFD0E8; --lux-accent-contrast: #000; --lux-dna-glow: 0 0 50px rgba(255,208,232,0.20); }
html[data-mode="dark"][data-dna="reptile"] { --lux-accent: #B8F06D; --lux-accent-contrast: #000; --lux-dna-glow: 0 0 50px rgba(184,240,109,0.20); }
html[data-mode="dark"][data-dna="undead"]  { --lux-accent: #6A9ACF; --lux-accent-contrast: #FFF; --lux-dna-glow: 0 0 50px rgba(106,154,207,0.20); }
html[data-mode="dark"][data-dna="alien"]   { --lux-accent: #40FFB8; --lux-accent-contrast: #000; --lux-dna-glow: 0 0 50px rgba(64,255,184,0.20); }
html[data-mode="dark"][data-dna="murakami"]{ --lux-accent: #FF8DE8; --lux-accent-contrast: #000; --lux-dna-glow: 0 0 50px rgba(255,141,232,0.20); }


/* ========================================
   5. STUDIO COVE — Page Background
   ======================================== */

html, body {
  min-height: 100vh;
  min-height: 100dvh;
}

body {
  background: var(--lux-cove, var(--lux-bg));
  color: var(--lux-text);
  transition: background 0.5s ease, color 0.3s ease;
}


/* ========================================
   6. TYPOGRAPHY BASELINE
   ======================================== */

body {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.6;
  letter-spacing: -0.01em;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--lux-text);
}


/* ========================================
   7. SHARED COMPONENT PRIMITIVES
   These can be used across apps via class names
   ======================================== */

/* --- Cards --- */
.lux-card {
  background: var(--lux-surface);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--lux-border);
  border-radius: var(--lux-radius-lg);
  box-shadow: var(--lux-shadow);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.lux-card:hover {
  border-color: var(--lux-border-hover);
}

.lux-card-accent:hover {
  border-color: color-mix(in srgb, var(--lux-accent) 40%, transparent);
  box-shadow: var(--lux-dna-glow);
}

/* --- Buttons --- */
.lux-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-weight: 600;
  font-size: 0.875rem;
  border-radius: var(--lux-radius-pill);
  padding: 0.625rem 1.25rem;
  transition: all 0.15s ease;
  cursor: pointer;
  border: none;
}

.lux-btn-primary {
  background: var(--lux-accent);
  color: var(--lux-accent-contrast);
}

.lux-btn-primary:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--lux-accent) 25%, transparent);
}

.lux-btn-secondary {
  background: var(--lux-surface);
  color: var(--lux-text);
  border: 1px solid var(--lux-border);
}

.lux-btn-secondary:hover {
  background: var(--lux-surface-raised);
  border-color: var(--lux-border-hover);
}

.lux-btn-ghost {
  background: transparent;
  color: var(--lux-text-muted);
}

.lux-btn-ghost:hover {
  background: var(--lux-surface);
  color: var(--lux-text);
}

/* --- Inputs --- */
.lux-input {
  background: var(--lux-surface);
  border: 1px solid var(--lux-border);
  border-radius: var(--lux-radius);
  padding: 0.625rem 0.875rem;
  font-size: 0.875rem;
  color: var(--lux-text);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.lux-input::placeholder {
  color: var(--lux-text-muted);
}

.lux-input:focus {
  outline: none;
  border-color: var(--lux-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--lux-accent) 12%, transparent);
}

/* --- Badges --- */
.lux-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.625rem;
  border-radius: var(--lux-radius-pill);
  font-size: 0.75rem;
  font-weight: 600;
  background: color-mix(in srgb, var(--lux-accent) 12%, transparent);
  color: var(--lux-accent);
}

.lux-badge-solid {
  background: var(--lux-accent);
  color: var(--lux-accent-contrast);
}

/* --- Navigation bar --- */
.lux-nav {
  background: var(--lux-surface);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--lux-border);
  transition: border-color 0.3s ease;
}

.lux-nav-accent {
  border-bottom-color: color-mix(in srgb, var(--lux-accent) 30%, var(--lux-border));
}

/* --- Dividers --- */
.lux-divider {
  border: none;
  height: 1px;
  background: var(--lux-border);
  margin: 1rem 0;
}


/* ========================================
   8. UTILITY CLASSES
   ======================================== */

.lux-accent-text   { color: var(--lux-accent); }
.lux-accent-bg     { background-color: var(--lux-accent); }
.lux-accent-border { border-color: var(--lux-accent); }
.lux-glow          { box-shadow: var(--lux-dna-glow); }
.lux-muted         { color: var(--lux-text-muted); }

/* Smooth theme transitions on targeted elements */
.lux-card,
.lux-btn,
.lux-nav,
.lux-badge,
.lux-input,
.lux-accent-text,
.lux-accent-bg,
.lux-accent-border,
.lux-glow {
  transition: background 0.4s ease, background-color 0.4s ease,
              color 0.3s ease, border-color 0.3s ease,
              box-shadow 0.3s ease;
}


/* ========================================
   9. BRIDGE VARIABLES
   Maps --lux-* tokens to the legacy --accent / --dna-*
   variables that existing gm-login components rely on.
   This lets old .dna-card / .dna-nav CSS keep working
   while everything migrates to lux-* classes.
   ======================================== */

:root,
html[data-mode="light"],
html[data-mode="dark"] {
  /* Legacy gm-login variables → luxury tokens */
  --accent:          var(--lux-accent);
  --accent-contrast: var(--lux-accent-contrast);
  --dna-shadow:      var(--lux-dna-glow);
  --dna-background:  var(--lux-cove, var(--lux-bg));
}


/* ========================================
   10. SCROLLBAR STYLING (optional, WebKit)
   ======================================== */

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--lux-border-hover);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--lux-text-muted);
}


/* ========================================
   11. EDITORIAL POLISH — Grain, Vignette, Hairline
   Added v1.1: Infinity cove refinements
   ======================================== */

:root,
html[data-mode="light"] {
  --lux-hairline-opacity: 0.06;
  --lux-grain-opacity:    0.018;
  --lux-vignette-opacity: 0.04;

  /* Accent-soft: very low saturation for backgrounds/tints */
  --lux-accent-soft: color-mix(in srgb, var(--lux-accent) 8%, transparent);
}

html[data-mode="dark"] {
  --lux-hairline-opacity: 0.08;
  --lux-grain-opacity:    0.025;
  --lux-vignette-opacity: 0.06;
  --lux-accent-soft: color-mix(in srgb, var(--lux-accent) 10%, transparent);
}


/* ========================================
   12. EDITORIAL CARD — No-border variant
   Default cards should feel like floating surfaces,
   not bordered panels. Hairline on hover only.
   ======================================== */

.lux-card-editorial {
  background: var(--lux-surface);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid transparent;
  border-radius: var(--lux-radius-lg);
  box-shadow: var(--lux-shadow);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.lux-card-editorial:hover {
  border-color: var(--lux-border);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.06);
}


/* ========================================
   13. EDITORIAL BADGE — Quieter pills/tags
   ======================================== */

.lux-badge-quiet {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.125rem 0.5rem;
  border-radius: var(--lux-radius-pill);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  background: var(--lux-accent-soft);
  color: var(--lux-text-muted);
  border: none;
}