/* ==========================================================================
   FLAVOR GLASS — Liquid Glass Design System
   Inspired by Apple's WWDC 2025 Liquid Glass language.
   Three compositional layers: Highlight · Shadow · Illumination
   ========================================================================== */

/* --- CSS Custom Properties (Design Tokens) --- */
:root {
  /* Color Palette — Dark (default) */
  --fg-bg-primary: #05080f;
  --fg-bg-secondary: #0a1020;
  --fg-bg-tertiary: #111b2e;

  /* Glass surface colors */
  --fg-glass-bg: rgba(255, 255, 255, 0.06);
  --fg-glass-bg-hover: rgba(255, 255, 255, 0.10);
  --fg-glass-bg-active: rgba(255, 255, 255, 0.14);
  --fg-glass-border: rgba(255, 255, 255, 0.12);
  --fg-glass-border-hover: rgba(255, 255, 255, 0.22);
  --fg-glass-highlight: rgba(255, 255, 255, 0.15);
  --fg-glass-shadow: rgba(0, 0, 0, 0.4);

  /* Text */
  --fg-text-primary: rgba(255, 255, 255, 0.95);
  --fg-text-secondary: rgba(255, 255, 255, 0.60);
  --fg-text-tertiary: rgba(255, 255, 255, 0.38);
  --fg-text-inverse: rgba(0, 0, 0, 0.85);

  /* Accent */
  --fg-accent: #58c4dc;
  --fg-accent-soft: rgba(88, 196, 220, 0.18);
  --fg-accent-glow: rgba(88, 196, 220, 0.35);
  --fg-accent-solid: #3fb8d2;
  --fg-success: #34d399;
  --fg-warning: #fbbf24;

  /* Glass effects */
  --fg-blur-sm: 8px;
  --fg-blur-md: 16px;
  --fg-blur-lg: 32px;
  --fg-blur-xl: 48px;
  --fg-saturate: 180%;

  /* Spacing scale */
  --fg-space-xs: 0.25rem;
  --fg-space-sm: 0.5rem;
  --fg-space-md: 1rem;
  --fg-space-lg: 1.5rem;
  --fg-space-xl: 2rem;
  --fg-space-2xl: 3rem;
  --fg-space-3xl: 4rem;
  --fg-space-4xl: 6rem;

  /* Radius */
  --fg-radius-sm: 8px;
  --fg-radius-md: 14px;
  --fg-radius-lg: 20px;
  --fg-radius-xl: 28px;
  --fg-radius-pill: 100px;
  --fg-radius-full: 50%;

  /* Typography */
  --fg-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --fg-font-mono: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;

  --fg-text-xs: 0.75rem;
  --fg-text-sm: 0.875rem;
  --fg-text-base: 1rem;
  --fg-text-lg: 1.125rem;
  --fg-text-xl: 1.25rem;
  --fg-text-2xl: 1.5rem;
  --fg-text-3xl: 2rem;
  --fg-text-4xl: 2.5rem;
  --fg-text-5xl: 3.25rem;
  --fg-text-6xl: 4rem;

  --fg-leading-tight: 1.15;
  --fg-leading-snug: 1.3;
  --fg-leading-normal: 1.6;

  --fg-weight-light: 300;
  --fg-weight-regular: 400;
  --fg-weight-medium: 500;
  --fg-weight-semibold: 600;
  --fg-weight-bold: 700;

  /* Transitions */
  --fg-ease-glass: cubic-bezier(0.4, 0, 0.2, 1);
  --fg-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --fg-ease-smooth: cubic-bezier(0.22, 1, 0.36, 1);
  --fg-duration-fast: 150ms;
  --fg-duration-base: 250ms;
  --fg-duration-slow: 400ms;
  --fg-duration-page: 600ms;

  /* Shadows */
  --fg-shadow-glass: 0 8px 32px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  --fg-shadow-glass-hover: 0 12px 40px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  --fg-shadow-glow: 0 0 30px var(--fg-accent-glow);
  --fg-shadow-float: 0 20px 60px rgba(0, 0, 0, 0.3);

  /* Layout */
  --fg-sidebar-width: 320px;
  --fg-container-max: 1200px;
  --fg-header-height: 72px;
}

/* --- Light mode --- */
[data-theme="light"] {
  --fg-bg-primary: #f2f4f8;
  --fg-bg-secondary: #e8ecf2;
  --fg-bg-tertiary: #dde2ea;

  --fg-glass-bg: rgba(255, 255, 255, 0.55);
  --fg-glass-bg-hover: rgba(255, 255, 255, 0.70);
  --fg-glass-bg-active: rgba(255, 255, 255, 0.80);
  --fg-glass-border: rgba(255, 255, 255, 0.60);
  --fg-glass-border-hover: rgba(255, 255, 255, 0.80);
  --fg-glass-highlight: rgba(255, 255, 255, 0.80);
  --fg-glass-shadow: rgba(0, 0, 0, 0.08);

  --fg-text-primary: rgba(0, 0, 0, 0.85);
  --fg-text-secondary: rgba(0, 0, 0, 0.55);
  --fg-text-tertiary: rgba(0, 0, 0, 0.35);

  --fg-accent: #0e7490;
  --fg-accent-soft: rgba(14, 116, 144, 0.12);
  --fg-accent-glow: rgba(14, 116, 144, 0.20);
  --fg-accent-solid: #0c6980;

  --fg-shadow-glass: 0 8px 32px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.90);
  --fg-shadow-glass-hover: 0 12px 40px rgba(0, 0, 0, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.95);
  --fg-shadow-float: 0 20px 60px rgba(0, 0, 0, 0.08);
}

/* --- Global Reset & Base --- */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--fg-font-family);
  font-weight: var(--fg-weight-regular);
  line-height: var(--fg-leading-normal);
  color: var(--fg-text-primary);
  background: var(--fg-bg-primary);
  overflow-x: hidden;
  min-height: 100vh;
}

/* Animated gradient background */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(ellipse 80% 60% at 20% 20%, rgba(88, 196, 220, 0.08) 0%, transparent 60%),
    radial-gradient(ellipse 60% 80% at 80% 80%, rgba(139, 92, 246, 0.06) 0%, transparent 60%),
    radial-gradient(ellipse 50% 50% at 50% 50%, rgba(236, 72, 153, 0.04) 0%, transparent 60%);
  animation: fg-ambient-shift 20s ease-in-out infinite alternate;
}

@keyframes fg-ambient-shift {
  0% { transform: scale(1) rotate(0deg); opacity: 1; }
  50% { transform: scale(1.1) rotate(2deg); opacity: 0.8; }
  100% { transform: scale(1) rotate(-1deg); opacity: 1; }
}

/* --- SVG Displacement Filter (global, for lensing effect) --- */
.fg-svg-filters {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* ==========================================================================
   GLASS MATERIAL CLASSES
   ========================================================================== */

/* Standard glass panel */
.glass {
  background: var(--fg-glass-bg);
  -webkit-backdrop-filter: blur(var(--fg-blur-md)) saturate(var(--fg-saturate));
  backdrop-filter: blur(var(--fg-blur-md)) saturate(var(--fg-saturate));
  border: 1px solid var(--fg-glass-border);
  border-radius: var(--fg-radius-lg);
  box-shadow: var(--fg-shadow-glass);
  transition:
    background var(--fg-duration-base) var(--fg-ease-glass),
    border-color var(--fg-duration-base) var(--fg-ease-glass),
    box-shadow var(--fg-duration-base) var(--fg-ease-glass),
    transform var(--fg-duration-base) var(--fg-ease-glass);
}

.glass:hover {
  background: var(--fg-glass-bg-hover);
  border-color: var(--fg-glass-border-hover);
  box-shadow: var(--fg-shadow-glass-hover);
}

/* Glass with top highlight shine */
.glass-shine {
  position: relative;
  overflow: hidden;
}

.glass-shine::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--fg-glass-highlight) 30%,
    var(--fg-glass-highlight) 70%,
    transparent 100%
  );
  opacity: 0.7;
  z-index: 1;
}

/* Glass with refraction lensing */
.glass-lens {
  position: relative;
}

.glass-lens::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.12) 0%,
    transparent 40%,
    transparent 60%,
    rgba(255, 255, 255, 0.06) 100%
  );
  pointer-events: none;
  z-index: 1;
}

/* Heavy frosted glass */
.glass-frosted {
  background: var(--fg-glass-bg);
  -webkit-backdrop-filter: blur(var(--fg-blur-xl)) saturate(200%);
  backdrop-filter: blur(var(--fg-blur-xl)) saturate(200%);
  border: 1px solid var(--fg-glass-border);
  border-radius: var(--fg-radius-lg);
  box-shadow: var(--fg-shadow-glass);
}

/* Subtle glass (minimal effect) */
.glass-subtle {
  background: rgba(255, 255, 255, 0.03);
  -webkit-backdrop-filter: blur(var(--fg-blur-sm));
  backdrop-filter: blur(var(--fg-blur-sm));
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--fg-radius-md);
}

/* Tinted accent glass */
.glass-accent {
  background: var(--fg-accent-soft);
  -webkit-backdrop-filter: blur(var(--fg-blur-md)) saturate(var(--fg-saturate));
  backdrop-filter: blur(var(--fg-blur-md)) saturate(var(--fg-saturate));
  border: 1px solid rgba(88, 196, 220, 0.20);
  border-radius: var(--fg-radius-lg);
  box-shadow: var(--fg-shadow-glass);
}

/* Floating elevated glass */
.glass-float {
  box-shadow: var(--fg-shadow-float);
  transform: translateY(0);
  transition:
    transform var(--fg-duration-slow) var(--fg-ease-spring),
    box-shadow var(--fg-duration-slow) var(--fg-ease-glass);
}

.glass-float:hover {
  transform: translateY(-4px);
  box-shadow:
    0 24px 70px rgba(0, 0, 0, 0.35),
    0 0 40px var(--fg-accent-glow);
}

/* ==========================================================================
   TYPOGRAPHY
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
  font-weight: var(--fg-weight-semibold);
  line-height: var(--fg-leading-tight);
  letter-spacing: -0.02em;
  color: var(--fg-text-primary);
}

h1 { font-size: var(--fg-text-5xl); }
h2 { font-size: var(--fg-text-4xl); }
h3 { font-size: var(--fg-text-2xl); }
h4 { font-size: var(--fg-text-xl); }
h5 { font-size: var(--fg-text-lg); }
h6 { font-size: var(--fg-text-base); }

p {
  color: var(--fg-text-secondary);
  line-height: var(--fg-leading-normal);
}

a {
  color: var(--fg-accent);
  text-decoration: none;
  transition: color var(--fg-duration-fast) var(--fg-ease-glass);
}

a:hover {
  color: var(--fg-accent-solid);
}

.text-gradient {
  background: linear-gradient(135deg, var(--fg-accent) 0%, #a78bfa 50%, #f472b6 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.label {
  font-size: var(--fg-text-xs);
  font-weight: var(--fg-weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--fg-text-tertiary);
}

/* ==========================================================================
   SCROLLBAR
   ========================================================================== */

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

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

::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.25);
}

/* ==========================================================================
   SELECTION
   ========================================================================== */

::selection {
  background: var(--fg-accent-soft);
  color: var(--fg-text-primary);
}