/* ============================================================
   SuperPraia — Design Tokens & Material Surfaces
   Foundational visual aesthetic for the dark-ocean redesign.
   ============================================================ */

/* -----------------------------------------------------------
   1. COLOR PALETTE
   ----------------------------------------------------------- */
:root {
  /* ---- Background depth layers (darkest → lightest) ---- */
  --sp-bg-deep: #060c18;
  --sp-bg-base: #0b1726;
  --sp-bg-elevated: #101e34;
  --sp-bg-surface: #152842;
  --sp-bg-hover: #1a3050;

  /* ---- Primary accent — Cyan / Teal ---- */
  --sp-accent: #00d4ff;
  --sp-accent-bright: #67e8f9;
  --sp-accent-muted: #0891b2;
  --sp-accent-dim: #065a73;
  --sp-accent-glow: rgba(0, 212, 255, 0.40);
  --sp-accent-subtle: rgba(0, 212, 255, 0.10);

  /* ---- Text hierarchy (on dark backgrounds) ---- */
  --sp-text-primary: #f0f6fc;
  --sp-text-secondary: #8b9fc0;
  --sp-text-tertiary: #4a6180;
  --sp-text-accent: #00d4ff;
  --sp-text-inverse: #0b1726;

  /* ---- Borders ---- */
  --sp-border: rgba(30, 58, 95, 0.60);
  --sp-border-subtle: rgba(30, 58, 95, 0.35);
  --sp-border-accent: rgba(0, 212, 255, 0.30);
  --sp-border-glow: rgba(0, 212, 255, 0.12);

  /* ---- Semantic status colors ---- */
  --sp-success: #22c55e;
  --sp-warning: #f59e0b;
  --sp-danger: #ef4444;
  --sp-info: #3b82f6;

  /* ---- Glassmorphism surface values ---- */
  --sp-glass-bg: rgba(11, 23, 38, 0.65);
  --sp-glass-bg-dense: rgba(11, 23, 38, 0.80);
  --sp-glass-bg-light: rgba(21, 40, 66, 0.45);
  --sp-glass-blur: 16px;
  --sp-glass-blur-heavy: 24px;

  /* ---- Shadows & glows ---- */
  --sp-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35);
  --sp-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.45);
  --sp-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.55);
  --sp-shadow-glow: 0 0 20px rgba(0, 212, 255, 0.15),
    0 0 40px rgba(0, 212, 255, 0.05);

  /* ---- Radius ---- */
  --sp-radius-sm: 6px;
  --sp-radius-md: 12px;
  --sp-radius-lg: 18px;
  --sp-radius-xl: 24px;

  /* ---- Transitions ---- */
  --sp-transition-fast: 150ms ease;
  --sp-transition: 250ms ease;
  --sp-transition-slow: 400ms ease;
  --sp-transition-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ---- Typography ---- */
  --sp-font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}


/* -----------------------------------------------------------
   2. BOOTSTRAP OVERRIDES (dark theme)
   Maps Bootstrap's CSS variables to SuperPraia tokens so that
   Bootstrap components inherit the new palette automatically.
   ----------------------------------------------------------- */
:root {
  --bs-body-bg: var(--sp-bg-base);
  --bs-body-color: var(--sp-text-primary);
  --bs-body-font-family: var(--sp-font-family);
  --bs-body-font-size: 1.2rem;

  --bs-link-color: var(--sp-accent);
  --bs-link-hover-color: var(--sp-accent-bright);

  --bs-primary: var(--sp-accent);
  --bs-primary-rgb: 0, 212, 255;

  --bs-border-color: var(--sp-border);
}


/* -----------------------------------------------------------
   3. MATERIAL SURFACES — Glassmorphism
   ----------------------------------------------------------- */

/* Primary glass panel (sidebar, overlays) */
.sp-glass {
  background: var(--sp-glass-bg);
  backdrop-filter: blur(var(--sp-glass-blur));
  -webkit-backdrop-filter: blur(var(--sp-glass-blur));
  border: 1px solid var(--sp-border-accent);
  border-radius: var(--sp-radius-md);
  box-shadow: var(--sp-shadow-md);
}

/* Dense glass — more opaque, for primary panels & sidebars */
.sp-glass-panel {
  background: var(--sp-glass-bg-dense);
  backdrop-filter: blur(var(--sp-glass-blur-heavy));
  -webkit-backdrop-filter: blur(var(--sp-glass-blur-heavy));
  border: 1px solid var(--sp-border-accent);
  border-radius: var(--sp-radius-lg);
  box-shadow: var(--sp-shadow-lg);
}

/* Subtle glass — lighter, for map overlay widgets */
.sp-glass-subtle {
  background: var(--sp-glass-bg-light);
  backdrop-filter: blur(var(--sp-glass-blur));
  -webkit-backdrop-filter: blur(var(--sp-glass-blur));
  border: 1px solid var(--sp-border-glow);
  border-radius: var(--sp-radius-md);
  box-shadow: var(--sp-shadow-sm);
}

/* Card glass — for list items, beach cards */
.sp-glass-card {
  background: var(--sp-glass-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--sp-border);
  border-radius: var(--sp-radius-sm);
  box-shadow: var(--sp-shadow-sm);
  transition: border-color var(--sp-transition-fast),
    box-shadow var(--sp-transition-fast);
}

.sp-glass-card:hover {
  border-color: var(--sp-border-accent);
  box-shadow: var(--sp-shadow-md),
    var(--sp-shadow-glow);
}


/* -----------------------------------------------------------
   4. ACCENT GLOW BORDER UTILITY
   Adds the characteristic cyan glow edge from the design.
   ----------------------------------------------------------- */
.sp-glow-border {
  border: 1px solid var(--sp-border-accent);
  box-shadow: inset 0 0 6px var(--sp-accent-subtle),
    0 0 12px rgba(0, 212, 255, 0.08);
}


/* -----------------------------------------------------------
   5. SURFACE FILL UTILITIES
   ----------------------------------------------------------- */
.sp-surface-deep {
  background-color: var(--sp-bg-deep);
}

.sp-surface-base {
  background-color: var(--sp-bg-base);
}

.sp-surface-elevated {
  background-color: var(--sp-bg-elevated);
}

.sp-surface-raised {
  background-color: var(--sp-bg-surface);
}


/* -----------------------------------------------------------
   6. TEXT COLOR UTILITIES
   ----------------------------------------------------------- */
.sp-text-primary {
  color: var(--sp-text-primary);
}

.sp-text-secondary {
  color: var(--sp-text-secondary);
}

.sp-text-muted {
  color: var(--sp-text-tertiary);
}

.sp-text-accent {
  color: var(--sp-text-accent);
}


/* -----------------------------------------------------------
   7. SCROLLBAR (dark theme)
   ----------------------------------------------------------- */
.sp-scrollbar::-webkit-scrollbar {
  width: 6px;
}

.sp-scrollbar::-webkit-scrollbar-track {
  background: var(--sp-bg-deep);
}

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

.sp-scrollbar::-webkit-scrollbar-thumb:hover {
  background: var(--sp-accent-dim);
}

/* Firefox */
.sp-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: var(--sp-border) var(--sp-bg-deep);
}