/* =============================================================
   AnePi Design Tokens — Deep Teal
   Drop this file at the top of your stylesheet (or import it).
   All values are CSS custom properties so they cascade cleanly.
   ============================================================= */

:root {
  /* ---------- Neutrals (Shopify Polaris-compatible) ---------- */
  --anepi-bg:           #F6F6F7;   /* Page background */
  --anepi-surface:      #FFFFFF;   /* Cards, tables, chat */
  --anepi-surface-2:    #FAFBFB;   /* Table header, subtle rows */
  --anepi-surface-3:    #F1F2F3;   /* Nav / sidebar bg */
  --anepi-border:       #E1E3E5;   /* Default border */
  --anepi-border-strong:#C9CCCF;   /* Dashed borders, dividers */
  --anepi-text:         #202223;   /* Body text (Polaris ink) */
  --anepi-text-2:       #303030;   /* Secondary text */
  --anepi-muted:        #6D7175;   /* Muted / caption */
  --anepi-muted-2:      #8C9196;   /* Placeholder, disabled */

  /* ---------- Brand — DEEP TEAL ---------- */
  --anepi-brand:        #0F766E;   /* teal-700 · primary CTA, links, active tab, focus ring */
  --anepi-brand-2:      #14B8A6;   /* teal-500 · hover, gradient endpoint, accent */
  --anepi-brand-soft:   #F0FDFA;   /* teal-50 · selected row, soft chip bg, hover row */
  --anepi-brand-ring:   rgba(15, 118, 110, 0.18);  /* focus ring shadow */

  /* Extended teal scale for anything that needs more nuance */
  --anepi-teal-50:  #F0FDFA;
  --anepi-teal-100: #CCFBF1;
  --anepi-teal-300: #5EEAD4;
  --anepi-teal-500: #14B8A6;
  --anepi-teal-700: #0F766E;
  --anepi-teal-900: #134E4A;

  /* ---------- Semantic ---------- */
  --anepi-ok:        #0F766E;   /* Positive uses the brand teal itself */
  --anepi-ok-soft:   #CCFBF1;
  --anepi-warn:      #B45309;
  --anepi-warn-soft: #FEF3C7;
  --anepi-err:       #B91C1C;
  --anepi-err-soft:  #FEE2E2;
  --anepi-info:      #1D4ED8;
  --anepi-info-soft: #DBEAFE;

  /* ---------- Typography ---------- */
  --anepi-font-sans:  "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --anepi-font-mono:  "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Type scale (font-size / line-height) — tuned for Shopify admin density */
  --anepi-text-hero:   28px;   /* Hero titles only (chat greeting, promo card) */
  --anepi-text-h1:     22px;   /* Page title */
  --anepi-text-h2:     17px;   /* Card section titles */
  --anepi-text-h3:     14px;   /* Small card titles */
  --anepi-text-body:   14px;   /* Default body */
  --anepi-text-small:  12.5px; /* Captions, table row secondary */
  --anepi-text-micro:  11px;   /* All-caps labels, chip text */

  /* Weight ramp */
  --anepi-fw-regular:  400;
  --anepi-fw-medium:   500;
  --anepi-fw-semibold: 600;
  --anepi-fw-bold:     700;

  /* Letter-spacing on display sizes */
  --anepi-tracking-tight-lg: -0.02em;   /* hero */
  --anepi-tracking-tight:    -0.015em;  /* h1 */
  --anepi-tracking-caps:      0.06em;   /* uppercase labels */

  /* ---------- Radii ---------- */
  --anepi-radius-sm:   6px;    /* chips, small buttons */
  --anepi-radius:      8px;    /* default (buttons, inputs) */
  --anepi-radius-md:   10px;   /* nested cards, learn items */
  --anepi-radius-lg:   12px;   /* cards, tables, chat panels */
  --anepi-radius-pill: 999px;

  /* ---------- Shadows ---------- */
  --anepi-shadow-1: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 1px rgba(15, 23, 42, 0.03);
  --anepi-shadow-2: 0 8px 24px rgba(15, 23, 42, 0.06), 0 2px 6px rgba(15, 23, 42, 0.04);
  --anepi-shadow-up: 0 -4px 12px rgba(15, 23, 42, 0.04);  /* Notification bar */

  /* ---------- Spacing (4px baseline) ---------- */
  --anepi-space-1: 4px;
  --anepi-space-2: 8px;
  --anepi-space-3: 12px;
  --anepi-space-4: 16px;
  --anepi-space-5: 20px;
  --anepi-space-6: 24px;
  --anepi-space-8: 32px;

  /* ---------- Layout ---------- */
  --anepi-chat-width:    380px;  /* Home chat panel */
  --anepi-chat-width-2:  360px;  /* Non-home chat panel (collapsible) */
  --anepi-chat-collapsed: 48px;  /* Collapsed chat rail */
  --anepi-notif-height-s: 140px; /* Small expanded log */
  --anepi-notif-height-m: 260px;
  --anepi-notif-height-l: 420px;

  /* ---------- Motion ---------- */
  --anepi-ease:     cubic-bezier(0.4, 0, 0.2, 1);
  --anepi-dur-fast: 0.15s;
  --anepi-dur:      0.25s;
}

/* Optional: system dark preference (unused in v1 — the app runs inside Shopify light chrome) */
/* Uncomment if you later add a dark mode toggle. */
/*
:root[data-theme="dark"] {
  --anepi-bg:        #0B1220;
  --anepi-surface:   #111827;
  --anepi-surface-2: #172033;
  --anepi-surface-3: #1F2937;
  --anepi-border:    #1F2937;
  --anepi-text:      #E5E7EB;
  --anepi-muted:     #94A3B8;
}
*/