/* ============================================================
   CARTLY DESIGN SYSTEM — Tokens
   Intelligent Indigo · Professional Slate · Growth Green
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ---------- Color: Intelligent Indigo (primary) ---------- */
  --indigo-50:  #EEF1FF;
  --indigo-100: #DDE3FF;
  --indigo-200: #BCC8FF;
  --indigo-300: #94A3FF;
  --indigo-400: #6D7BF7;
  --indigo-500: #4F58E8;   /* Primary — brand */
  --indigo-600: #3F44D1;
  --indigo-700: #3334A8;
  --indigo-800: #272781;
  --indigo-900: #1B1A5C;
  --indigo-950: #0F0E33;

  /* ---------- Color: Professional Slate (neutrals) ---------- */
  --slate-0:   #FFFFFF;
  --slate-25:  #FBFCFD;
  --slate-50:  #F6F8FA;
  --slate-100: #EDF1F5;
  --slate-200: #DDE3EB;
  --slate-300: #C2CCD8;
  --slate-400: #93A0B2;
  --slate-500: #677488;
  --slate-600: #4A5567;
  --slate-700: #323B4D;
  --slate-800: #1F2636;
  --slate-900: #131826;
  --slate-950: #0A0E1A;

  /* ---------- Color: Growth Green (recovery / success) ---------- */
  --green-50:  #ECFDF3;
  --green-100: #D1FADF;
  --green-300: #6CE9A6;
  --green-500: #12B76A;   /* Recovery / positive delta */
  --green-600: #039855;
  --green-700: #027A48;
  --green-900: #054F31;

  /* ---------- Color: Semantic accents ---------- */
  --amber-50:  #FFFAEB;
  --amber-500: #F59E0B;   /* Pending / at-risk carts */
  --amber-700: #B54708;

  --red-50:   #FEF3F2;
  --red-500:  #F04438;    /* Failed / abandoned spike */
  --red-700:  #B42318;

  --sky-50:   #F0F9FF;
  --sky-500:  #0BA5EC;    /* Info / AI chip */
  --sky-700:  #026AA2;

  /* ---------- Surface / foreground semantic vars ---------- */
  --bg-page:        var(--slate-25);
  --bg-surface:     var(--slate-0);
  --bg-sunken:      var(--slate-50);
  --bg-inverse:     var(--slate-900);
  --bg-code:        #0E1320;       /* Email builder editor */

  --fg-1:           var(--slate-900);  /* Primary text */
  --fg-2:           var(--slate-600);  /* Secondary text */
  --fg-3:           var(--slate-400);  /* Tertiary / placeholder */
  --fg-inverse:     var(--slate-0);
  --fg-brand:       var(--indigo-600);
  --fg-success:     var(--green-700);
  --fg-warning:     var(--amber-700);
  --fg-danger:      var(--red-700);

  --border-subtle:  var(--slate-200);
  --border-default: var(--slate-300);
  --border-strong:  var(--slate-500);
  --border-focus:   var(--indigo-500);

  /* ---------- Type ---------- */
  --font-sans:    "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-display: "Inter", ui-sans-serif, system-ui, sans-serif;  /* same family, tighter tracking */

  /* Type scale — fluid-ish, but pinned for design tokens */
  --fs-display-xl: 64px;
  --fs-display-lg: 52px;
  --fs-display-md: 40px;
  --fs-h1:         32px;
  --fs-h2:         24px;
  --fs-h3:         20px;
  --fs-body-lg:    17px;
  --fs-body:       15px;
  --fs-body-sm:    13px;
  --fs-caption:    12px;
  --fs-mono:       13px;

  --lh-tight:      1.1;
  --lh-snug:       1.25;
  --lh-normal:     1.5;
  --lh-relaxed:    1.65;

  --tracking-tight: -0.022em;   /* display */
  --tracking-snug:  -0.012em;   /* headings */
  --tracking-norm:  -0.005em;   /* body */
  --tracking-wide:   0.06em;    /* eyebrows / kicker */

  /* ---------- Spacing (4px base) ---------- */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;

  /* ---------- Radii ---------- */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-2xl: 20px;
  --r-pill: 999px;

  /* ---------- Elevation ---------- */
  --shadow-xs:   0 1px 2px rgba(16, 24, 40, 0.05);
  --shadow-sm:   0 1px 3px rgba(16, 24, 40, 0.08), 0 1px 2px rgba(16, 24, 40, 0.04);
  --shadow-md:   0 4px 8px -2px rgba(16, 24, 40, 0.08), 0 2px 4px -2px rgba(16, 24, 40, 0.04);
  --shadow-lg:   0 12px 16px -4px rgba(16, 24, 40, 0.08), 0 4px 6px -2px rgba(16, 24, 40, 0.03);
  --shadow-xl:   0 20px 24px -4px rgba(16, 24, 40, 0.08), 0 8px 8px -4px rgba(16, 24, 40, 0.03);
  --shadow-glow: 0 0 0 4px rgba(79, 88, 232, 0.15);
  --shadow-ring: inset 0 0 0 1px rgba(16, 24, 40, 0.06);

  /* ---------- Motion ---------- */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:    120ms;
  --dur-base:    200ms;
  --dur-slow:    320ms;

  /* ---------- Layout ---------- */
  --container-app: 1280px;
  --container-marketing: 1200px;
  --sidebar-w: 248px;
  --topbar-h: 60px;
}

/* ============================================================
   Semantic typography classes
   ============================================================ */
.t-display-xl { font: 800 var(--fs-display-xl)/var(--lh-tight) var(--font-display); letter-spacing: var(--tracking-tight); color: var(--fg-1); }
.t-display-lg { font: 800 var(--fs-display-lg)/var(--lh-tight) var(--font-display); letter-spacing: var(--tracking-tight); color: var(--fg-1); }
.t-display-md { font: 700 var(--fs-display-md)/var(--lh-snug) var(--font-display); letter-spacing: var(--tracking-tight); color: var(--fg-1); }
.t-h1   { font: 700 var(--fs-h1)/var(--lh-snug)   var(--font-sans); letter-spacing: var(--tracking-snug); color: var(--fg-1); }
.t-h2   { font: 600 var(--fs-h2)/var(--lh-snug)   var(--font-sans); letter-spacing: var(--tracking-snug); color: var(--fg-1); }
.t-h3   { font: 600 var(--fs-h3)/var(--lh-snug)   var(--font-sans); letter-spacing: var(--tracking-snug); color: var(--fg-1); }
.t-body-lg { font: 400 var(--fs-body-lg)/var(--lh-relaxed) var(--font-sans); letter-spacing: var(--tracking-norm); color: var(--fg-2); }
.t-body    { font: 400 var(--fs-body)/var(--lh-normal) var(--font-sans);    letter-spacing: var(--tracking-norm); color: var(--fg-2); }
.t-body-sm { font: 400 var(--fs-body-sm)/var(--lh-normal) var(--font-sans); color: var(--fg-2); }
.t-caption { font: 500 var(--fs-caption)/1.4 var(--font-sans); letter-spacing: 0.01em; color: var(--fg-3); }
.t-eyebrow { font: 600 var(--fs-caption)/1.2 var(--font-sans); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--fg-brand); }
.t-mono    { font: 500 var(--fs-mono)/1.5 var(--font-mono); color: var(--fg-1); }
.t-num     { font: 700 var(--fs-display-md)/1 var(--font-sans); font-variant-numeric: tabular-nums; letter-spacing: var(--tracking-tight); color: var(--fg-1); }