/* ==========================================================================
   JuiceMyEV — Design tokens
   Single source of truth for colour, type, space, motion.
   Chart surfaces + series colours deliberately match the validated
   reference palette so CVD/contrast results hold. See assets/css/README.
   ========================================================================== */

:root {
  color-scheme: light;

  /* ---- Brand -------------------------------------------------------- */
  --brand-ink:        #0a1628;  /* deep navy — authority base            */
  --brand-ink-2:      #132338;  /* raised navy                           */
  --brand-lime:       #c8f02d;  /* the "juice" accent — fills only       */
  --brand-lime-dim:   #a8cc1f;
  --brand-green:      #0e7a52;  /* functional green, AA on white         */

  /* ---- Surfaces ------------------------------------------------------ */
  --surface-page:     #f9f9f7;
  --surface-1:        #fcfcfb;  /* card + chart surface (validator ref)  */
  --surface-2:        #f2f2ef;  /* recessed wells                        */
  --surface-inverse:  var(--brand-ink);

  /* ---- Ink ----------------------------------------------------------- */
  --text-primary:     #0b0b0b;
  --text-secondary:   #52514e;
  --text-muted:       #6d6b65;  /* darkened from ref #898781 for AA body */
  --text-on-dark:     #ffffff;
  --text-on-dark-2:   #c3c2b7;

  /* ---- Lines --------------------------------------------------------- */
  --line-hairline:    #e1e0d9;
  --line-strong:      #c3c2b7;
  --border-ring:      rgba(11, 11, 11, 0.10);

  /* ---- Data series (validated reference slots, light) ---------------- */
  --series-1:         #2a78d6;  /* blue    — single-phase                */
  --series-2:         #1baf7a;  /* aqua    — three-phase                 */
  --series-3:         #eda100;  /* yellow  — DC / public                 */
  --series-4:         #008300;  /* green                                 */
  --series-5:         #4a3aa7;  /* violet                                */
  --series-6:         #e34948;  /* red                                   */
  --series-7:         #e87ba4;  /* magenta                               */
  --series-8:         #eb6834;  /* orange                                */

  /* ---- Status (fixed, never themed) ---------------------------------- */
  --status-good:      #0ca30c;
  --status-warning:   #fab219;
  --status-serious:   #ec835a;
  --status-critical:  #d03b3b;
  --status-good-text: #006300;

  /* ---- Semantic: the site's core concept --------------------------- */
  --c-single-phase:   var(--series-1);
  --c-three-phase:    var(--series-2);
  --c-dc:             var(--series-3);
  --c-wasted:         #b9b8b1;  /* charger capacity the car can't use    */
  --c-limit:          var(--status-critical);

  /* ---- Type ---------------------------------------------------------- */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --fs-xs:    0.75rem;
  --fs-sm:    0.875rem;
  --fs-base:  1rem;
  --fs-md:    1.125rem;
  --fs-lg:    1.375rem;
  --fs-xl:    1.75rem;
  --fs-2xl:   2.25rem;
  --fs-3xl:   3rem;
  --fs-4xl:   3.75rem;

  --lh-tight: 1.15;
  --lh-snug:  1.3;
  --lh-body:  1.65;

  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semi:   600;
  --fw-bold:   700;

  /* ---- Space (4px base) ---------------------------------------------- */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.5rem;
  --sp-6:  2rem;
  --sp-7:  3rem;
  --sp-8:  4rem;
  --sp-9:  6rem;
  --sp-10: 8rem;

  /* ---- Radius -------------------------------------------------------- */
  --r-sm:   4px;
  --r-md:   8px;
  --r-lg:   14px;
  --r-xl:   22px;
  --r-full: 999px;

  /* ---- Elevation ----------------------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(10, 22, 40, 0.06);
  --shadow-md: 0 4px 16px rgba(10, 22, 40, 0.08);
  --shadow-lg: 0 18px 48px rgba(10, 22, 40, 0.12);

  /* ---- Layout -------------------------------------------------------- */
  --wrap:        1200px;
  --wrap-narrow: 760px;   /* measure for long-form reading */
  --header-h:    72px;

  /* ---- Motion -------------------------------------------------------- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur:  200ms;
}

/* ==========================================================================
   Dark mode — selected steps, not an inverted flip.
   Declared under both the OS media query and the explicit toggle scope so
   the toggle wins in both directions.
   ========================================================================== */

@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    color-scheme: dark;

    --surface-page:    #0d0d0d;
    --surface-1:       #1a1a19;
    --surface-2:       #232322;
    --surface-inverse: #05080f;

    --text-primary:    #ffffff;
    --text-secondary:  #c3c2b7;
    --text-muted:      #9d9b93;
    --text-on-dark:    #ffffff;
    --text-on-dark-2:  #c3c2b7;

    --line-hairline:   #2c2c2a;
    --line-strong:     #383835;
    --border-ring:     rgba(255, 255, 255, 0.10);

    --series-1:        #3987e5;
    --series-2:        #199e70;
    --series-3:        #c98500;
    --series-4:        #008300;
    --series-5:        #9085e9;
    --series-6:        #e66767;
    --series-7:        #d55181;
    --series-8:        #d95926;

    --c-wasted:        #4a4a46;
    --status-good-text: #0ca30c;

    --brand-green:     #26c489;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 18px 48px rgba(0, 0, 0, 0.6);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --surface-page:    #0d0d0d;
  --surface-1:       #1a1a19;
  --surface-2:       #232322;
  --surface-inverse: #05080f;

  --text-primary:    #ffffff;
  --text-secondary:  #c3c2b7;
  --text-muted:      #9d9b93;
  --text-on-dark:    #ffffff;
  --text-on-dark-2:  #c3c2b7;

  --line-hairline:   #2c2c2a;
  --line-strong:     #383835;
  --border-ring:     rgba(255, 255, 255, 0.10);

  --series-1:        #3987e5;
  --series-2:        #199e70;
  --series-3:        #c98500;
  --series-4:        #008300;
  --series-5:        #9085e9;
  --series-6:        #e66767;
  --series-7:        #d55181;
  --series-8:        #d95926;

  --c-wasted:        #4a4a46;
  --status-good-text: #0ca30c;

  --brand-green:     #26c489;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 18px 48px rgba(0, 0, 0, 0.6);
}