/* ═══════════════════════════════════════════════════════════
   tokens.css — REGION "Funky Premium" design system
   Full brand palette + theme-aware accents + glossy variables
═══════════════════════════════════════════════════════════ */

:root{
  /* ── Raw brand palette (constant, used for decorative multi-color) ── */
  --c-yellow:#FFEA00;     /* Summer Yellow        */
  --c-cyan:#00E1F3;       /* Day Break Light Blue */
  --c-pink-candy:#FFC0FF; /* Candy Pink           */
  --c-green-kryp:#ABFF5A; /* Kryptonite Green     */
  --c-offwhite:#F9F9F9;   /* Off-white            */
  --c-blue:#5151FC;       /* Electric Blue        */
  --c-pink:#FF6FFF;       /* Futuristic Pink      */
  --c-orange:#FF9800;     /* Nectarine Orange     */
  --c-pine:#00906C;       /* Pine Green           */
  --c-sky:#5100C0;        /* Open Sky Blue        */
  --c-gray:#8F9193;       /* Gray                 */
  --c-red:#FC032D;        /* Loud Red             */
  --c-party:#FF5A00;      /* Party Orange         */
  --c-deep:#085E55;       /* Deep Green           */
  --c-black:#090909;      /* Black                */

  /* ── Funky gradient (works on both themes) ── */
  --grad: linear-gradient(120deg,#FFEA00 0%,#FF9800 18%,#FC032D 34%,#FF6FFF 52%,#5151FC 70%,#00E1F3 86%,#ABFF5A 100%);
  --grad-soft: linear-gradient(120deg,#FF6FFF,#5151FC 50%,#00E1F3);

  /* ── Typography ── */
  --display:'Bricolage Grotesque',sans-serif;
  --serif:'Instrument Serif',serif;
  --mono:'JetBrains Mono',monospace;

  /* ── Layout ── */
  --maxw:1440px;
  --pad:clamp(20px,3vw,48px);

  /* ── Glass / gloss ── */
  --glass-blur:18px;
}

/* ── DARK (default) ─────────────────────────────────────────── */
:root,[data-theme="dark"]{
  --bg:#090909;
  --bg-2:#111116;
  --panel:rgba(14,14,20,.62);
  --ink:#F9F9F9;
  --ink-dim:#8F9193;
  --accent:#FF6FFF;          /* Futuristic Pink — primary */
  --accent-2:#5151FC;        /* Electric Blue  — secondary */
  --line:color-mix(in srgb,var(--accent) 16%,transparent);
  --card-bg:#121218;
  --testimonial-bg:#0f0f14;
  --footer-bg:#0c0c11;
  --shader-opacity:1;
  --glow:color-mix(in srgb,var(--accent) 40%,transparent);
}

/* ── LIGHT ──────────────────────────────────────────────────── */
[data-theme="light"]{
  --bg:#F9F9F9;
  --bg-2:#ECECF2;
  --panel:rgba(255,255,255,.74);
  --ink:#090909;
  --ink-dim:#6B6D72;
  --accent:#5100C0;          /* Open Sky Blue — primary */
  --accent-2:#FC032D;        /* Loud Red — secondary */
  --line:color-mix(in srgb,var(--accent) 22%,transparent);
  --card-bg:#FFFFFF;
  --testimonial-bg:#FFFFFF;
  --footer-bg:#EFEFF4;
  --shader-opacity:.28;
  --glow:color-mix(in srgb,var(--accent) 26%,transparent);
}

/* ═══════════════════════════════════════════════════════════
   Per-section accent overrides → children inherit var(--accent)
   This is the engine of the "funky" multi-color feel.
═══════════════════════════════════════════════════════════ */
[data-theme="dark"] #statement   {--accent:#00E1F3;}
[data-theme="dark"] #about       {--accent:#ABFF5A;}
[data-theme="dark"] #services    {--accent:#5151FC;}
[data-theme="dark"] #stats-sec   {--accent:#FF5A00;}
[data-theme="dark"] #cases       {--accent:#FF6FFF;}
[data-theme="dark"] #work        {--accent:#FFEA00;}
[data-theme="dark"] #process     {--accent:#00906C;}
[data-theme="dark"] #testimonials{--accent:#FF6FFF;}

[data-theme="light"] #statement   {--accent:#00906C;}
[data-theme="light"] #about       {--accent:#085E55;}
[data-theme="light"] #services    {--accent:#5151FC;}
[data-theme="light"] #stats-sec   {--accent:#FF5A00;}
[data-theme="light"] #cases       {--accent:#FC032D;}
[data-theme="light"] #work        {--accent:#FF9800;}
[data-theme="light"] #process     {--accent:#00906C;}
[data-theme="light"] #testimonials{--accent:#5100C0;}

/* keep section borders/glow recomputed from the overridden accent */
#statement,#about,#services,#stats-sec,#cases,#work,#process,#testimonials{
  --line:color-mix(in srgb,var(--accent) 18%,transparent);
  --glow:color-mix(in srgb,var(--accent) 38%,transparent);
}