/* ============================================================================
   NovexPlay — token reskin ("the new UI/UX")
   ----------------------------------------------------------------------------
   This file ONLY overrides design-token *values*. It touches no layout, no
   components, no JS. The v129 UI (np-dock, genre pills, scroll/mobile work)
   reads these same var() names, so every surface re-skins with zero structural
   risk. Loaded AFTER app.css, so equal-specificity :root wins.

   Fully reversible: remove the <link> to this file and the app reverts to v129.

   System: OKLCH neutral ramp on a cool blue-grey hue (250), violet accent
   (matches Atmosphere neon #7A4FE0), a proper semantic set (ok/warn/danger),
   and Noto multi-script body type so Hindi/Bengali/Tamil titles render cleanly.
   ========================================================================== */

:root{
  /* Neutral ramp — cool off-white surfaces (hue 250) */
  --bg:oklch(1 0 0);                    /* raised / cards            */
  --bg2:oklch(0.985 0.003 250);         /* page / panels             */
  --bg3:oklch(0.955 0.004 250);         /* sunken / inputs           */
  --bg4:oklch(0.920 0.006 250);         /* deepest well              */

  /* Borders — kept as alpha so they still layer over glass & artwork */
  --bd:oklch(0.45 0.02 250 / 0.10);
  --bd2:oklch(0.45 0.02 250 / 0.18);

  /* Text */
  --t1:oklch(0.22 0.010 250);           /* primary                   */
  --t2:oklch(0.48 0.012 250);           /* dim                       */
  --t3:oklch(0.60 0.010 250);           /* faint                     */

  /* Accent — Atmosphere violet (was teal #2B7FA3) */
  --acc:oklch(0.55 0.18 293);
  --acc2:oklch(0.46 0.16 293);
  --acc3:oklch(0.55 0.18 293 / 0.12);

  /* Semantic set — success stays green; chrome no longer uses it */
  --green:oklch(0.55 0.13 155); --green2:oklch(0.55 0.13 155 / 0.10);
  --red:oklch(0.55 0.16 25);    --red2:oklch(0.55 0.16 25 / 0.08);

  --sage-bd:oklch(0.55 0.18 293 / 0.30);
  --glass-edge:oklch(0.55 0.18 293 / 0.30);
  --select-edge:oklch(0.55 0.18 293 / 0.55);

  /* Multi-script type. Display keeps Archivo for characterful Latin headings,
     with Noto fallbacks so non-Latin headings stay consistent; body/UI is Noto
     Sans across scripts. */
  --font-display:'Archivo','Noto Sans','Noto Sans Devanagari','Noto Sans Bengali','Noto Sans Tamil',system-ui,sans-serif;
  --font-body:'Noto Sans','Noto Sans Devanagari','Noto Sans Bengali','Noto Sans Tamil',-apple-system,'Segoe UI',Roboto,sans-serif;
  --sans:'Noto Sans','Noto Sans Devanagari','Noto Sans Bengali','Noto Sans Tamil',-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-mono:'Noto Sans Mono',ui-monospace,'Space Mono',monospace;

  /* Page atmosphere — violet glows on the brand accent */
  --app-atmosphere:
    radial-gradient(1200px 600px at 8% -10%, oklch(0.55 0.18 293 / 0.14), transparent 55%),
    radial-gradient(900px 500px at 92% 8%, oklch(0.62 0.12 300 / 0.10), transparent 50%),
    radial-gradient(800px 480px at 50% 110%, oklch(0.55 0.18 293 / 0.07), transparent 45%),
    linear-gradient(180deg, oklch(0.985 0.004 250) 0%, oklch(0.965 0.006 250) 45%, oklch(0.950 0.008 250) 100%);
}

html[data-theme="dark"]{
  --bg:oklch(0.170 0.008 250);
  --bg2:oklch(0.210 0.009 250);
  --bg3:oklch(0.250 0.009 250);
  --bg4:oklch(0.300 0.010 250);

  --bd:oklch(0.85 0.02 250 / 0.10);
  --bd2:oklch(0.85 0.02 250 / 0.16);

  --t1:oklch(0.93 0.005 250);
  --t2:oklch(0.72 0.010 250);
  --t3:oklch(0.58 0.010 250);

  --acc:oklch(0.72 0.14 293);
  --acc2:oklch(0.78 0.12 293);
  --acc3:oklch(0.72 0.14 293 / 0.16);

  --green:oklch(0.72 0.13 155); --green2:oklch(0.72 0.13 155 / 0.12);
  --red:oklch(0.68 0.16 25);    --red2:oklch(0.68 0.16 25 / 0.12);

  /* Keep selection/glass edges pure violet — never mix hue-250 neutrals in */
  --sage-bd:oklch(0.72 0.14 293 / 0.34);
  --glass-edge:oklch(0.72 0.14 293 / 0.34);
  --select-edge:oklch(0.72 0.14 293 / 0.58);

  --app-atmosphere:
    radial-gradient(1100px 580px at 6% -12%, oklch(0.72 0.14 293 / 0.22), transparent 55%),
    radial-gradient(900px 520px at 94% 6%, oklch(0.55 0.16 300 / 0.14), transparent 50%),
    radial-gradient(820px 500px at 50% 112%, oklch(0.72 0.14 293 / 0.10), transparent 45%),
    linear-gradient(180deg, oklch(0.170 0.008 250) 0%, oklch(0.150 0.007 250) 55%, oklch(0.135 0.006 250) 100%);
}