/* Carts Guru — Colors & Type tokens
 * Link this first: <link rel="stylesheet" href="/colors_and_type.css">
 */

/* Fonts — Proxima Nova (brand) for body + display; JetBrains Mono for code */
@font-face { font-family:'Proxima Nova'; src:url('fonts/Proxima_Nova_Light.ttf') format('truetype'); font-weight:300; font-style:normal; font-display:swap; }
@font-face { font-family:'Proxima Nova'; src:url('fonts/Proxima_Nova_Regular.ttf') format('truetype'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Proxima Nova'; src:url('fonts/Proxima_Nova_Semibold.ttf') format('truetype'); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:'Proxima Nova'; src:url('fonts/Proxima_Nova_Extrabold.ttf') format('truetype'); font-weight:800; font-style:normal; font-display:swap; }
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ---- Brand primitives ---- */
  --cg-green:         #2EB561;   /* product primary — buttons, positive deltas */
  --cg-green-600:     #28A054;   /* hover */
  --cg-green-700:     #23914B;   /* active/press */
  --cg-green-050:     #E8F6EE;   /* tint bg */
  --cg-green-mascot:  #3A9C44;   /* illustration only */
  --cg-green-text:    #52A45F;   /* small green text — rgb(82,164,95) */
  --cg-green-heat:    #90D9A4;   /* heatmap mid — rgb(144,217,164) */
  --cg-green-pale:    #EDF5EF;   /* row tint — rgb(237,245,239) */

  --cg-blue:          #0084FF;   /* links, info accent */
  --cg-blue-600:      #006FD6;
  --cg-blue-050:      #E5F2FF;

  --cg-yellow:        #F5C230;   /* mascot shield */
  --cg-orange:        #F5A623;   /* customer-lifecycle bars — rgb(245,166,35) */
  --cg-skin:          #F5CFA0;   /* mascot only */

  /* ---- Neutrals (verified from Figma) ---- */
  --cg-ink:           #3D3D3D;   /* primary text — rgb(61,61,61) */
  --cg-ink-title:     #4A4A4A;   /* page titles — rgb(74,74,74) */
  --cg-ink-subtle:    #545D70;   /* secondary text — rgb(84,93,112) */
  --cg-ink-muted:     #9FA4A8;   /* tertiary/labels — rgb(159,164,168) */
  --cg-ink-disabled:  #919EAB;
  --cg-nav-bg:        #273042;   /* sidebar bg — rgb(39,48,66) */
  --cg-nav-bg-2:      #374052;   /* sidebar expanded — rgb(55,64,82) */
  --cg-nav-circle:    #545D70;   /* inactive nav icon circle — rgb(84,93,112) */
  --cg-nav-add:       #465161;   /* add-website icon — rgb(70,81,97) */
  --cg-border-input:  #C4CDD5;   /* form borders */
  --cg-border-card:   #E2E2E2;   /* card hairlines — rgb(226,226,226) */
  --cg-border-soft:   #DFE3E8;
  --cg-divider:       #EDEEEF;
  --cg-surface:       #FFFFFF;
  --cg-surface-sub:   #F3F5F5;   /* rgb(243,245,245) — section bg */
  --cg-surface-soft:  #F8F8F8;
  --cg-bg-app:        #F9F9F9;   /* dashboard canvas — rgb(249,249,249) */

  /* ---- Semantic ---- */
  --cg-success:       var(--cg-green);
  --cg-warning:       #FFC453;
  --cg-critical:      #D72C0D;
  --cg-info:          var(--cg-blue);

  /* ---- Focus ring ---- */
  --cg-focus-ring:    0 0 0 2px rgba(46,181,97,0.4);

  /* ---- Radii ---- */
  --cg-radius-xs:     2px;
  --cg-radius-sm:     4px;   /* buttons, inputs */
  --cg-radius-md:     8px;   /* cards */
  --cg-radius-lg:     12px;  /* marketing panels */
  --cg-radius-xl:     16px;
  --cg-radius-pill:   999px;

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

  /* ---- Elevation ---- */
  --cg-shadow-0: none;
  --cg-shadow-1: 0 1px 2px rgba(0,0,0,0.05);
  --cg-shadow-2: 0 2px 6px rgba(33,43,54,0.08);
  --cg-shadow-3: 0 8px 24px rgba(33,43,54,0.12);
  --cg-shadow-brand: 0 10px 30px rgba(46,181,97,0.12);

  /* ---- Motion ---- */
  --cg-ease:        cubic-bezier(0.4, 0, 0.2, 1);
  --cg-dur-micro:   120ms;
  --cg-dur-panel:   200ms;
  --cg-dur-page:    320ms;

  /* ---- Type: families ---- */
  --cg-font-display: 'Proxima Nova', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --cg-font-body:    'Proxima Nova', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --cg-font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ---- Type: sizes ---- */
  --cg-t-xxl: 36px;
  --cg-t-xl:  28px;
  --cg-t-lg:  22px;
  --cg-t-md:  18px;
  --cg-t-base:16px;
  --cg-t-sm:  14px;
  --cg-t-xs:  13px;
  --cg-t-xxs: 12px;

  /* ---- Type: weights ---- */
  --cg-w-light:   300;
  --cg-w-regular: 400;
  --cg-w-medium:  600;   /* Proxima Nova has no 500 — semibold stands in */
  --cg-w-semi:    600;
  --cg-w-bold:    800;   /* Extrabold */
}

/* ---- Base ---- */
html, body {
  font-family: var(--cg-font-body);
  font-size: var(--cg-t-sm);      /* 14px dashboard default */
  line-height: 1.5;
  color: var(--cg-ink);
  background: var(--cg-bg-app);
  -webkit-font-smoothing: antialiased;
}

/* ---- Semantic type classes ---- */
.cg-display {
  font-family: var(--cg-font-display);
  font-size: var(--cg-t-xxl);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.cg-h1 {
  font-family: var(--cg-font-display);
  font-size: var(--cg-t-xl);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.cg-h2 {
  font-family: var(--cg-font-display);
  font-size: var(--cg-t-lg);
  font-weight: 600;
  line-height: 1.25;
}
.cg-h3 {
  font-size: var(--cg-t-md);
  font-weight: var(--cg-w-semi);
  line-height: 1.3;
}
.cg-body {
  font-size: var(--cg-t-sm);
  font-weight: var(--cg-w-regular);
  line-height: 1.5;
}
.cg-body-lg {
  font-size: var(--cg-t-base);
  font-weight: var(--cg-w-regular);
  line-height: 1.55;
}
.cg-caption, .cg-meta {
  font-size: var(--cg-t-xxs);
  font-weight: var(--cg-w-regular);
  line-height: 1.4;
  color: var(--cg-ink-subtle);
  letter-spacing: 0.01em;
}
.cg-label {
  font-size: var(--cg-t-xs);
  font-weight: var(--cg-w-medium);
  color: var(--cg-ink-subtle);
  text-transform: none;
}
.cg-kpi {
  font-family: var(--cg-font-display);
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--cg-ink);
}
.cg-code, code {
  font-family: var(--cg-font-mono);
  font-size: 0.9em;
  background: var(--cg-surface-sub);
  padding: 2px 6px;
  border-radius: var(--cg-radius-xs);
}
a, .cg-link {
  color: var(--cg-blue);
  text-decoration: none;
}
a:hover, .cg-link:hover { text-decoration: underline; }