/**
 * Luminous Glass / Volumetric Light Design Tokens
 * 
 * Interface = couches de lumière, pas des boîtes
 * Transparence = verre optique (backdrop + gradient + edge light)
 * Contraste = luminance, pas saturation
 * 
 * Minority Report calme, Apple-grade
 */

:root {
  /* ------------------------------------------------------------------ */
  /* Base palette (neutral + cool light) */
  /* ------------------------------------------------------------------ */
  --lg-bg: 255 255 255;                 /* light background base */
  --lg-fg: 12 14 18;                    /* light foreground text */

  --lg-bg-dark: 6 8 12;                 /* dark background base */
  --lg-fg-dark: 240 245 255;            /* dark foreground text */

  /* Luminous accent (very restrained) */
  --lg-accent: 120 180 255;             /* cool blue light */
  --lg-accent-2: 170 220 255;           /* softer highlight */

  /* ------------------------------------------------------------------ */
  /* Typography */
  /* ------------------------------------------------------------------ */
  --lg-text: 12 14 18;
  --lg-text-muted: 90 96 108;
  --lg-text-strong: 8 10 14;

  --lg-text-dark: 240 245 255;
  --lg-text-muted-dark: 150 160 178;
  --lg-text-strong-dark: 250 252 255;

  /* Subtle text glow (never heavy) */
  --lg-text-glow: 0 0 1px rgba(120, 180, 255, 0.15);

  /* ------------------------------------------------------------------ */
  /* Glass material (opacity + blur) */
  /* ------------------------------------------------------------------ */
  --lg-glass-alpha: 0.42;               /* base glass alpha (dark mode typical) */
  --lg-glass-alpha-light: 0.65;         /* light mode alpha */
  --lg-glass-blur: 10px;                /* calm blur */
  --lg-glass-sat: 1.15;                 /* slight saturation */

  /* ------------------------------------------------------------------ */
  /* Edge lighting */
  /* ------------------------------------------------------------------ */
  --lg-edge-alpha: 0.18;                /* hairline light */
  --lg-edge-alpha-strong: 0.26;         /* active */
  --lg-edge-width: 0.5px;

  /* ------------------------------------------------------------------ */
  /* Shadows (volumetric depth) */
  /* ------------------------------------------------------------------ */
  --lg-shadow-1: 0 0 0.5px rgba(255,255,255,0.12), 0 6px 24px rgba(120,180,255,0.10);
  --lg-shadow-2: 0 0 0.5px rgba(255,255,255,0.16), 0 10px 40px rgba(120,180,255,0.14);
  --lg-shadow-inset: inset 0 1px 0 rgba(255,255,255,0.10);

  /* ------------------------------------------------------------------ */
  /* Motion */
  /* ------------------------------------------------------------------ */
  --lg-dur-1: 120ms;                    /* hover */
  --lg-dur-2: 180ms;                    /* appear */
  --lg-dur-3: 220ms;                    /* focus */
  --lg-ease: cubic-bezier(0.16, 1, 0.3, 1); /* calm ease-out */

  /* ------------------------------------------------------------------ */
  /* Radii */
  /* ------------------------------------------------------------------ */
  --lg-r-sm: 10px;
  --lg-r-md: 14px;
  --lg-r-lg: 18px;
}

/* Dark theme (recommended default for "Minority Report calm") */
.dark {
  --lg-bg: var(--lg-bg-dark);
  --lg-fg: var(--lg-fg-dark);

  --lg-text: var(--lg-text-dark);
  --lg-text-muted: var(--lg-text-muted-dark);
  --lg-text-strong: var(--lg-text-strong-dark);
}

/* Light theme: optical glass on bright paper-like surface */
.light {
  /* Base */
  --lg-bg: 248 250 252;               /* near-white, slightly cool */
  --lg-fg: 10 12 16;

  /* Text */
  --lg-text: 12 14 18;
  --lg-text-muted: 86 92 104;
  --lg-text-strong: 8 10 14;

  /* Accent reflection (very light) */
  --lg-accent: 90 150 235;
  --lg-accent-2: 140 190 255;

  /* Glass material (light needs higher alpha but lower contrast) */
  --lg-glass-alpha: 0.78;             /* more opaque than dark */
  --lg-glass-alpha-light: 0.78;       /* keep one source of truth */
  --lg-glass-blur: 12px;              /* slightly more blur to separate layers */
  --lg-glass-sat: 1.08;               /* less saturation than dark */

  /* Edge lighting (becomes "etching", not glow) */
  --lg-edge-alpha: 0.16;
  --lg-edge-alpha-strong: 0.22;
  --lg-edge-width: 0.5px;

  /* Shadows: Apple-like elevation, not sci-fi */
  --lg-shadow-1:
    0 0 0.5px rgba(10,12,16,0.10),
    0 10px 30px rgba(10,12,16,0.08);
  --lg-shadow-2:
    0 0 0.5px rgba(10,12,16,0.12),
    0 18px 55px rgba(10,12,16,0.12);
  --lg-shadow-inset:
    inset 0 1px 0 rgba(255,255,255,0.70);

  /* Text glow in light is almost off */
  --lg-text-glow: 0 0 0 rgba(0,0,0,0);
}

/* ------------------------------------------------------------------ */
/* Material Classes */
/* ------------------------------------------------------------------ */

/* Base page background: deep calm with barely perceptible depth */
.lg-surface {
  background:
    radial-gradient(1200px 800px at 20% 10%, rgba(120,180,255,0.10), transparent 60%),
    radial-gradient(900px 700px at 80% 30%, rgba(170,220,255,0.06), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.00));
  background-color: rgb(var(--lg-bg));
  color: rgb(var(--lg-text));
}

/* Light mode surface: optical depth with nacre reflection */
.light .lg-surface {
  background:
    radial-gradient(1000px 700px at 20% 10%, rgba(90,150,235,0.10), transparent 55%),
    radial-gradient(900px 650px at 80% 25%, rgba(140,190,255,0.08), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,0.85), rgba(248,250,252,1));
  background-color: rgb(var(--lg-bg));
  color: rgb(var(--lg-text));
}

/* Glass panel (optical glass, not "opacity overlay") */
.lg-glass {
  border-radius: var(--lg-r-md);
  backdrop-filter: blur(var(--lg-glass-blur)) saturate(var(--lg-glass-sat));
  -webkit-backdrop-filter: blur(var(--lg-glass-blur)) saturate(var(--lg-glass-sat));

  /* gradient glass layer */
  background:
    linear-gradient(180deg,
      rgba(255,255,255, calc(var(--lg-glass-alpha) * 0.22)),
      rgba(255,255,255, calc(var(--lg-glass-alpha) * 0.10))
    );

  /* edge light */
  border: var(--lg-edge-width) solid rgba(255,255,255, var(--lg-edge-alpha));

  /* volumetric shadow */
  box-shadow: var(--lg-shadow-1), var(--lg-shadow-inset);

  transition:
    box-shadow var(--lg-dur-2) var(--lg-ease),
    border-color var(--lg-dur-2) var(--lg-ease),
    background var(--lg-dur-2) var(--lg-ease),
    transform var(--lg-dur-2) var(--lg-ease);
}

/* Light mode glass panel: pearlescent optical glass */
.light .lg-glass {
  backdrop-filter: blur(var(--lg-glass-blur)) saturate(var(--lg-glass-sat));
  -webkit-backdrop-filter: blur(var(--lg-glass-blur)) saturate(var(--lg-glass-sat));

  background:
    linear-gradient(180deg,
      rgba(255,255,255,0.78),
      rgba(255,255,255,0.58)
    );

  border: var(--lg-edge-width) solid rgba(10,12,16, 0.08);
  box-shadow: var(--lg-shadow-1), var(--lg-shadow-inset);
}

/* Active glass: slightly cooler, slightly brighter edge, more depth */
.lg-glass--active {
  border-color: rgba(170,220,255, var(--lg-edge-alpha-strong));
  box-shadow: var(--lg-shadow-2), var(--lg-shadow-inset);
  transform: translateY(-0.5px);
}

/* Light mode active glass: focus with clarity + depth */
.light .lg-glass--active {
  border-color: rgba(90,150,235, 0.18);
  box-shadow: var(--lg-shadow-2), var(--lg-shadow-inset);
  transform: translateY(-0.5px);
}

/* Subtle hover (proximity) — never "button-like" */
.lg-glass--hover:hover {
  border-color: rgba(255,255,255, calc(var(--lg-edge-alpha) + 0.06));
  box-shadow: var(--lg-shadow-2), var(--lg-shadow-inset);
}

/* Luminous text style */
.lg-text {
  color: rgba(var(--lg-text), 0.92);
  text-shadow: var(--lg-text-glow);
}

.lg-text-muted {
  color: rgba(var(--lg-text-muted), 0.85);
}

.lg-text-strong {
  color: rgba(var(--lg-text-strong), 0.96);
}

/* Light mode typography: readable at 70% screen brightness */
.light .lg-text {
  color: rgba(var(--lg-text), 0.92);
}

.light .lg-text-muted {
  color: rgba(var(--lg-text-muted), 0.78);
}

/* Hairline indicator (for cell hover/active) */
.lg-indicator {
  width: 2px;
  border-radius: 999px;
  background: linear-gradient(
    180deg,
    rgba(170,220,255,0.00),
    rgba(170,220,255,0.40),
    rgba(120,180,255,0.18),
    rgba(170,220,255,0.00)
  );
  filter: drop-shadow(0 0 6px rgba(120,180,255,0.18));
}

/* Floating toolbar "dark glass" (calm, not neon) */
.lg-toolbar {
  border-radius: 12px;
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  background:
    linear-gradient(180deg,
      rgba(10,12,16,0.78),
      rgba(10,12,16,0.62)
    );
  border: 0.5px solid rgba(255,255,255,0.10);
  box-shadow:
    0 0 0.5px rgba(255,255,255,0.12),
    0 14px 60px rgba(0,0,0,0.35);
}

/* Light mode toolbar: graphite translucent (not white, not black) */
.light .lg-toolbar {
  background:
    linear-gradient(180deg,
      rgba(250,252,255,0.86),
      rgba(245,248,252,0.78)
    );
  border: 0.5px solid rgba(10,12,16,0.10);
  box-shadow:
    0 0 0.5px rgba(10,12,16,0.08),
    0 18px 60px rgba(10,12,16,0.14);
}

/* Toolbar icon button */
.lg-iconbtn {
  border-radius: 10px;
  transition: background var(--lg-dur-1) var(--lg-ease), color var(--lg-dur-1) var(--lg-ease);
  color: rgba(var(--lg-text-muted), 0.9);
}
.lg-iconbtn:hover {
  background: rgba(255,255,255,0.10);
  color: rgba(var(--lg-text-strong), 0.92);
}

/* Light mode toolbar buttons */
.light .lg-iconbtn {
  color: rgba(20,24,32,0.70);
}
.light .lg-iconbtn:hover {
  background: rgba(10,12,16,0.06);
  color: rgba(10,12,16,0.92);
}

/* Selection highlight (subtle) */
.lg-selection ::-moz-selection {
  background: rgba(120, 180, 255, 0.22);
}
.lg-selection ::selection {
  background: rgba(120, 180, 255, 0.22);
}

/* Code block glass (slightly different for readability) */
.lg-code-glass {
  border-radius: var(--lg-r-sm);
  backdrop-filter: blur(8px) saturate(1.1);
  -webkit-backdrop-filter: blur(8px) saturate(1.1);
  background:
    linear-gradient(180deg,
      rgba(0,0,0, 0.18),
      rgba(0,0,0, 0.12)
    );
  border: var(--lg-edge-width) solid rgba(255,255,255, 0.08);
  box-shadow: 
    0 0 0.5px rgba(255,255,255,0.06),
    0 4px 16px rgba(0,0,0,0.25);
}