/* ============================================================
   Merk Arts — design tokens (the foundation)
   :root defaults render the CINEMA theme. theme-studio.css and
   theme-minimal.css override these custom properties (and add
   layout-level overrides) so the SAME markup becomes a different
   direction. Brand tokens (--brand*) are constant across themes.
   ============================================================ */
:root {
  /* Brand — constant across all themes */
  --brand:        #C0272D;
  --brand-bright: #E23B41;
  --brand-deep:   #7D1418;

  /* Surfaces (theme-driven; defaults = Cinema dark) */
  --bg:        #0B0B0E;
  --bg-elev:   #141418;
  --surface:   #16161B;
  --surface-2: #1F1F26;
  --scrim:     rgba(8,8,11,.72);

  /* Text */
  --text:      #EDEAE4;
  --text-dim:  #B7B3AD;
  --text-mute: #8B8883;
  --on-brand:  #FFFFFF;

  /* Lines */
  --line:        rgba(255,255,255,.10);
  --line-strong: rgba(255,255,255,.20);

  /* Accent (theme-driven; Cinema = warm gold) */
  --accent:    #E7B24C;
  --accent-2:  #E7B24C;
  --on-accent: #1A1205;

  /* Semantic status colors (defaults tuned for the dark Cinema base;
     themes may override for their own surfaces). Each ships an
     `on-*` companion for readable text/icons on the solid color. */
  --ok:       #4FB477;   --on-ok:   #06150C;
  --warn:     #E7B24C;   --on-warn: #1A1205;
  --err:      #E2585D;   --on-err:  #1A0708;

  /* Spacing scale — 4px base. Use for rhythm across components/themes. */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  32px;
  --space-8:  40px;
  --space-9:  56px;
  --space-10: 72px;

  /* Elevation scale (semantic aliases over the raw shadows below) */
  --elev-1: var(--shadow-1);
  --elev-2: var(--shadow-2);

  /* Shape */
  --radius:    14px;
  --radius-sm: 9px;
  --radius-lg: 22px;
  --pill:      999px;
  --card-radius: var(--radius);

  /* Elevation */
  --shadow-1: 0 12px 30px -16px rgba(0,0,0,.70);
  --shadow-2: 0 28px 70px -30px rgba(0,0,0,.90);
  --shadow-card: var(--shadow-1);

  /* Layout */
  --maxw:  1240px;
  --gut:   clamp(16px, 4vw, 44px);
  --nav-h: 70px;
  --hero-min: 80vh;

  /* Type — Cinema defaults */
  --font-display: 'Anton', sans-serif;
  --font-body:    'Zen Kaku Gothic New', system-ui, sans-serif;
  --font-accent:  'Shippori Mincho', serif;
  --display-weight: 400;
  --display-tracking: .01em;
  --display-transform: none;
  --display-leading: .96;

  /* Motion */
  --ease: cubic-bezier(.2,.7,.2,1);
  --ease-spring: cubic-bezier(.18,.86,.28,1.06);
  --dur: .5s;

  /* Atmosphere */
  --grain-opacity: .05;
  --hero-overlay: linear-gradient(180deg, transparent 30%, rgba(8,8,11,.55) 70%, var(--bg) 100%);
  --hero-side-overlay: linear-gradient(90deg, var(--bg) 8%, rgba(11,11,14,.55) 42%, transparent 78%);

  color-scheme: dark;
}

/* ---- Reveal / motion plumbing (app.js toggles these classes) ---- */
[data-reveal]{ opacity:0; transform:translateY(22px); transition:opacity .65s var(--ease), transform .65s var(--ease); }
[data-reveal].in-view{ opacity:1; transform:none; }
.all-visible [data-reveal]{ opacity:1 !important; transform:none !important; }
.no-anim *, .no-anim *::before, .no-anim *::after{ animation-duration:.001s !important; transition-duration:.001s !important; }

@media (prefers-reduced-motion: reduce){
  [data-reveal]{ opacity:1; transform:none; transition:none; }
  *{ animation:none !important; }
  html{ scroll-behavior:auto; }
}