/**
 * Otto Björkland Portfolio Engine v3 — Arctic Design Tokens
 * Industrial Design Engineering Aesthetic
 */

:root {
  /* Arctic Cold & Warmth Palette */
  --bg-arctic: #f2f5f9;
  --bg-surface: #ffffff;
  --bg-panel-frosted: rgba(255, 255, 255, 0.48);
  --bg-card-subtle: rgba(234, 241, 248, 0.65);

  /* Warm Virtual Light Source (Spotlight & Ember) */
  --ember-primary: #ff4d15;
  --ember-glow: rgba(255, 77, 21, 0.45);
  --amber-warmth: #ff9838;
  --sunbeam-glow: rgba(255, 152, 56, 0.32);
  --thermal-spotlight: rgba(255, 130, 45, 0.18);

  /* High-Contrast Technical Typography */
  --text-main: #0b1320;
  --text-muted: #52637a;
  --text-faint: #8a9bb2;
  --border-glass: rgba(255, 255, 255, 0.85);
  --border-specular: rgba(255, 255, 255, 0.95);
  --border-subtle: rgba(11, 19, 32, 0.08);

  /* Unified Frost Material v2 — one recipe for every glass surface.
     Frost crystals + warm glow are layered on top by js/fx/frost-material.js. */
  --glass-fill: linear-gradient(158deg,
      rgba(255, 255, 255, 0.90) 0%,
      rgba(246, 250, 255, 0.78) 48%,
      rgba(236, 244, 252, 0.84) 100%);
  --glass-border: 1px solid rgba(255, 255, 255, 0.92);
  --glass-rim:
      inset 0 1px 0 rgba(255, 255, 255, 1),
      inset 0 0 0 1px rgba(255, 255, 255, 0.45),
      inset 0 -1px 1.5px rgba(140, 170, 205, 0.22);
  --glass-shadow:
      0 22px 44px -18px rgba(11, 19, 32, 0.24),
      0 5px 12px -5px rgba(11, 19, 32, 0.10);
  --glass-shadow-sm:
      0 8px 18px -8px rgba(11, 19, 32, 0.18),
      0 2px 5px -2px rgba(11, 19, 32, 0.06);
  /* Live background blur only on precise-pointer (desktop) devices and only on
     surfaces that don't move; phones get the same look from the fill + frost. */
  --glass-backdrop: none;

  /* Legacy aliases */
  --glass-bg-settled: rgba(255, 255, 255, 0.8);
  --glass-bg-panel: rgba(255, 255, 255, 0.7);
  --glass-blur-radius: 14px;
  --glass-saturate: 160%;

  /* Fonts */
  --font-mono: 'JetBrains Mono', monospace;
  --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Jukebox Stage Metrics (Desktop) */
  --stage-perspective: 1600px;
  --card-w: 400px;
  --card-h: 530px;
  --card-width: 400px;
  --card-height: 530px;
  --card-aspect: 4 / 3;

  /* Mobile Geometry Tokens */
  --header-height: 48px;
  --header-h-mobile: 48px;
  --header-z-index: 4000;
  --panel-margin-mobile: 14px;

  /* Smooth Physics & Easing */
  --ease-out-expo: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --ease-sweep: cubic-bezier(0.4, 0, 0.2, 1);
  --transition-fast: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

@media (max-width: 768px) {
  :root {
    --card-w: 300px;
    --card-h: 440px;
    --card-width: 300px;
    --card-height: 440px;
    --header-h-mobile: 48px;
    --panel-margin-mobile: 14px;
  }
}

@media (hover: hover) and (pointer: fine) {
  :root {
    --glass-backdrop: blur(14px) saturate(160%);
  }
}