/* =============================================================================
   WYGRAMATYKA — wow-theme.css
   Shared design tokens + opt-in "wow-" utilities + dark mode (opt-in).

   SAFE TO INCLUDE ANYWHERE: this file is intentionally LOW-SPECIFICITY.
   - It defines CSS custom properties on :root (and dark-mode equivalents).
   - It styles ONLY classes prefixed with `wow-` (and a tiny opt-in surface set).
   - It NEVER restyles generic tags (div, button, h1...) so existing pages with
     hardcoded inline styles keep working unchanged.
   Migration path: pages can gradually replace hardcoded values with var(--wg-*).
   ============================================================================= */

/* =============================================================================
   1. DESIGN TOKENS (light / default)
   ============================================================================= */
:root {
  /* --- Brand palette (mirrors existing :root across modules) --- */
  --wg-teal:   #1B8DA6;
  --wg-green:  #2DB55D;
  --wg-purple: #8c52ff;
  --wg-orange: #F5A623;
  --wg-pink:   #e84393;

  /* --- Text --- */
  --wg-text:   #1a3a4a;
  --wg-muted:  #4a7a8a;

  /* --- Surfaces / backgrounds (light) --- */
  --wg-bg:        #f3fafc;
  --wg-surface:   #ffffff;
  --wg-surface-2: #eef6f9;
  --wg-border:    rgba(27, 141, 166, 0.16);

  /* --- Glass card (light) --- */
  --wg-glass-bg:     rgba(255, 255, 255, 0.62);
  --wg-glass-border: rgba(255, 255, 255, 0.55);
  --wg-glass-blur:   14px;

  /* --- Radius scale --- */
  --wg-r-sm: 12px;
  --wg-r:    16px;
  --wg-r-md: 20px;
  --wg-r-lg: 24px;
  --wg-r-pill: 999px;

  /* --- Shadows --- */
  --wg-shadow-sm: 0 2px 8px rgba(27, 58, 74, 0.08);
  --wg-shadow:    0 8px 24px rgba(27, 58, 74, 0.12);
  --wg-shadow-lg: 0 18px 48px rgba(27, 58, 74, 0.18);
  --wg-glow:      0 0 0 0 rgba(140, 82, 255, 0.0);

  /* --- Spacing scale --- */
  --wg-sp-1: 4px;
  --wg-sp-2: 8px;
  --wg-sp-3: 12px;
  --wg-sp-4: 16px;
  --wg-sp-5: 24px;
  --wg-sp-6: 32px;

  /* --- Motion --- */
  --wg-spring: cubic-bezier(.34, 1.56, .64, 1);
  --wg-ease:   cubic-bezier(.4, 0, .2, 1);
  --wg-dur:    .28s;

  /* --- Typography --- */
  --wg-font: 'Nunito', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

  /* --- Signature gradient --- */
  --wg-grad: linear-gradient(135deg, var(--wg-teal), var(--wg-purple) 55%, var(--wg-pink));

  /* --- Focus ring (accessibility) --- */
  --wg-focus: 0 0 0 3px rgba(140, 82, 255, 0.45);
}

/* =============================================================================
   2. DARK MODE
   Two triggers, both opt-in friendly:
   (a) explicit  [data-theme="dark"]  — set by the app's theme toggle.
   (b) system    prefers-color-scheme: dark — but ONLY when the page hasn't
       explicitly opted into light (:root:not([data-theme="light"])), so a user
       who chose light never gets auto-darkened.
   We remap TOKENS only (+ the small opt-in wow-surface/card/text set below).
   Arbitrary existing elements with hardcoded colors are deliberately untouched.
   ============================================================================= */
[data-theme="dark"] {
  --wg-text:   #e6f1f5;
  --wg-muted:  #8fb3c0;

  --wg-bg:        #0c1a22;
  --wg-surface:   #12242e;
  --wg-surface-2: #18303c;
  --wg-border:    rgba(120, 200, 220, 0.18);

  --wg-glass-bg:     rgba(18, 36, 46, 0.55);
  --wg-glass-border: rgba(120, 200, 220, 0.22);

  --wg-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.45);
  --wg-shadow:    0 8px 24px rgba(0, 0, 0, 0.55);
  --wg-shadow-lg: 0 18px 48px rgba(0, 0, 0, 0.65);

  /* brand accents stay vivid in dark — nudge a touch brighter for contrast */
  --wg-teal:   #2bb6d4;
  --wg-green:  #3ad172;
  --wg-purple: #a374ff;
  --wg-orange: #ffb733;
  --wg-pink:   #ff5fa9;
}

/* System-preference fallback (gated so explicit light theme wins) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    --wg-text:   #e6f1f5;
    --wg-muted:  #8fb3c0;

    --wg-bg:        #0c1a22;
    --wg-surface:   #12242e;
    --wg-surface-2: #18303c;
    --wg-border:    rgba(120, 200, 220, 0.18);

    --wg-glass-bg:     rgba(18, 36, 46, 0.55);
    --wg-glass-border: rgba(120, 200, 220, 0.22);

    --wg-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.45);
    --wg-shadow:    0 8px 24px rgba(0, 0, 0, 0.55);
    --wg-shadow-lg: 0 18px 48px rgba(0, 0, 0, 0.65);

    --wg-teal:   #2bb6d4;
    --wg-green:  #3ad172;
    --wg-purple: #a374ff;
    --wg-orange: #ffb733;
    --wg-pink:   #ff5fa9;
  }
}

/* =============================================================================
   3. OPT-IN SURFACE UTILITIES (the only classes dark mode "fills")
   ============================================================================= */
.wow-surface { background: var(--wg-bg);      color: var(--wg-text); }
.wow-text    { color: var(--wg-text); }
.wow-muted   { color: var(--wg-muted); }

/* =============================================================================
   4. OPT-IN COMPONENT UTILITIES (all prefixed `wow-`)
   ============================================================================= */

/* --- Glass card --- */
.wow-card {
  background: var(--wg-glass-bg);
  border: 1px solid var(--wg-glass-border);
  border-radius: var(--wg-r-lg);
  box-shadow: var(--wg-shadow);
  -webkit-backdrop-filter: blur(var(--wg-glass-blur));
  backdrop-filter: blur(var(--wg-glass-blur));
  padding: var(--wg-sp-5);
  color: var(--wg-text);
  transition: transform var(--wg-dur) var(--wg-spring),
              box-shadow var(--wg-dur) var(--wg-ease);
}
.wow-card:hover { transform: translateY(-3px); box-shadow: var(--wg-shadow-lg); }

/* --- Springy gradient button --- */
.wow-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--wg-sp-2);
  font-family: var(--wg-font);
  font-weight: 800;
  font-size: 1rem;
  line-height: 1;
  color: #fff;
  background: var(--wg-grad);
  background-size: 180% 180%;
  border: none;
  border-radius: var(--wg-r-pill);
  padding: var(--wg-sp-3) var(--wg-sp-5);
  cursor: pointer;
  box-shadow: var(--wg-shadow);
  transition: transform var(--wg-dur) var(--wg-spring),
              box-shadow var(--wg-dur) var(--wg-ease),
              background-position .6s var(--wg-ease);
}
.wow-btn:hover  { transform: translateY(-2px) scale(1.03); background-position: 100% 50%; }
.wow-btn:active { transform: translateY(0) scale(.97); }

/* --- Pill / badge --- */
.wow-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--wg-sp-1);
  font-family: var(--wg-font);
  font-weight: 700;
  font-size: .82rem;
  color: var(--wg-text);
  background: var(--wg-surface-2);
  border: 1px solid var(--wg-border);
  border-radius: var(--wg-r-pill);
  padding: 4px 12px;
}

/* --- Animated gradient text --- */
.wow-grad-text {
  background: linear-gradient(90deg, var(--wg-teal), var(--wg-purple), var(--wg-pink), var(--wg-teal));
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-weight: 900;
  animation: wow-grad-shift 6s linear infinite;
}

/* --- Glow accent --- */
.wow-glow { box-shadow: 0 0 18px rgba(140, 82, 255, 0.45); }

/* =============================================================================
   5. MOTION UTILITIES & KEYFRAMES
   ============================================================================= */

/* --- Gentle float --- */
.wow-float { animation: wow-float 4s ease-in-out infinite; }

/* --- Shimmer sweep --- */
.wow-shimmer {
  position: relative;
  overflow: hidden;
}
.wow-shimmer::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.55) 50%, transparent 70%);
  transform: translateX(-100%);
  animation: wow-shimmer 2.2s ease-in-out infinite;
}

/* --- Skeleton loading placeholder --- */
.wow-skeleton {
  border-radius: var(--wg-r-sm);
  background: linear-gradient(90deg, var(--wg-surface-2) 25%, var(--wg-surface) 37%, var(--wg-surface-2) 63%);
  background-size: 400% 100%;
  animation: wow-skeleton 1.4s ease infinite;
  min-height: 1em;
}

/* --- Entrance: fade in --- */
.wow-fade-in  { animation: wow-fade-in .5s var(--wg-ease) both; }

/* --- Entrance: slide up --- */
.wow-slide-up { animation: wow-slide-up .5s var(--wg-spring) both; }

@keyframes wow-grad-shift { to   { background-position: 300% 50%; } }
@keyframes wow-float      { 50%  { transform: translateY(-8px); } }
@keyframes wow-shimmer    { 100% { transform: translateX(100%); } }
@keyframes wow-skeleton   { 0%   { background-position: 100% 0; } 100% { background-position: 0 0; } }
@keyframes wow-fade-in    { from { opacity: 0; } to { opacity: 1; } }
@keyframes wow-slide-up   { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }

/* =============================================================================
   6. CIRCULAR PROGRESS RING (conic-gradient, driven by --p: 0..100)
      Usage: <div class="wow-ring" style="--p:72"><span>72%</span></div>
   ============================================================================= */
.wow-ring {
  --p: 0;
  --ring-size: 84px;
  --ring-thick: 10px;
  width: var(--ring-size);
  height: var(--ring-size);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background:
    conic-gradient(var(--wg-purple) calc(var(--p) * 1%), var(--wg-surface-2) 0);
  transition: background .6s var(--wg-ease);
}
.wow-ring::before {
  content: "";
  position: absolute;
  width: calc(var(--ring-size) - var(--ring-thick) * 2);
  height: calc(var(--ring-size) - var(--ring-thick) * 2);
  border-radius: 50%;
  background: var(--wg-surface);
}
.wow-ring > * {
  position: relative;
  z-index: 1;
  font-family: var(--wg-font);
  font-weight: 800;
  color: var(--wg-text);
}

/* =============================================================================
   7. ACCESSIBILITY — focus-visible for keyboard users (opt-in)
   ============================================================================= */
.wow-btn:focus-visible,
.wow-card:focus-visible,
.wow-pill:focus-visible,
.wow-focusable:focus-visible {
  outline: none;
  box-shadow: var(--wg-focus), var(--wg-shadow);
}

/* =============================================================================
   8. REDUCED MOTION — disable animations/transitions defined in THIS file
   ============================================================================= */
@media (prefers-reduced-motion: reduce) {
  .wow-float,
  .wow-grad-text,
  .wow-shimmer::after,
  .wow-skeleton,
  .wow-fade-in,
  .wow-slide-up {
    animation: none !important;
  }
  .wow-card,
  .wow-btn,
  .wow-ring {
    transition: none !important;
  }
  /* keep gradient text legible when its animation is off */
  .wow-grad-text { background-position: 0 50%; }
}