/* PowerSecurity — Full token system
 * Extends colors_and_type.css with radii, spacing, shadows, motion,
 * atmospherics, and a handful of derived utility tokens.
 *
 * For just colors + type (e.g. when embedding in a one-off preview),
 * use ../colors_and_type.css instead.
 */

@import url("colors_and_type.css");

:root {
  /* === Radii === */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-2xl: 28px;
  --r-pill: 999px;

  /* === Spacing scale (px) ===
   * 4-based; skip 28/36 (we use 32 / 40 instead). */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;
  --s-24: 96px;

  /* === Layout === */
  --container: 1240px;
  --container-pad: 24px;
  --section-y: 96px;
  --section-y-sm: 64px;
  --header-h: 68px;

  /* === Motion === */
  --t-fast: 120ms;
  --t-base: 200ms;
  --t-slow: 360ms;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* === Shadows === */
/* All ambient shadows are dark-purple tinted (rgba 10/8/24) so they don't
 * pollute hue in light mode. Glow is accent-tinted and only used on
 * featured surfaces (terminal, hero CTA card). */
:root {
  --shadow-1: 0 1px 2px rgba(10, 8, 24, 0.40),
              0 1px 1px rgba(10, 8, 24, 0.30);

  --shadow-2: 0 6px 18px rgba(10, 8, 24, 0.50),
              0 2px 4px  rgba(10, 8, 24, 0.30);

  --shadow-3: 0 24px 60px rgba(10, 8, 24, 0.60),
              0 8px 18px  rgba(10, 8, 24, 0.40);

  --shadow-glow:
      0 0 0 1px color-mix(in oklch, var(--accent) 30%, transparent),
      0 12px 40px color-mix(in oklch, var(--accent) 22%, transparent);
}

/* In light mode the same purple-tint reads as too heavy — soften. */
:root[data-theme="light"] {
  --shadow-1: 0 1px 2px rgba(20, 14, 50, 0.08),
              0 1px 1px rgba(20, 14, 50, 0.05);

  --shadow-2: 0 6px 18px rgba(20, 14, 50, 0.10),
              0 2px 4px  rgba(20, 14, 50, 0.06);

  --shadow-3: 0 24px 60px rgba(20, 14, 50, 0.16),
              0 8px 18px  rgba(20, 14, 50, 0.10);
}

/* === Atmospherics ===
 * Two stacked layers used on hero, sub-hero, and footer base.
 * Drop `.atmos-grid` and/or `.atmos-glow` as siblings inside a positioned
 * container — both are absolute, fully-bleed, pointer-events:none. */

.atmos-grid {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(oklch(1 0 0 / 0.04) 1px, transparent 1px),
    linear-gradient(90deg, oklch(1 0 0 / 0.04) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 60% 60% at 50% 30%, #000 30%, transparent 80%);
}

:root[data-theme="light"] .atmos-grid {
  background-image:
    linear-gradient(oklch(0.20 0.04 270 / 0.06) 1px, transparent 1px),
    linear-gradient(90deg, oklch(0.20 0.04 270 / 0.06) 1px, transparent 1px);
}

.atmos-glow {
  position: absolute; inset: 0; pointer-events: none; overflow: hidden;
  background:
    radial-gradient(ellipse 60% 70% at 22% 18%,
      color-mix(in oklch, var(--glow-1) 70%, transparent),
      color-mix(in oklch, var(--glow-1) 22%, transparent) 38%,
      transparent 72%),
    radial-gradient(ellipse 55% 65% at 78% 36%,
      color-mix(in oklch, var(--glow-2) 60%, transparent),
      color-mix(in oklch, var(--glow-2) 16%, transparent) 42%,
      transparent 74%),
    radial-gradient(ellipse 70% 60% at 50% 92%,
      color-mix(in oklch, var(--glow-3) 60%, transparent),
      color-mix(in oklch, var(--glow-3) 14%, transparent) 40%,
      transparent 72%);
  filter: blur(60px);
}

:root[data-theme="light"] .atmos-glow { mix-blend-mode: multiply; opacity: 0.85; }

/* === Reveal animation === */
@media (prefers-reduced-motion: no-preference) {
  .rise   { animation: ps-rise 600ms var(--ease) both; }
  .rise-1 { animation-delay:  60ms; }
  .rise-2 { animation-delay: 120ms; }
  .rise-3 { animation-delay: 180ms; }
  .rise-4 { animation-delay: 240ms; }
  .rise-5 { animation-delay: 300ms; }
}
@keyframes ps-rise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}