/* ================================
   JAIFORE DESIGN TOKENS
   frontend/styles/tokens.css

   The one place to change the brand. Load this FIRST on every page.
   Colours come from the logo (logo/jaifore-source.jpg): the neon purple rope
   and green rope on a gunmetal anchor. Neon green and its tints are
   decoration only — they do not pass contrast as text on white; use
   --green-deep for green text.

   Dark mode: the full dark set is defined below under [data-theme="dark"].
   scripts/theme.js sets data-theme on <html> from the 3-way toggle
   (light / dark / auto); "auto" is resolved to light or dark there.
   ================================ */
:root {
  /* ── Brand ─────────────────────────────────────── */
  --purple:        #8a1fa8;   /* primary: buttons, links, accents */
  --purple-dark:   #5d0f78;   /* pressed / strong accents / text on tint */
  --purple-hover:  #741a90;
  --purple-soft:   #d27be8;   /* links on dark backgrounds */
  --purple-tint:   #f6e9fb;   /* selected / highlighted backgrounds */
  --purple-light:  var(--purple-hover);  /* legacy name used by services.css */
  --purple-dim:    rgba(138, 31, 168, 0.08);
  --purple-glow:   rgba(138, 31, 168, 0.20);
  --green:         #3ddc2e;   /* neon green rope: decoration, text on dark */
  --green-deep:    #1f7a1a;   /* green text on light surfaces (>= 4.5:1) */
  --magenta:       #c13cf0;   /* neon purple glow */
  --teal:          var(--green);    /* legacy names kept for old rules */
  --blue:          var(--magenta);
  --sage:          #8fe07f;
  --on-purple:     #ffffff;   /* text on --purple */
  --purple-fill:   var(--purple);   /* button fills; darker in dark mode so white text passes 4.5:1 */
  --inverse-bg:     #111111;   /* dark buttons that flip to light in dark mode */
  --inverse-ink:    #ffffff;
  --status-processing-bg: #fff8e1;
  --status-shipped-bg:    #ebf4fb;
  --status-delivered-bg:  #e8f5e9;
  --status-cancelled-bg:  #fdecea;

  /* ── Surfaces ──────────────────────────────────── */
  --bg:            #ffffff;
  --bg-soft:       #f8f2fb;
  --bg-card:       #f8f2fb;
  --bg-panel:      #fbf7fd;
  --bg-tint:       #fcf8fe;
  --surface:       #ffffff;   /* cards, modals, inputs */
  --nav-bg:        rgba(255, 255, 255, 0.94);
  --footer-bg:     #14091c;   /* deep aubergine, from the logo's dark purple */
  --footer-ink:    #dccfe6;
  --footer-muted:  #9a8aa8;

  /* ── Text ──────────────────────────────────────── */
  --ink:           #14101a;
  --ink-soft:      #2a2033;
  --ink-2:         #4d4458;
  --muted:         #6b6277;   /* >= 4.5:1 on white */
  --muted2:        #9a90a8;   /* placeholders, disabled — not for body text */
  --muted-2:       var(--muted2);

  /* ── Lines ─────────────────────────────────────── */
  --border:        #e2d6ea;
  --border-soft:   #efe7f4;
  --border-hover:  var(--purple-dark);

  /* ── Status ────────────────────────────────────── */
  --error:         #b03030;
  --danger:        #c0392b;
  --success:       #2a7a4a;
  --warning:       #b7791f;

  /* ── Fonts (two families; change here) ─────────── */
  --font-display:  'Playfair Display', Georgia, serif;
  --font-body:     'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* ── Type scale ────────────────────────────────── */
  --text-xs:   0.72rem;
  --text-sm:   0.85rem;
  --text-base: 1rem;
  --text-lg:   1.25rem;
  --text-xl:   1.75rem;
  --text-2xl:  2.5rem;
  --text-hero: clamp(2.4rem, 6vw, 4.2rem);

  /* ── Spacing scale ─────────────────────────────── */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;

  /* ── Shape ─────────────────────────────────────── */
  --radius:       2px;        /* editorial default: near-square */
  --radius-sm:    6px;
  --radius-md:    10px;
  --radius-lg:    16px;
  --radius-pill:  20px;       /* "Hi, name" pill, sign-in, CTAs */

  /* ── Shadows ───────────────────────────────────── */
  --shadow-sm:    0 1px 3px rgba(20, 18, 28, 0.08);
  --shadow-md:    0 4px 18px rgba(20, 18, 28, 0.10);
  --shadow-lg:    0 12px 40px rgba(20, 18, 28, 0.18);
  --shadow-nav:   0 4px 24px rgba(138, 31, 168, 0.12);
  --shadow-hard:  4px 4px 0 var(--ink);   /* editorial card hover */

  /* ── Layers ────────────────────────────────────── */
  --z-nav:     100;
  --z-sticky:  150;
  --z-drawer:  200;
  --z-modal:   1000;
  --z-toast:   1100;
  --z-tour:    9000;

  /* ── Motion ────────────────────────────────────── */
  --speed-fast: 0.15s;
  --speed-med:  0.3s;
  --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Site tour (styles/site-tour.css) ──────────── */
  --tour-accent:      var(--purple);
  --tour-accent-ink:  #fff;
  --tour-overlay:     rgba(20, 18, 28, 0.72);
  --tour-card-bg:     var(--surface);
  --tour-card-ink:    var(--ink);
}

/* ── Dark theme (switched on by data-theme="dark") ── */
[data-theme="dark"] {
  color-scheme: dark;
  --purple-fill:   #8a1fa8;
  --purple:        #c46ae0;
  --purple-dark:   #e3b4f2;
  --purple-hover:  #741a90;
  --purple-soft:   #d27be8;
  --purple-tint:   #27102f;
  --purple-dim:    rgba(196, 106, 224, 0.14);
  --purple-glow:   rgba(196, 106, 224, 0.30);
  --bg:            #0b0710;
  --bg-soft:       #150d1d;
  --bg-card:       #150d1d;
  --bg-panel:      #1a1024;
  --bg-tint:       #1a1024;
  --surface:       #150d1d;
  --nav-bg:        rgba(11, 7, 16, 0.94);
  --footer-bg:     #070409;
  --ink:           #f0ebf5;
  --ink-soft:      #ddd5e6;
  --ink-2:         #c3b9cf;
  --muted:         #a99eb5;
  --muted2:        #74687f;
  --border:        #35214a;
  --border-soft:   #281838;
  --shadow-hard:   4px 4px 0 var(--purple);
  --tour-overlay:  rgba(0, 0, 0, 0.78);
  --inverse-bg:    #f0ebf5;
  --inverse-ink:   #0b0710;
  --status-processing-bg: #3a2f12;
  --status-shipped-bg:    #14283d;
  --status-delivered-bg:  #12301f;
  --status-cancelled-bg:  #3d1a18;
}

@media (prefers-reduced-motion: reduce) {
  :root { --speed-fast: 0s; --speed-med: 0s; --transition: 0s; }
}