/* Fabricshot — design tokens → CSS variables. Source: design-system/tokens.json (vibe: tactile warmth) */
:root {
  /* primary — охра/амбер */
  --color-primary-50:  #FBF6EC;
  --color-primary-100: #F5E9CF;
  --color-primary-200: #EAD2A1;
  --color-primary-300: #DCB66E;
  --color-primary-400: #C99A45;
  --color-primary-500: #B07A2E;
  --color-primary-600: #8F6122;
  --color-primary-700: #6E4A1B;
  --color-primary-800: #4D3413;
  --color-primary-900: #2C1E0B;

  /* secondary — индиго */
  --color-secondary-50:  #F0F2F7;
  --color-secondary-100: #DBE0EC;
  --color-secondary-300: #9AA6C6;
  --color-secondary-500: #3E4A78;
  --color-secondary-700: #2A3354;
  --color-secondary-900: #161B30;

  /* accent — терракота-коралл (CTA) */
  --color-accent-500: #D9533B;
  --color-accent-600: #B53F2B;
  --color-accent-contrast: #FBF6EC;

  /* neutral — тёплый кремовый → уголь */
  --color-neutral-50:  #FBF8F2;
  --color-neutral-100: #F4EEE3;
  --color-neutral-200: #E7DECF;
  --color-neutral-300: #CFC3AE;
  --color-neutral-400: #A99C84;
  --color-neutral-500: #7C7160;
  --color-neutral-600: #574E41;
  --color-neutral-700: #3C352C;
  --color-neutral-800: #25201A;
  --color-neutral-900: #15110D;

  --color-success: #5B8C5A;
  --color-warning: #C49A2C;
  --color-danger:  #B23A2E;
  --color-info:    #3E4A78;

  --surface-bg:       #FBF8F2;
  --surface-elevated: #FFFFFF;
  --surface-subtle:   #F4EEE3;
  --surface-overlay:  rgba(21, 17, 13, 0.5);

  /* typography */
  --font-heading: "Manrope", system-ui, sans-serif;
  --font-body: "Spectral", Georgia, serif;
  --fs-xs: 12px; --fs-sm: 14px; --fs-base: 16px; --fs-md: 18px;
  --fs-lg: 24px; --fs-xl: 34px; --fs-2xl: 52px; --fs-3xl: 72px;
  --lh-tight: 1.15; --lh-snug: 1.3; --lh-normal: 1.6; --lh-relaxed: 1.8;
  --ls-tight: -0.02em; --ls-wide: 0.06em; --ls-label: 0.18em;

  /* spacing */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
  --space-9: 96px; --space-10: 128px;

  /* radius */
  --radius-sm: 4px; --radius-md: 8px; --radius-lg: 16px; --radius-xl: 24px; --radius-full: 9999px;

  /* shadows (тёплый коричневый оттенок) */
  --shadow-sm: 0 1px 3px rgba(76, 52, 19, 0.05);
  --shadow-md: 0 6px 20px rgba(76, 52, 19, 0.08);
  --shadow-lg: 0 16px 40px rgba(76, 52, 19, 0.12);
  --shadow-xl: 0 28px 72px rgba(76, 52, 19, 0.16);

  /* motion */
  --dur-fast: 200ms; --dur-normal: 300ms; --dur-slow: 500ms;
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-enter: cubic-bezier(0.16, 1, 0.3, 1);

  --container: 1200px;
}