/* =============================================================
   CarpinAI · Design System Tokens
   Global CSS custom properties used across the design system docs
   and any product surface that adopts it.
   ============================================================= */

:root {
  /* ---- Brand · carpin (primary, warm brown — heritage) ---- */
  --carpin-50:  #FBF6EF;
  --carpin-100: #F4E7D1;
  --carpin-200: #E8CB9F;
  --carpin-300: #D9AC6E;
  --carpin-400: #C68B45;
  --carpin-500: #B9743B;   /* canonical (from source SVG) */
  --carpin-600: #9F5E2E;
  --carpin-700: #844D25;
  --carpin-800: #5A3418;
  --carpin-900: #2A1808;

  /* ---- Sub-brand · web (trust blue, accesible / SMB) ---- */
  --web-50:  #EEF2FF;
  --web-100: #E0E7FF;
  --web-200: #C7D2FE;
  --web-300: #A5B4FC;
  --web-400: #818CF8;
  --web-500: #6366F1;
  --web-600: #4F46E5;
  --web-700: #4338CA;
  --web-800: #3730A3;
  --web-900: #1E1B4B;

  /* ---- Sub-brand · edge (electric cyan, pro / enterprise) ---- */
  --edge-50:  #F0FDFA;
  --edge-100: #CCFBF1;
  --edge-200: #99F6E4;
  --edge-300: #5EEAD4;   /* canonical */
  --edge-400: #2DD4BF;
  --edge-500: #14B8A6;
  --edge-600: #0D9488;
  --edge-700: #0F766E;
  --edge-800: #115E59;
  --edge-900: #042F2E;

  /* ---- Sub-brand · labs (emerald — natural, deep green) ---- */
  --labs-50:  #ECFDF5;
  --labs-100: #D1FAE5;
  --labs-200: #A7F3D0;
  --labs-300: #6EE7B7;
  --labs-400: #34D399;
  --labs-500: #10B981;   /* canonical */
  --labs-600: #059669;
  --labs-700: #047857;
  --labs-800: #065F46;
  --labs-900: #064E3B;

  /* ---- Neutrals · warm-tinted (slight brown undertone) ---- */
  --neutral-0:   #FFFFFF;
  --neutral-50:  #FAF8F4;
  --neutral-100: #F2EFE8;
  --neutral-200: #E4DFD2;
  --neutral-300: #C9C2B0;
  --neutral-400: #9C9485;
  --neutral-500: #6E665A;
  --neutral-600: #4F483E;
  --neutral-700: #36312A;
  --neutral-800: #1F1B16;
  --neutral-900: #0E0B07;

  /* ---- Semantic ---- */
  --success-50:  #E6F4EC;
  --success-500: #2E9461;
  --success-700: #1B6A41;

  --warning-50:  #FFF3DD;
  --warning-500: #D9870E;
  --warning-700: #8F5400;

  --danger-50:   #FBE7E4;
  --danger-500:  #C5392B;
  --danger-700:  #82221A;

  --info-50:     #EEF2FF;
  --info-500:    #6366F1;
  --info-700:    #4338CA;

  /* ---- Surfaces ---- */
  --surface-canvas:  var(--neutral-50);
  --surface-raised:  var(--neutral-0);
  --surface-sunken:  var(--neutral-100);
  --surface-inverse: var(--neutral-900);

  /* ---- Text ---- */
  --text-primary:   var(--neutral-900);
  --text-secondary: var(--neutral-600);
  --text-muted:     var(--neutral-400);
  --text-inverse:   var(--neutral-0);
  --text-brand:     var(--carpin-700);

  /* ---- Border ---- */
  --border-subtle: var(--neutral-200);
  --border-strong: var(--neutral-300);
  --border-focus:  var(--carpin-500);

  /* ---- Type families ---- */
  --font-display: "VT323", ui-monospace, Menlo, monospace;
  --font-pixel:   "Press Start 2P", ui-monospace, Menlo, monospace;
  --font-sans:    "Space Grotesk", ui-sans-serif, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ---- Type scale (rem assuming 16px root) ---- */
  --text-xs:   0.75rem;   /* 12 */
  --text-sm:   0.875rem;  /* 14 */
  --text-base: 1rem;      /* 16 */
  --text-lg:   1.125rem;  /* 18 */
  --text-xl:   1.375rem;  /* 22 */
  --text-2xl:  1.75rem;   /* 28 */
  --text-3xl:  2.25rem;   /* 36 */
  --text-4xl:  3rem;      /* 48 */
  --text-5xl:  4rem;      /* 64 */

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

  /* ---- Radius ---- */
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   20px;
  --radius-pill: 999px;

  /* ---- Shadow ---- */
  --shadow-xs: 0 1px 2px rgba(14,11,7,0.06);
  --shadow-sm: 0 2px 6px rgba(14,11,7,0.07), 0 1px 2px rgba(14,11,7,0.05);
  --shadow-md: 0 6px 18px -4px rgba(14,11,7,0.12), 0 2px 6px rgba(14,11,7,0.06);
  --shadow-lg: 0 18px 40px -12px rgba(14,11,7,0.18), 0 4px 10px rgba(14,11,7,0.06);
  --shadow-stamp: 0 10px 0 -2px rgba(14,11,7,0.14); /* sticker-style hard shadow */

  /* ---- Motion ---- */
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 360ms;
}