/* Vytal.ONE — PLATFORM theme layer ----------------------------------------
   Scope: the TECHNICAL PLATFORM Vytal.ONE only (dashboards, product UI,
   platform/sales surfaces, module branding). NOT the Vytal corporate brand —
   the corporate brand keeps green as its accent (see colors.css).

   Source: "Vytal.ONE Brand Design" (April 2026). The .ONE palette is a
   minimalist, neutral spectrum — Black / Vhyte / Light Grey only. There is no
   coloured accent at the platform level; colour enters solely through the four
   MODULE colours, and those are used on DARK backgrounds.

   Apply by adding class="vytal-one" (or data-theme) to a root/section.
   Typography is unchanged — keep referencing the master Vytal type system.
   ------------------------------------------------------------------------ */

:root {
  /* ---- Module palette (official Vytal.ONE values) ---- */
  --module-play: #DC5A38;        /* PLAY  — Engagement & Brand Activation */
  --module-track: #8CC9FF;       /* TRACK — Data Intelligence */
  --module-service: #CC99FF;     /* SERVICE — Operations & Logistics */
  --module-ware: #6FC7C0;        /* WARE  — Physical Reusables */
}

/* Platform theme scope — neutral-forward, no green accent. */
.vytal-one {
  /* Surfaces lean on Black + Light Grey; Vhyte for crisp panels */
  --surface-default: var(--vytal-vhyte);
  --surface-soft: var(--vytal-light-grey);   /* Light Grey = backgrounds */
  --surface-strong: var(--vytal-black);
  --surface-card: var(--pure-white);

  /* At platform level the accent role is neutral, not green */
  --brand-accent: var(--vytal-black);
  --text-accent: var(--vytal-black);
  --cta-bg: var(--vytal-black);
  --cta-bg-hover: var(--vytal-black-80);
  --cta-text: var(--vytal-vhyte);
  --border-focus: var(--vytal-black);

  /* Module colours surface as semantic accents inside the platform.
     Default mapping points at the platform/master (neutral); set
     --module-accent per module-scoped section. */
  --module-accent: var(--vytal-vhyte);
}

/* Per-module accent scopes — set on a card/section to colour-code a module.
   Module colour is meant to sit on dark; pair with a dark surface. */
.vytal-one.module-play,    .module-play    { --module-accent: var(--module-play); }
.vytal-one.module-track,   .module-track   { --module-accent: var(--module-track); }
.vytal-one.module-service, .module-service { --module-accent: var(--module-service); }
.vytal-one.module-ware,    .module-ware    { --module-accent: var(--module-ware); }