/* ============================================================
   IMMERSIVE SKIN — CSS Variables
   Light Editorial Premium Photography Skin
   Uses body[data-skin] for higher specificity over inline :root
   ============================================================ */

body[data-skin="immersive"] {
  /* Core palette — warm off-white editorial */
  --c-bg: #faf9f7;
  --c-surface: #ffffff;
  --c-surface-hover: #f5f4f2;
  --c-text: #1c1917;
  --c-text-muted: #78716c;
  --c-text-dim: #a8a29e;
  --c-primary: #292524;
  --c-primary-hover: #1c1917;
  --c-accent: #c2703e;
  --c-accent-hover: #a85d32;
  --c-accent-soft: rgba(194,112,62,0.08);
  --c-danger: #dc2626;
  --c-success: #16a34a;
  --c-border: #e7e5e4;
  --c-border-strong: #d6d3d1;
  --c-input-bg: #faf9f7;

  /* Typography */
  --font-display: 'Sora', 'Heebo', system-ui, sans-serif;
  --font-main: 'Space Grotesk', 'Heebo', system-ui, sans-serif;

  /* Shadows — warm, refined */
  --shadow-xs: 0 1px 2px rgba(28,25,23,0.03);
  --shadow-sm: 0 1px 3px rgba(28,25,23,0.05), 0 1px 2px rgba(28,25,23,0.03);
  --shadow-md: 0 4px 12px rgba(28,25,23,0.06), 0 2px 4px rgba(28,25,23,0.03);
  --shadow-lg: 0 12px 32px rgba(28,25,23,0.08), 0 4px 8px rgba(28,25,23,0.03);
  --shadow-xl: 0 20px 50px rgba(28,25,23,0.1), 0 8px 16px rgba(28,25,23,0.04);
  --shadow-photo: 0 20px 60px -10px rgba(28,25,23,0.25), 0 8px 24px -4px rgba(28,25,23,0.12);

  /* Geometry */
  --radius-xs: 0.25rem;
  --radius-sm: 0.375rem;
  --radius-md: 0.625rem;
  --radius-lg: 0.875rem;
  --radius-xl: 1.25rem;
  --radius-pill: 100px;
  --header-h: 72px;
  --max-w: 1360px;

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast: 0.15s;
  --duration-normal: 0.25s;
  --duration-slow: 0.45s;

  /* Dark hero (selective use only) */
  --hero-bg: #1c1917;
  --hero-text: #faf9f7;
  --hero-muted: rgba(250,249,247,0.55);
}