/* ============================================================
   QUIZORIA — Design tokens
   Original visual identity: "midnight arena" — deep indigo stage,
   violet rim light, champagne-gold prestige accents.
   All sizing is TV-first: type scales with the viewport so the UI
   is legible from 3 metres on a 1080p / 4K panel.
   ============================================================ */
:root {
  /* ---- Brand palette ---- */
  --c-void:        #04050c;
  --c-abyss:       #070a18;
  --c-midnight:    #0b1030;
  --c-indigo:      #131a4d;
  --c-indigo-lit:  #1d2a78;
  --c-violet:      #4b2fa8;
  --c-violet-lit:  #7a4fe0;
  --c-cyan:        #35d0ff;

  --c-gold:        #f3c860;
  --c-gold-deep:   #b8862a;
  --c-gold-pale:   #ffeab5;

  --c-success:     #2fe08a;
  --c-success-deep:#0e7a4a;
  --c-danger:      #ff4d5e;
  --c-danger-deep: #8c1226;

  --c-text:        #f4f6ff;
  --c-text-dim:    #a7b0d8;
  --c-text-faint:  #6d76a3;

  /* ---- Surfaces ---- */
  --surface-1: linear-gradient(160deg, rgba(23,32,86,.72), rgba(8,11,30,.86));
  --surface-2: linear-gradient(160deg, rgba(35,47,124,.62), rgba(10,14,38,.9));
  --surface-glass: rgba(10,14,38,.55);
  --hairline: rgba(150,170,255,.16);
  --hairline-strong: rgba(180,196,255,.32);

  /* ---- Gold treatments ---- */
  --gold-line: linear-gradient(90deg, transparent, var(--c-gold), transparent);
  --gold-fill: linear-gradient(135deg, #fff2cf 0%, var(--c-gold) 38%, var(--c-gold-deep) 72%, #fbe4a8 100%);
  --gold-text: linear-gradient(180deg, #fff6dd 0%, var(--c-gold) 52%, #c69434 100%);

  /* ---- Glow ---- */
  --glow-gold:    0 0 2.2rem rgba(243,200,96,.42);
  --glow-violet:  0 0 3rem rgba(122,79,224,.45);
  --glow-cyan:    0 0 2.4rem rgba(53,208,255,.38);
  --glow-success: 0 0 3.4rem rgba(47,224,138,.55);
  --glow-danger:  0 0 3.4rem rgba(255,77,94,.5);

  /* ---- Typography ---- */
  --font-ui: 'Outfit', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --font-ar: 'Cairo', 'Segoe UI', 'Tahoma', sans-serif;
  --font-display: 'Outfit', 'Segoe UI', sans-serif;

  /* Fluid TV scale: one unit derived from the viewport diagonal.
     At 1920x1080 this resolves to ~17px, which puts answer text near 26px and
     question text near 35px - the floor for comfortable reading at 3 metres. */
  --u: clamp(12px, calc(0.56vw + 0.60vh), 32px);

  --fs-mega:   calc(var(--u) * 5.4);
  --fs-title:  calc(var(--u) * 3.2);
  --fs-h1:     calc(var(--u) * 2.4);
  --fs-h2:     calc(var(--u) * 1.8);
  --fs-lead:   calc(var(--u) * 1.45);
  --fs-body:   calc(var(--u) * 1.15);
  --fs-small:  calc(var(--u) * 0.95);
  --fs-micro:  calc(var(--u) * 0.8);

  /* ---- Spacing ---- */
  --sp-1: calc(var(--u) * 0.4);
  --sp-2: calc(var(--u) * 0.8);
  --sp-3: calc(var(--u) * 1.2);
  --sp-4: calc(var(--u) * 1.8);
  --sp-5: calc(var(--u) * 2.6);
  --sp-6: calc(var(--u) * 3.6);

  /* ---- TV safe area (action-safe ~5%) ---- */
  --safe-x: 5vw;
  --safe-y: 5vh;

  /* ---- Shape ---- */
  --r-sm: calc(var(--u) * 0.5);
  --r-md: calc(var(--u) * 0.9);
  --r-lg: calc(var(--u) * 1.4);
  --r-pill: 999px;

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(.16,.84,.34,1);
  --ease-in-out: cubic-bezier(.65,.05,.36,1);
  --ease-pop: cubic-bezier(.2,1.5,.4,1);
  --t-fast: 140ms;
  --t-base: 260ms;
  --t-slow: 620ms;
  --t-cine: 1100ms;

  --z-stage: 0;
  --z-app: 10;
  --z-overlay: 60;
  --z-flash: 90;
}

/* Arabic gets its own face + slightly larger optical size */
:root[dir='rtl'] {
  --font-ui: 'Cairo', 'Segoe UI', Tahoma, sans-serif;
  --font-display: 'Cairo', 'Segoe UI', Tahoma, sans-serif;
}

/* Respect users / TVs that ask for less motion */
@media (prefers-reduced-motion: reduce) {
  :root { --t-slow: 1ms; --t-cine: 1ms; }
}