/**
 * Studio 360 — Design tokens (CSS custom properties)
 * Midnight & Gold — 2025/2026 premium: glass, depth, fluid type.
 */

:root {
  /* Core palette */
  --s360-navy: #121721;
  --s360-navy-light: #1a2233;
  --s360-navy-mid: #243044;
  --s360-gold: #d4af37;
  --s360-gold-hover: #e5c04a;
  --s360-gold-muted: rgba(212, 175, 55, 0.15);
  --s360-plum: #4b2c5e;
  --s360-plum-light: #5e3a75;
  --s360-white: #f5f5f5;
  --s360-white-muted: rgba(245, 245, 245, 0.72);
  --s360-success: #3dd68c;
  --s360-danger: #f07167;

  /* Surfaces */
  --s360-bg: var(--s360-navy);
  --s360-surface: var(--s360-navy-light);
  --s360-border: var(--s360-navy-mid);
  --s360-overlay: rgba(18, 23, 33, 0.88);

  /* Glass */
  --s360-glass: rgba(26, 34, 51, 0.55);
  --s360-glass-strong: rgba(26, 34, 51, 0.72);
  --s360-glass-border: rgba(245, 245, 245, 0.08);
  --s360-glass-highlight: rgba(245, 245, 245, 0.06);
  --s360-glass-blur: 20px;

  /* Gradients */
  --s360-gradient-gold: linear-gradient(135deg, #d4af37 0%, #f4d03f 48%, #c9a227 100%);
  --s360-gradient-gold-shine: linear-gradient(
    110deg,
    transparent 0%,
    rgba(255, 255, 255, 0.35) 45%,
    rgba(255, 255, 255, 0.1) 50%,
    transparent 55%
  );
  --s360-gradient-hero: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(212, 175, 55, 0.14) 0%, transparent 70%);
  --s360-gradient-spot-a: radial-gradient(ellipse 60% 40% at 15% 20%, rgba(212, 175, 55, 0.08) 0%, transparent 55%);
  --s360-gradient-spot-b: radial-gradient(ellipse 50% 45% at 85% 60%, rgba(75, 44, 94, 0.12) 0%, transparent 50%);
  --s360-gradient-card: linear-gradient(155deg, rgba(26, 34, 51, 0.95) 0%, rgba(18, 23, 33, 0.98) 55%, #121821 100%);

  /* Typography — fluid scale */
  --s360-step--1: clamp(0.8125rem, 0.78rem + 0.15vw, 0.875rem);
  --s360-step-0: clamp(0.9375rem, 0.88rem + 0.25vw, 1.0625rem);
  --s360-step-1: clamp(1.0625rem, 0.95rem + 0.45vw, 1.1875rem);
  --s360-step-2: clamp(1.25rem, 1.05rem + 0.85vw, 1.5rem);
  --s360-step-3: clamp(1.5rem, 1.15rem + 1.25vw, 2rem);
  --s360-step-4: clamp(1.875rem, 1.2rem + 2.5vw, 2.75rem);
  --s360-step-5: clamp(2.25rem, 1.1rem + 4vw, 3.5rem);

  --s360-font-heading: "Montserrat", system-ui, sans-serif;
  --s360-font-body: "Inter", system-ui, sans-serif;
  --s360-font-handwriting: "Caveat", cursive;

  /* Spacing & layout */
  --s360-radius: 12px;
  --s360-radius-sm: 8px;
  --s360-radius-lg: 16px;
  --s360-radius-xl: 24px;
  --s360-container: min(1320px, 100% - 2rem);
  --s360-header-height: 96px;

  /* Breakpoints (reference — use in media queries) */
  --s360-bp-sm: 640px;
  --s360-bp-md: 768px;
  --s360-bp-lg: 1024px;
  --s360-bp-xl: 1280px;

  /* Layered shadows */
  --s360-shadow-ambient: 0 2px 8px rgba(0, 0, 0, 0.12);
  --s360-shadow-card:
    var(--s360-shadow-ambient),
    0 12px 40px rgba(0, 0, 0, 0.28),
    0 0 0 1px rgba(255, 255, 255, 0.04) inset;
  --s360-shadow-elevated:
    0 4px 12px rgba(0, 0, 0, 0.15),
    0 24px 48px rgba(0, 0, 0, 0.35),
    0 0 0 1px rgba(255, 255, 255, 0.05) inset;
  --s360-glow-gold:
    0 0 0 1px rgba(212, 175, 55, 0.28),
    0 0 32px rgba(212, 175, 55, 0.14),
    0 0 60px rgba(212, 175, 55, 0.08);
  --s360-glow-keyhole: 0 0 20px rgba(244, 208, 63, 0.55), 0 0 48px rgba(212, 175, 55, 0.25);

  /* Noise (subtle grain) */
  --s360-noise: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");

  /* Motion */
  --s360-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --s360-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --s360-duration: 0.25s;
  --s360-duration-slow: 0.5s;
  --s360-stagger-base: 60ms;
}