/* ==========================================================================
   Prismorphism Design Tokens
   Core design tokens as CSS custom properties.
   Colors use space-separated RGB triplets for alpha compositing:
   usage: rgba(var(--pm-color-bg-primary), 0.5)
   ========================================================================== */

:root {
  /* --------------------------------------------------------------------------
     Background Scale
     -------------------------------------------------------------------------- */
  --pm-color-bg-base: 0 0 0;
  --pm-color-bg-primary: 9 9 11;
  --pm-color-bg-secondary: 24 24 27;
  --pm-color-bg-tertiary: 39 39 42;
  --pm-color-bg-elevated: 52 52 56;

  /* --------------------------------------------------------------------------
     Text Scale
     -------------------------------------------------------------------------- */
  --pm-color-text-primary: 250 250 250;
  --pm-color-text-secondary: 161 161 170;
  --pm-color-text-tertiary: 113 113 122;
  --pm-color-text-muted: 82 82 91;

  /* --------------------------------------------------------------------------
     Border Scale
     -------------------------------------------------------------------------- */
  --pm-color-border-primary: 39 39 42;
  --pm-color-border-secondary: 63 63 70;
  --pm-color-border-accent: 82 82 91;

  /* --------------------------------------------------------------------------
     Semantic Status Colors
     -------------------------------------------------------------------------- */
  --pm-color-success: 34 197 94;
  --pm-color-warning: 234 179 8;
  --pm-color-error: 239 68 68;
  --pm-color-info: 59 130 246;

  /* --------------------------------------------------------------------------
     App Accent System
     Apps override these to brand themselves.
     -------------------------------------------------------------------------- */
  --pm-app-accent: 148 163 184;
  --pm-app-accent-alt: 100 116 139;
  --pm-app-accent-dark: 71 85 105;

  /* Derived accent tokens */
  --pm-color-accent: var(--pm-app-accent);
  --pm-color-accent-alt: var(--pm-app-accent-alt);
  --pm-color-accent-dark: var(--pm-app-accent-dark);

  /* --------------------------------------------------------------------------
     Prismatic Colors
     The signature prismatic overlay colors.
     -------------------------------------------------------------------------- */
  --pm-prismatic-magenta: 255 0 128;
  --pm-prismatic-cyan: 0 255 255;
  --pm-prismatic-yellow: 255 255 0;
  --pm-prismatic-overlay-opacity: 0.03;

  /* --------------------------------------------------------------------------
     Typography Scale (1.25 ratio)
     -------------------------------------------------------------------------- */
  --pm-text-2xs: 0.625rem;   /* 10px */
  --pm-text-xs: 0.75rem;     /* 12px */
  --pm-text-sm: 0.875rem;    /* 14px */
  --pm-text-base: 1rem;      /* 16px */
  --pm-text-lg: 1.125rem;    /* 18px */
  --pm-text-xl: 1.25rem;     /* 20px */
  --pm-text-2xl: 1.5rem;     /* 24px */
  --pm-text-3xl: 1.875rem;   /* 30px */
  --pm-text-4xl: 2.25rem;    /* 36px */
  --pm-text-5xl: 3rem;       /* 48px */
  --pm-text-6xl: 3.75rem;    /* 60px */

  /* Line Heights */
  --pm-leading-none: 1;
  --pm-leading-tight: 1.25;
  --pm-leading-snug: 1.375;
  --pm-leading-normal: 1.5;
  --pm-leading-relaxed: 1.625;
  --pm-leading-loose: 2;

  /* Letter Spacing */
  --pm-tracking-tighter: -0.05em;
  --pm-tracking-tight: -0.025em;
  --pm-tracking-normal: 0em;
  --pm-tracking-wide: 0.025em;
  --pm-tracking-wider: 0.05em;
  --pm-tracking-widest: 0.1em;

  /* --------------------------------------------------------------------------
     Font Stacks
     -------------------------------------------------------------------------- */
  --pm-font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --pm-font-mono: 'Commit Mono', 'JetBrains Mono', 'Geist Mono', ui-monospace, monospace;
  --pm-font-display: 'Fraunces', Georgia, serif;

  /* --------------------------------------------------------------------------
     Spacing (4px base)
     -------------------------------------------------------------------------- */
  --pm-space-0: 0px;
  --pm-space-px: 1px;
  --pm-space-0-5: 2px;
  --pm-space-1: 4px;
  --pm-space-1-5: 6px;
  --pm-space-2: 8px;
  --pm-space-2-5: 10px;
  --pm-space-3: 12px;
  --pm-space-4: 16px;
  --pm-space-5: 20px;
  --pm-space-6: 24px;
  --pm-space-8: 32px;
  --pm-space-10: 40px;
  --pm-space-12: 48px;
  --pm-space-16: 64px;

  /* --------------------------------------------------------------------------
     Border Radius
     -------------------------------------------------------------------------- */
  --pm-radius-sm: 4px;
  --pm-radius-md: 6px;
  --pm-radius-lg: 8px;
  --pm-radius-xl: 12px;
  --pm-radius-2xl: 16px;
  --pm-radius-full: 9999px;

  /* --------------------------------------------------------------------------
     Shadows
     -------------------------------------------------------------------------- */
  --pm-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
  --pm-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
  --pm-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.2);
  --pm-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -4px rgba(0, 0, 0, 0.2);
  --pm-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 8px 10px -6px rgba(0, 0, 0, 0.2);
  --pm-shadow-glow: 0 0 15px rgba(var(--pm-app-accent), 0.15), 0 0 30px rgba(var(--pm-app-accent), 0.05);
  --pm-shadow-glow-sm: 0 0 8px rgba(var(--pm-app-accent), 0.1);
  --pm-shadow-glow-lg: 0 0 20px rgba(var(--pm-app-accent), 0.2), 0 0 45px rgba(var(--pm-app-accent), 0.08);

  /* --------------------------------------------------------------------------
     Animation Tokens
     -------------------------------------------------------------------------- */
  --pm-duration-fast: 150ms;
  --pm-duration-normal: 250ms;
  --pm-duration-slow: 400ms;

  --pm-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --pm-ease-out: cubic-bezier(0, 0, 0.2, 1);
  --pm-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* --------------------------------------------------------------------------
     Z-Index Scale
     -------------------------------------------------------------------------- */
  --pm-z-deep: -1;
  --pm-z-base: 0;
  --pm-z-raised: 1;
  --pm-z-nav: 100;
  --pm-z-overlay: 200;
  --pm-z-modal: 300;
  --pm-z-popover: 400;
  --pm-z-toast: 500;
  --pm-z-max: 9999;
}
/* ==========================================================================
   Prismorphism Light Theme
   Overrides dark-first tokens for light mode.
   ========================================================================== */

.light,
[data-theme="light"] {
  /* Background Scale */
  --pm-color-bg-base: 255 255 255;
  --pm-color-bg-primary: 250 250 250;
  --pm-color-bg-secondary: 244 244 245;
  --pm-color-bg-tertiary: 228 228 231;
  --pm-color-bg-elevated: 255 255 255;

  /* Text Scale */
  --pm-color-text-primary: 9 9 11;
  --pm-color-text-secondary: 82 82 91;
  --pm-color-text-tertiary: 113 113 122;
  --pm-color-text-muted: 161 161 170;

  /* Border Scale */
  --pm-color-border-primary: 228 228 231;
  --pm-color-border-secondary: 212 212 216;
  --pm-color-border-accent: 161 161 170;

  /* Shadows (lighter for light mode) */
  --pm-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
  --pm-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
  --pm-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.04);
  --pm-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.04);
  --pm-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.04);
  --pm-shadow-glow: 0 0 15px rgba(var(--pm-app-accent), 0.1), 0 0 30px rgba(var(--pm-app-accent), 0.03);
  --pm-shadow-glow-sm: 0 0 8px rgba(var(--pm-app-accent), 0.06);
  --pm-shadow-glow-lg: 0 0 20px rgba(var(--pm-app-accent), 0.12), 0 0 45px rgba(var(--pm-app-accent), 0.04);

  /* Glass adjustments for light backgrounds */
  --pm-glass-tint: 0, 0, 0;
  --pm-glass-bg-opacity: 0.03;
  --pm-glass-blur: 12px;
  --pm-glass-border-opacity: 0.08;
  --pm-glass-shine-opacity: 0.1;
  --pm-prismatic-overlay-opacity: 0.02;
}
/* ==========================================================================
   Prismorphism Glass Primitives
   The heart of the system — glassmorphism containers with prismatic overlays.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Glass Variables (can be overridden by intensity modifiers)
   In dark mode, glass uses white at low opacity for visible-but-subtle effect.
   In light mode, themes.css switches to black at low opacity.
   -------------------------------------------------------------------------- */
:root {
  --pm-glass-bg-opacity: 0.02;
  --pm-glass-blur: 12px;
  --pm-glass-border-opacity: 0.08;
  --pm-glass-shine-opacity: 0.06;
  --pm-glass-tint: 255, 255, 255;
}

/* --------------------------------------------------------------------------
   Base Glass Container
   -------------------------------------------------------------------------- */
.pm-glass {
  position: relative;
  background: rgba(var(--pm-glass-tint), var(--pm-glass-bg-opacity));
  backdrop-filter: blur(var(--pm-glass-blur));
  -webkit-backdrop-filter: blur(var(--pm-glass-blur));
  border: 1px solid rgba(var(--pm-glass-tint), var(--pm-glass-border-opacity));
  border-radius: var(--pm-radius-lg);
}

/* Ensure child content sits above pseudo-elements */
.pm-glass > * {
  position: relative;
  z-index: 2;
}

/* --------------------------------------------------------------------------
   Intensity Modifiers
   -------------------------------------------------------------------------- */
.pm-glass-subtle {
  --pm-glass-bg-opacity: 0.01;
  --pm-glass-blur: 8px;
}

.pm-glass-strong {
  --pm-glass-bg-opacity: 0.05;
  --pm-glass-blur: 16px;
}

.pm-glass-solid {
  --pm-glass-bg-opacity: 0.75;
  --pm-glass-blur: 12px;
}

/* --------------------------------------------------------------------------
   Top Shine Line
   -------------------------------------------------------------------------- */
.pm-glass-shine::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, var(--pm-glass-shine-opacity)),
    transparent
  );
  border-radius: var(--pm-radius-lg) var(--pm-radius-lg) 0 0;
  z-index: 1;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   Prismatic Overlay (rainbow)
   -------------------------------------------------------------------------- */
.pm-prismatic::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(var(--pm-prismatic-magenta), var(--pm-prismatic-overlay-opacity)),
    rgba(var(--pm-prismatic-cyan), var(--pm-prismatic-overlay-opacity)),
    rgba(var(--pm-prismatic-yellow), var(--pm-prismatic-overlay-opacity))
  );
  border-radius: inherit;
  z-index: 1;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   Prismatic Tinted (app-accent bookends)
   -------------------------------------------------------------------------- */
.pm-prismatic-tinted::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(var(--pm-app-accent), 0.02),
    rgba(var(--pm-prismatic-magenta), var(--pm-prismatic-overlay-opacity)),
    rgba(var(--pm-prismatic-cyan), var(--pm-prismatic-overlay-opacity)),
    rgba(var(--pm-prismatic-yellow), var(--pm-prismatic-overlay-opacity)),
    rgba(var(--pm-app-accent), 0.02)
  );
  border-radius: inherit;
  z-index: 1;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   Glass Hover Effect
   -------------------------------------------------------------------------- */
.pm-glass-hover {
  transition:
    border-color var(--pm-duration-normal) var(--pm-ease-standard),
    box-shadow var(--pm-duration-normal) var(--pm-ease-standard);
}

.pm-glass-hover:hover {
  border-color: rgba(var(--pm-app-accent), 0.2);
  box-shadow: var(--pm-shadow-glow-sm);
}

/* --------------------------------------------------------------------------
   Focus Glow
   -------------------------------------------------------------------------- */
.pm-focus-glow:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px rgba(var(--pm-color-bg-primary), 1),
    0 0 0 4px rgba(var(--pm-app-accent), 0.5),
    var(--pm-shadow-glow-sm);
}

/* --------------------------------------------------------------------------
   Fallback for browsers without backdrop-filter
   -------------------------------------------------------------------------- */
@supports not (backdrop-filter: blur(1px)) {
  .pm-glass {
    background: rgba(var(--pm-color-bg-secondary), 0.85);
  }

  .pm-glass-subtle {
    background: rgba(var(--pm-color-bg-secondary), 0.75);
  }

  .pm-glass-strong {
    background: rgba(var(--pm-color-bg-secondary), 0.9);
  }

  .pm-glass-solid {
    background: rgba(var(--pm-color-bg-secondary), 0.95);
  }
}
/* ==========================================================================
   Prismorphism Animations
   Shared keyframes and utility classes.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Keyframes
   -------------------------------------------------------------------------- */
@keyframes pm-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes pm-slide-up {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes pm-slide-down {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes pm-slide-left {
  from { opacity: 0; transform: translateX(8px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes pm-slide-right {
  from { opacity: 0; transform: translateX(-8px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes pm-scale-in {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes pm-shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes pm-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes pm-spring {
  0% { transform: scale(0.9); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

/* --------------------------------------------------------------------------
   Animation Utility Classes
   -------------------------------------------------------------------------- */
.pm-animate-fade-in {
  animation: pm-fade-in var(--pm-duration-normal) var(--pm-ease-out) both;
}

.pm-animate-slide-up {
  animation: pm-slide-up var(--pm-duration-normal) var(--pm-ease-out) both;
}

.pm-animate-slide-down {
  animation: pm-slide-down var(--pm-duration-normal) var(--pm-ease-out) both;
}

.pm-animate-slide-left {
  animation: pm-slide-left var(--pm-duration-normal) var(--pm-ease-out) both;
}

.pm-animate-slide-right {
  animation: pm-slide-right var(--pm-duration-normal) var(--pm-ease-out) both;
}

.pm-animate-scale-in {
  animation: pm-scale-in var(--pm-duration-normal) var(--pm-ease-spring) both;
}

.pm-animate-spin {
  animation: pm-spin 1s linear infinite;
}

.pm-animate-spring {
  animation: pm-spring var(--pm-duration-slow) var(--pm-ease-spring) both;
}

/* --------------------------------------------------------------------------
   Stagger Delays
   -------------------------------------------------------------------------- */
.pm-delay-1 { animation-delay: 50ms; }
.pm-delay-2 { animation-delay: 100ms; }
.pm-delay-3 { animation-delay: 150ms; }
.pm-delay-4 { animation-delay: 200ms; }
.pm-delay-5 { animation-delay: 250ms; }

/* --------------------------------------------------------------------------
   Skeleton Loading
   -------------------------------------------------------------------------- */
.pm-skeleton {
  background: linear-gradient(
    90deg,
    rgba(var(--pm-color-bg-tertiary), 0.3) 25%,
    rgba(var(--pm-color-bg-tertiary), 0.5) 50%,
    rgba(var(--pm-color-bg-tertiary), 0.3) 75%
  );
  background-size: 200% 100%;
  animation: pm-shimmer 1.5s ease-in-out infinite;
  border-radius: var(--pm-radius-md);
}

/* --------------------------------------------------------------------------
   Reduced Motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .pm-animate-fade-in,
  .pm-animate-slide-up,
  .pm-animate-slide-down,
  .pm-animate-slide-left,
  .pm-animate-slide-right,
  .pm-animate-scale-in,
  .pm-animate-spin,
  .pm-animate-spring,
  .pm-skeleton {
    animation: none;
  }

  .pm-delay-1,
  .pm-delay-2,
  .pm-delay-3,
  .pm-delay-4,
  .pm-delay-5 {
    animation-delay: 0ms;
  }
}
/* ==========================================================================
   Prismorphism Utilities
   Small shared utility classes.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Focus Ring
   Unified focus-visible ring using app accent.
   -------------------------------------------------------------------------- */
.pm-focus-ring:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px rgb(var(--pm-color-bg-primary)),
    0 0 0 4px rgba(var(--pm-app-accent), 0.5);
}

/* --------------------------------------------------------------------------
   Scrollbar
   Thin dark scrollbar for consistent look.
   -------------------------------------------------------------------------- */
.pm-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--pm-color-border-secondary), 0.5) transparent;
}

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

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

.pm-scrollbar::-webkit-scrollbar-thumb {
  background: rgba(var(--pm-color-border-secondary), 0.5);
  border-radius: var(--pm-radius-full);
}

.pm-scrollbar::-webkit-scrollbar-thumb:hover {
  background: rgba(var(--pm-color-border-secondary), 0.8);
}

/* --------------------------------------------------------------------------
   Text Selection
   Accent-tinted text selection.
   -------------------------------------------------------------------------- */
.pm-selection ::selection {
  background: rgba(var(--pm-app-accent), 0.2);
  color: rgb(var(--pm-color-text-primary));
}

.pm-selection ::-moz-selection {
  background: rgba(var(--pm-app-accent), 0.2);
  color: rgb(var(--pm-color-text-primary));
}

/* --------------------------------------------------------------------------
   Text Gradient
   Accent-colored gradient text with fallback.
   -------------------------------------------------------------------------- */
.pm-text-gradient {
  color: rgb(var(--pm-app-accent));
  background: linear-gradient(
    135deg,
    rgb(var(--pm-app-accent)),
    rgb(var(--pm-app-accent-alt))
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

@supports not (-webkit-background-clip: text) {
  .pm-text-gradient {
    background: none;
    color: rgb(var(--pm-app-accent));
  }
}