/* =============================================================================
   mehditmimi.com — site alignment for the two playgrounds
   -----------------------------------------------------------------------------
   The playgrounds are full IDEs, so they keep their app chrome; what they should
   not keep is a different brand. Both shipped Tailwind-slate neutrals instead of
   the site's black/white ramp, and the Node playground used a blue (#3b82f6) and
   amber brand accent that appears nowhere on mehditmimi.com.

   This only remaps brand + neutral tokens. Semantic colours (success / warning /
   danger) are deliberately left alone — they carry meaning, not identity.

   Load AFTER the playground's own styles.css.
   ========================================================================== */

/* ---- light ------------------------------------------------------------- *
   `:root:not([data-theme])`, NOT a bare `:root`. A bare `:root` is specificity
   (0,1,0) — identical to the `[data-theme="dracula"]` blocks in each playground's
   own styles.css — and this file is linked SECOND, so it won every tie. The
   result: 24 of the web playground's 26 themes and 16 of the Node playground's 18
   set their variables and were immediately overwritten back to the light ramp.
   Measured before this change: 26 themes produced 2 distinct renderings.

   Scoping the default to "no data-theme attribute at all" makes it apply only
   when nothing has been chosen, and stops it outranking a chosen theme. Light and
   dark keep their explicit blocks below and are unaffected. */
:root:not([data-theme]),
:root[data-theme="light"] {
  /* neutrals → site ramp */
  --bg-primary: #ffffff;
  --bg-secondary: #f5f5f5;
  --bg-tertiary: #ebebeb;
  --bg-elevated: #ffffff;
  --bg-sidebar: #f5f5f5;
  --bg-editor: #ffffff;
  --bg-terminal: #ffffff;
  --bg-hover: #f0f0f0;
  --bg-active: rgba(99, 102, 241, .12);
  --border-color: rgba(0, 0, 0, .08);

  --text-primary: #0a0a0a;
  --text-secondary: #4a4a4a;
  --text-tertiary: #737373;
  --color-text-primary: #0a0a0a;
  --color-text-secondary: #4a4a4a;
  --color-text-tertiary: #737373;

  /* brand → the site's indigo/purple/pink */
  --accent-primary: #6366f1;
  --accent-secondary: #8b5cf6;
  --accent-gradient: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #ec4899 100%);
  --color-primary: #6366f1;
  --color-primary-hover: #8b5cf6;
  --color-accent: #8b5cf6;

  --bg-navbar: linear-gradient(135deg, #ffffff 0%, #f5f5f5 100%);
  --bg-loading: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #ec4899 100%);
  --bg-footer: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #ec4899 100%);
}

/* ---- dark -------------------------------------------------------------- */
:root[data-theme="dark"] {
  --bg-primary: #0a0a0a;
  --bg-secondary: #131313;
  --bg-tertiary: #1a1a1a;
  --bg-elevated: #131313;
  --bg-sidebar: #131313;
  --bg-editor: #0a0a0a;
  --bg-terminal: #0a0a0a;
  --bg-hover: #1f1f1f;
  --bg-active: rgba(139, 92, 246, .22);
  --border-color: rgba(255, 255, 255, .1);

  --text-primary: #f5f5f5;
  --text-secondary: #b8b8b8;
  --text-tertiary: #888888;
  --color-text-primary: #f5f5f5;
  --color-text-secondary: #b8b8b8;
  --color-text-tertiary: #888888;

  /* These tokens are used as button FILLS as well as for text, so they keep the
     site's true accent rather than a lightened tint — a pale fill under white
     label text (the Export button) failed contrast badly. */
  --accent-primary: #6366f1;
  --accent-secondary: #8b5cf6;
  --accent-gradient: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #ec4899 100%);
  --color-primary: #6366f1;
  --color-primary-hover: #818cf8;
  --color-accent: #8b5cf6;

  --bg-navbar: linear-gradient(135deg, #131313 0%, #0a0a0a 100%);
  --bg-loading: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #ec4899 100%);
  --bg-footer: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #ec4899 100%);
}