/* ==========================================================================
   This Way Mart · tokens.css
   Every colour, size, radius, font and motion value used anywhere on the
   site lives here. Components and pages reference these variables only.
   Light is the default; dark is applied with [data-theme="dark"] on <html>
   and, when no preference is stored, by prefers-color-scheme.
   ========================================================================== */

:root {
  /* ---- Brand palette (do not use directly in components; use roles) ---- */
  --purple:       #5B3FC4;   /* the brand */
  --indigo:       #3F25A8;   /* deep purple: "We make it", headings, dark panels */
  --lilac:        #9C8DE4;
  --lilac-light:  #D4CCF5;
  --mist:         #EEEBFA;
  --ink:          #0E0B1D;
  --ink-soft:     #121226;
  --slate:        #4A4470;   /* plum: secondary text, never grey */
  --blue:         #2F7BF5;   /* logo, JaDrop, large graphics */
  --action-blue:  #1F66E0;   /* buttons and links: white text 5.2:1 */
  --action-blue-deep: #1A57C2;
  --sky:          #3D9BFF;
  --night:        #151034;
  --canvas:       #FAFAF8;
  --white:        #FFFFFF;
  --amber:        #F2A93B;
  --amber-deep:   #E8992A;
  --drop:         #2F7BF5;   /* JaDrop accent — JaDrop surfaces only */
  --drop-tint:    #E8F0FE;

  /* ---- Messaging ---- */
  --success:      #1E7A4E;  --success-bg: #E3F3EA;
  --alert:        #B8541F;  --alert-bg:   #FBE9E2;
  --error:        #C62B3C;  --error-bg:   #FCE6E8;
  --notice:       #5B3FC4;  --notice-bg:  #EEEBFA;

  /* ---- Roles · light ---- */
  --bg:           var(--canvas);
  --surface:      var(--white);
  --surface-2:    var(--mist);
  --line:         var(--mist);
  --text:         var(--ink-soft);
  --text-muted:   var(--slate);
  --brand:        var(--purple);
  --brand-soft:   var(--lilac);
  --link:         var(--action-blue);
  --action:       var(--amber);        /* buy: Buy now, Checkout, Place order */
  --action-text:  var(--ink);
  --do:           var(--action-blue);  /* every other action */
  --do-hover:     var(--action-blue-deep);
  --do-text:      var(--white);
  --spark:        var(--blue);
  --focus:        var(--action-blue);
  --logo-ja:      var(--indigo);
  --logo-sento:   var(--lilac);
  --star:         var(--amber);
  --thumb-ring:   var(--indigo);

  /* ---- Type ---- */
  --font:         'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fs-display:   clamp(2.5rem, 5vw, 4rem);   /* 40–64 */
  --fs-h1:        clamp(2rem, 3.2vw, 2.5rem);  /* 32–40 */
  --fs-h2:        1.5rem;                      /* 24 */
  --fs-h3:        1.25rem;                     /* 20 */
  --fs-body:      1.0625rem;                   /* 17 */
  --fs-small:     0.9375rem;                   /* 15 */
  --fs-label:     0.8125rem;                   /* 13 */
  --fs-micro:     0.6875rem;                   /* 11 */
  --lh-tight:     1.05;
  --lh-body:      1.6;
  --track-tight:  -0.04em;
  --track-head:   -0.02em;
  --track-label:  0.12em;

  /* ---- Space (8px rhythm) ---- */
  --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem;
  --s-6: 2rem;    --s-7: 3rem;   --s-8: 4rem;    --s-9: 6rem;
  --gutter:       clamp(1rem, 5vw, 4rem);
  --page-max:     1280px;

  /* ---- Shape ---- */
  --r-pill:       999px;
  --r-card:       20px;
  --r-tile:       16px;
  --r-input:      14px;
  --r-thumb:      14px;

  /* ---- Elevation (used sparingly) ---- */
  --shadow-soft:  0 10px 30px rgba(14, 11, 29, 0.06);

  /* ---- Motion ---- */
  --ease:         cubic-bezier(0.2, 0.7, 0.2, 1);
  --t-fast:       150ms;
  --t-base:       200ms;
  --t-burst:      900ms;

  /* ---- Controls ---- */
  --tap-min:      44px;
  --btn-h:        56px;
  --btn-h-sm:     44px;

  color-scheme: light;
}

/* ---- Roles · dark ---- */
:root[data-theme="dark"] {
  --bg:           var(--night);
  --surface:      #1E1848;
  --surface-2:    #2A2360;
  --line:         #3A3278;
  --text:         var(--white);
  --text-muted:   var(--lilac-light);
  --brand:        #B9ACFF;
  --brand-soft:   var(--lilac);
  --link:         #7FB6FF;
  --action:       var(--amber);
  --action-text:  var(--ink);
  --do:           var(--action-blue);
  --do-hover:     #2F7BF5;
  --do-text:      var(--white);
  --spark:        #7FB6FF;
  --focus:        #7FB6FF;
  --logo-ja:      var(--lilac);
  --logo-sento:   var(--lilac-light);
  --star:         var(--amber);
  --thumb-ring:   var(--lilac-light);

  --success:      #5FD39A;  --success-bg: #12301F;
  --alert:        #F08A5D;  --alert-bg:   #33170C;
  --error:        #FF7A85;  --error-bg:   #36101A;
  --notice:       #D4CCF5;  --notice-bg:  #2A2360;

  --shadow-soft:  0 10px 30px rgba(8, 5, 26, 0.45);
  color-scheme: dark;
}

/* System preference applies only when the visitor has not chosen */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    --bg:           var(--night);
    --surface:      #1E1848;
    --surface-2:    #2A2360;
    --line:         #3A3278;
    --text:         var(--white);
    --text-muted:   var(--lilac-light);
    --brand:        #B9ACFF;
    --brand-soft:   var(--lilac);
    --link:         #7FB6FF;
    --do:           var(--action-blue);
    --do-hover:     #2F7BF5;
    --do-text:      var(--white);
    --spark:        #7FB6FF;
    --focus:        #7FB6FF;
    --logo-ja:      var(--lilac);
    --logo-sento:   var(--lilac-light);
    --thumb-ring:   var(--lilac-light);
    --success:      #5FD39A;  --success-bg: #12301F;
    --alert:        #F08A5D;  --alert-bg:   #33170C;
    --error:        #FF7A85;  --error-bg:   #36101A;
    --notice:       #D4CCF5;  --notice-bg:  #2A2360;
    --shadow-soft:  0 10px 30px rgba(8, 5, 26, 0.45);
    color-scheme: dark;
  }
}

/* JaDrop accent in dark mode */
[data-theme="dark"] { --drop: #6FA6FF; --drop-tint: #15284A; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --drop: #6FA6FF; --drop-tint: #15284A; } }

/* ---- Brand gradient (lilac → JaDrop blue). Use for JaDrop marks, the
   spark and gradient CTAs only; body copy never sits on it. ---- */
:root { --grad-brand: linear-gradient(135deg, #8B7CC7 0%, #5B7BE0 55%, #2F7BF5 100%); --grad-brand-soft: linear-gradient(135deg, #ECEBF5 0%, #E8F0FE 100%); }
[data-theme="dark"] { --grad-brand-soft: linear-gradient(135deg, #221E3D 0%, #15284A 100%); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --grad-brand-soft: linear-gradient(135deg, #221E3D 0%, #15284A 100%); } }

/* ---- This Way gradient (purple → blue, left to right). The logo, the arrow
   tile and hero moments; never behind body text. ---- */
:root { --grad-thisway: linear-gradient(90deg, #5B3FC4 0%, #2F7BF5 100%); }