/* ─────────────────────────────────────────────────────────────
   Zabriskie Design System — Colors & Type
   The Waveform Aesthetic: warm, luminous, analog-psychedelic
   Inspired by Antonioni's Zabriskie Point (1970)
───────────────────────────────────────────────────────────── */

/* Webfonts (Google Fonts substitutes — see README "Font Substitutions") */
@import url('https://fonts.googleapis.com/css2?family=Jost:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600;700&family=Instrument+Serif:ital@0;1&display=swap');

:root {
  /* ── Surfaces (warm parchment, never pure white) ── */
  --bg-primary:        #F0EDE4;  /* canvas — desert-paper */
  --bg-surface:        #F5F2EB;  /* cards, elevated */
  --bg-surface-hover:  #EBE7DD;
  --bg-surface-subtle: #F9FAFB;
  --bg-white:          #FEFDFB;  /* the closest we get to white */

  /* ── Text (warm charcoal, never pure black) ── */
  --text-primary:      #2A2A3A;
  --text-secondary:    #6B6B7B;
  --text-tertiary:     #9A9AAA;
  --text-muted:        #B5B5C3;

  /* ── Borders ── */
  --border-color:         rgba(42, 42, 58, 0.12);
  --border-color-subtle:  rgba(42, 42, 58, 0.06);
  --border-color-hover:   rgba(42, 42, 58, 0.20);

  /* ── Accent palette (drawn from the logo's concentric rings) ── */
  --accent-pink:       #E83A73;  /* outer ring — albums, primary */
  --accent-soft-pink:  #E87DA0;  /* hover tint, transition ring */
  --accent-amber:      #F2A83B;  /* marigold — books, badges, ratings */
  --accent-cyan:       #3AC4E8;  /* pool blue — shows, links */
  --accent-deep-blue:  #2A5FAA;  /* cobalt — films, depth */
  --accent-yellow:     #FACC15;  /* star ratings */

  /* ── Media-type semantic ── */
  --color-album:  var(--accent-pink);
  --color-film:   var(--accent-deep-blue);
  --color-book:   var(--accent-amber);
  --color-show:   var(--accent-cyan);

  /* ── Status ── */
  --success:    #059669;
  --success-bg: #D1FAE5;
  --error:      #DC2626;
  --error-bg:   #FEE2E2;
  --warning:    #92400E;
  --warning-bg: #FEF3C7;
  --live:       #EF4444;  /* live-show pulse red */

  /* ── Gradients (soft, warm, never harsh) ── */
  --gradient-warm-glow:  radial-gradient(ellipse at center, rgba(232,58,115,.12) 0%, rgba(242,168,59,.06) 50%, transparent 80%);
  --gradient-surface:    linear-gradient(180deg, var(--bg-surface) 0%, var(--bg-primary) 100%);
  --gradient-pink-amber: linear-gradient(135deg, var(--accent-pink) 0%, var(--accent-amber) 100%);
  --gradient-cyan-blue:  linear-gradient(135deg, var(--accent-cyan) 0%, var(--accent-deep-blue) 100%);
  --gradient-sunset:     linear-gradient(135deg, var(--accent-amber) 0%, var(--accent-pink) 50%, var(--accent-deep-blue) 100%);
  --gradient-logo:       conic-gradient(from 90deg at 50% 50%, #E83A73, #F2A83B, #FACC15, #3AC4E8, #2A5FAA, #E87DA0, #E83A73);

  /* ── Typography families ── */
  --font-display: 'Jost', 'Futura', 'Avenir Next', sans-serif;
  --font-body:    'Inter', 'Helvetica Neue', sans-serif;
  --font-serif:   'Instrument Serif', 'Cormorant Garamond', Georgia, serif;

  /* ── Tracking ── */
  --letter-spacing-display: 0.12em;
  --letter-spacing-display-tight: 0.04em;
  --letter-spacing-body:    0.01em;

  /* ── Type scale ── */
  --font-size-xs:   11px;
  --font-size-sm:   13px;
  --font-size-base: 15px;
  --font-size-lg:   18px;
  --font-size-xl:   24px;
  --font-size-2xl:  32px;
  --font-size-3xl:  48px;
  --font-size-4xl:  64px;

  /* ── Spacing (4px grid) ── */
  --spacing-xs:  4px;
  --spacing-sm:  8px;
  --spacing-md:  12px;
  --spacing-lg:  16px;
  --spacing-xl:  24px;
  --spacing-2xl: 32px;
  --spacing-3xl: 48px;
  --spacing-4xl: 64px;

  /* ── Radius (generous; circles favored) ── */
  --radius-sm:   8px;
  --radius-md:   16px;
  --radius-lg:   24px;
  --radius-xl:   32px;
  --radius-full: 9999px;

  /* ── Shadows (warm-tinted, never hard black) ── */
  --shadow-sm:           0 2px 8px  rgba(42, 42, 58, 0.06);
  --shadow-md:           0 4px 16px rgba(42, 42, 58, 0.08);
  --shadow-lg:           0 8px 32px rgba(42, 42, 58, 0.12);
  --shadow-colored-pink: 0 8px 24px rgba(232, 58, 115, 0.18);
  --shadow-colored-cyan: 0 8px 24px rgba(58, 196, 232, 0.18);
  --shadow-colored-amber:0 8px 24px rgba(242, 168, 59, 0.18);
  --shadow-colored-blue: 0 8px 24px rgba(42, 95, 170, 0.18);

  /* ── Transitions (cinematic, unhurried) ── */
  --transition-fast: all 0.20s ease-in-out;
  --transition:      all 0.35s ease-in-out;
  --transition-slow: all 0.50s ease-in-out;

  /* ── Image treatment (vintage / analog warmth) ── */
  --img-filter: saturate(0.92) sepia(0.04) contrast(1.02);
}

/* ── Dark mode (deep desert night, not stark black) ── */
[data-theme="dark"] {
  --bg-primary:       #1A1A28;
  --bg-surface:       #20202E;
  --bg-surface-hover: #28283A;
  --bg-white:         #20202E;
  --text-primary:     #F0EDE4;
  --text-secondary:   #B8B8C8;
  --text-tertiary:    #9090A4;
  --text-muted:       #6B6B82;
  --border-color:     rgba(240, 237, 228, 0.12);
  --shadow-sm: 0 2px 8px rgba(0,0,0,.30);
  --shadow-md: 0 4px 16px rgba(0,0,0,.40);
  --shadow-lg: 0 8px 32px rgba(0,0,0,.50);
}

/* ─── Semantic typography roles ──────────────────────────── */
.zk-h1, h1.zk {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--font-size-3xl);
  letter-spacing: var(--letter-spacing-display);
  line-height: 1.1;
  color: var(--text-primary);
}
.zk-h2, h2.zk {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--font-size-2xl);
  letter-spacing: var(--letter-spacing-display);
  line-height: 1.2;
  color: var(--text-primary);
}
.zk-h3, h3.zk {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--font-size-xl);
  letter-spacing: var(--letter-spacing-display-tight);
  color: var(--text-primary);
}
.zk-eyebrow {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--text-secondary);
}
.zk-title-serif {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--font-size-2xl);
  font-style: italic;
  letter-spacing: 0;
  line-height: 1.15;
  color: var(--text-primary);
}
.zk-body {
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  line-height: 1.6;
  letter-spacing: var(--letter-spacing-body);
  color: var(--text-primary);
}
.zk-meta {
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}
.zk-caption {
  font-family: var(--font-display);
  font-size: var(--font-size-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.zk-credit {
  /* old-cinema credit style */
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--font-size-sm);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-secondary);
}