/* PhytoStore panel design tokens.
 *
 * Loaded before master.css / admin.css. Those stylesheets style every
 * component through var(--t-*) so the whole look is swappable from here.
 *
 * Default (:root)                    = "Notion" — warm, all-light, low-contrast,
 *                                      one quiet purple accent, green for good.
 * :root[data-admin-theme="classic"]  = the previous green/slate admin look,
 *                                      kept for sellers who toggle back.
 *
 * The master panel always runs the default. The store admin runs whichever
 * the seller picked (stores.admin_theme).
 */

:root {
  /* surfaces */
  --t-bg:          #fdfcfa;
  --t-side-bg:     #f4f3ee;
  --t-card:        #ffffff;
  --t-raised:      #faf9f6;   /* subtle raised fill: hover bg, chips, code */
  --t-hover:       #f6f5f0;   /* row / nav hover */
  --t-line:        #ecebe3;   /* the hairline — borders + dividers */
  --t-line-strong: #e0ded2;   /* stronger 1px: inputs, emphasis dividers */

  /* text */
  --t-ink:    #26251f;   /* headings, primary */
  --t-body:   #56544b;   /* body copy */
  --t-mute:   #8b887d;   /* captions, table labels, secondary */
  --t-faint:  #b7b4a7;   /* placeholder, disabled, tertiary */

  /* accent — used sparingly: primary button, focus ring, active nav, links */
  --t-accent:      #7c5cd6;
  --t-accent-hov:  #6b49cb;
  --t-accent-ink:  #6344bd;
  --t-accent-bg:   #f1edfa;
  --t-accent-line: #e3dbf5;
  --t-on-accent:   #ffffff;

  /* semantic — separate from the accent */
  --t-good:       #4a955f;  --t-good-ink: #3c7d4f;
  --t-good-bg:    #ecf5ef;  --t-good-line:#d4e6da;
  --t-warn:       #a1793f;  --t-warn-ink: #8a6633;
  --t-warn-bg:    #faf1e6;  --t-warn-line:#eeddc4;
  --t-bad:        #bd5a50;  --t-bad-ink:  #a94a41;   /* soft brick, never a harsh red */
  --t-bad-bg:     #fbeeec;  --t-bad-line: #f0d5d0;
  --t-info:       #5a6ca8;  --t-info-ink: #4a5c96;
  --t-info-bg:    #eef1f9;  --t-info-line:#dde3f1;
  --t-purple-bg:  #f5f1fb;  --t-purple-line:#e6dcf3; --t-purple-ink:#6344bd;

  /* shape + depth */
  --t-r:        14px;   /* card */
  --t-r-sm:     9px;    /* button, input, tag */
  --t-r-pill:   999px;
  --t-shadow:   0 1px 2px rgba(35,32,22,.035);
  --t-shadow-lg:0 4px 22px rgba(35,32,22,.07);
  --t-focus:    0 0 0 3px rgba(124,92,214,.15);

  /* type */
  --t-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --t-mono: 'DM Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* KPI tile tints — pale, easy; cycle across a stat grid */
  --t-tile-1: #fbf5f1;  --t-tile-1-line: #f2e8df;
  --t-tile-2: #f2f7f3;  --t-tile-2-line: #e4efe7;
  --t-tile-3: #f2f4fb;  --t-tile-3-line: #e6eaf6;
  --t-tile-4: #f6f2fb;  --t-tile-4-line: #ece2f5;

  /* sidebar — the admin panel's is a filled panel with its own ink scale */
  --t-side-strong: var(--t-ink);
  --t-side-ink:    var(--t-body);
  --t-side-mute:   var(--t-faint);
  --t-side-hover:  rgba(35,32,22,.05);
  --t-side-on-bg:  var(--t-accent-bg);
  --t-side-on-ink: var(--t-accent-ink);
  --t-side-bar:    var(--t-accent);
  --t-side-border: var(--t-line-strong);
  --t-side-home:   var(--t-good-ink);

  /* charts: two series (a = storefront/primary, b = subscription/secondary) */
  --t-chart-a: #8f78d8;
  --t-chart-b: #cba36a;

  /* conversion funnel — one purple ramp fading as it narrows, green at the end */
  --t-funnel-1: #7c5cd6;
  --t-funnel-2: #9581dd;
  --t-funnel-3: #ab9ce5;
  --t-funnel-4: #c2b6ec;
  --t-funnel-5: #d6cef3;
  --t-funnel-6: #4a955f;
}

/* ── CLASSIC — the previous admin look, opt-in via the toggle ─────────────── */
:root[data-admin-theme="classic"] {
  --t-bg:          #f1f5f9;
  --t-side-bg:     #ffffff;
  --t-card:        #ffffff;
  --t-raised:      #f8fafc;
  --t-hover:       #f8fafc;
  --t-line:        #e2e8f0;
  --t-line-strong: #cbd5e1;

  --t-ink:   #0f172a;
  --t-body:  #475569;
  --t-mute:  #64748b;
  --t-faint: #94a3b8;

  --t-accent:      #3b82f6;
  --t-accent-hov:  #2563eb;
  --t-accent-ink:  #2563eb;
  --t-accent-bg:   #eff6ff;
  --t-accent-line: #bfdbfe;
  --t-on-accent:   #ffffff;

  --t-good:      #15803d;  --t-good-ink: #15803d;
  --t-good-bg:   #dcfce7;  --t-good-line:#86efac;
  --t-warn:      #d97706;  --t-warn-ink: #d97706;
  --t-warn-bg:   #fffbeb;  --t-warn-line:#fcd34d;
  --t-bad:       #dc2626;  --t-bad-ink:  #dc2626;
  --t-bad-bg:    #fef2f2;  --t-bad-line: #fca5a5;
  --t-info:      #2563eb;  --t-info-ink: #2563eb;
  --t-info-bg:   #eff6ff;  --t-info-line:#93c5fd;
  --t-purple-bg: #f5f3ff;  --t-purple-line:#c4b5fd; --t-purple-ink:#7c3aed;

  --t-r:        10px;
  --t-r-sm:     7px;
  --t-shadow:   0 1px 2px rgba(15,23,42,.04);
  --t-shadow-lg:0 4px 24px rgba(0,0,0,.06);
  --t-focus:    0 0 0 3px rgba(22,163,74,.1);

  --t-tile-1: #ffffff;  --t-tile-1-line: var(--t-line);
  --t-tile-2: #ffffff;  --t-tile-2-line: var(--t-line);
  --t-tile-3: #ffffff;  --t-tile-3-line: var(--t-line);
  --t-tile-4: #ffffff;  --t-tile-4-line: var(--t-line);

  --t-side-bg:     #1e2432;
  --t-side-strong: #ffffff;
  --t-side-ink:    rgba(255,255,255,.60);
  --t-side-mute:   rgba(255,255,255,.32);
  --t-side-hover:  rgba(255,255,255,.06);
  --t-side-on-bg:  rgba(255,255,255,.10);
  --t-side-on-ink: #ffffff;
  --t-side-bar:    #60a5fa;
  --t-side-border: rgba(255,255,255,.08);
  --t-side-home:   #34d399;

  --t-chart-a: #3b82f6;
  --t-chart-b: #6e40c9;
  --t-funnel-1: #238636;
  --t-funnel-2: #1f6feb;
  --t-funnel-3: #6e40c9;
  --t-funnel-4: #9e6a03;
  --t-funnel-5: #da3633;
  --t-funnel-6: #3fb950;
}