/* =====================================================================
   Qapsol Template — Design Tokens
   Single source of truth for color, type, spacing, radius, motion.
   Change a value here and it propagates across the whole template.
   ===================================================================== */

:root {
  /* ---- Color ---- */
  --bg:            #111111;            /* page background                 */
  --bg-deep:       18, 21, 29;         /* rgb() base for scrims/gradients */
  --surface-glass: rgba(0, 0, 0, 0.60);/* search panel / sticky header    */
  --ink:           #f1f1f1;            /* primary text                    */
  --ink-muted:     #dedede;            /* secondary text, nav, borders    */
  --ink-dim:       #999999;            /* inactive carousel dots          */
  --accent:        #e50815;            /* brand red — active/hover/focus  */
  --accent-2:      #216d6b;            /* teal secondary (rare)           */
  --border-faint:  rgba(221, 221, 221, 0.20);
  --border-line:   #dedede;
  --surface:       rgba(255, 255, 255, 0.03); /* raised panel on dark bg     */
  --surface-2:     rgba(255, 255, 255, 0.06); /* hover / nested surface      */

  /* ---- Typography ---- */
  --font-body:     'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display:  'Raleway', var(--font-body);
  --fs-base:       0.9rem;             /* ~14.4px                         */
  --fs-h1:         2rem;
  --fs-subhead:    1.25rem;
  --fs-row-title:  1.3rem;
  --lh-base:       1.5;
  --fw-bold:       700;

  /* ---- Spacing scale ---- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.25rem;
  --sp-6: 1.5rem;
  --sp-12: 3rem;                       /* desktop content gutter          */

  /* ---- Radius ---- */
  --radius-card:   5px;                /* posters, buttons                */
  --radius-panel:  10px;               /* glass search panel              */

  /* ---- Effects ---- */
  --blur:          blur(10px);
  --shadow-panel:  3px 3px 15px rgba(0, 0, 0, 0.4);
  --shadow-sticky: 5px 5px 5px rgba(0, 0, 0, 0.6);

  /* ---- Motion ---- */
  --t-fast:        all ease-in 0.2s;
  --t-base:        all ease-in 0.3s;
  --t-reveal:      all ease-in-out 0.4s;

  /* ---- Layout ---- */
  --header-h:      70px;
  --gutter:        var(--sp-12);

  /* Bootstrap focus-ring override to brand red */
  --bs-focus-ring-color: rgba(229, 8, 21, 0.4);
}