/* CSNStore design tokens — ported from Claude Design export */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&family=Work+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Space+Mono:wght@400;700&display=swap');

:root {
  --terracotta-50:  #FBEEE9;
  --terracotta-100: #F6D8CC;
  --terracotta-200: #EFB9A5;
  --terracotta-300: #E89A7E;
  --terracotta-400: #E07A5F;
  --terracotta-500: #CB6145;
  --terracotta-600: #A94E36;
  --terracotta-700: #833C2A;

  --teal-50:   #E4F3F1;
  --teal-100:  #BFE3DE;
  --teal-200:  #7FC7BD;
  --teal-300:  #4FB1A4;
  --teal-400:  #2A9D8F;
  --teal-500:  #218579;
  --teal-600:  #1A6960;

  --alabaster:  #FAF9F6;
  --paper:      #FFFFFF;
  --sand-50:    #F3F1EC;
  --sand-100:   #E9E6DE;
  --sand-200:   #D8D3C8;
  --stone-400:  #9A948A;
  --stone-600:  #5C574F;
  --soft-black: #222222;
  --ink:        #141414;

  --success: #2A9D8F;
  --warning: #E9A23B;
  --danger:  #D1495B;
  --info:    #3D7EA6;

  --bg-app:         var(--alabaster);
  --surface-card:   var(--paper);
  --surface-sunken: var(--sand-50);

  --text-primary:   var(--soft-black);
  --text-heading:   var(--ink);
  --text-secondary: var(--stone-600);
  --text-muted:     var(--stone-400);
  --text-on-brand:  #FFFFFF;

  --brand:          var(--terracotta-400);
  --brand-hover:    var(--terracotta-500);
  --brand-press:    var(--terracotta-600);
  --brand-soft:     var(--terracotta-50);

  --accent:         var(--teal-400);
  --accent-hover:   var(--teal-500);
  --accent-soft:    var(--teal-50);

  --border:         var(--sand-100);
  --border-strong:  var(--sand-200);
  --divider:        var(--sand-100);

  --link:           var(--terracotta-500);
  --link-hover:     var(--terracotta-600);

  --focus-ring:     var(--teal-400);

  --font-display: 'Poppins', ui-sans-serif, system-ui, sans-serif;
  --font-body:    'Work Sans', ui-sans-serif, system-ui, sans-serif;
  --font-mono:    'Space Mono', ui-monospace, 'SFMono-Regular', monospace;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-md:   1.125rem;
  --text-lg:   1.375rem;
  --text-xl:   1.75rem;
  --text-2xl:  2.25rem;
  --text-3xl:  3rem;
  --text-4xl:  4rem;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-black:    800;

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

  --ls-tight:  -0.02em;
  --ls-normal: 0;
  --ls-wide:   0.04em;
  --ls-caps:   0.08em;

  --space-0:  0;
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-7:  2.5rem;
  --space-8:  3rem;
  --space-9:  4rem;
  --space-10: 5rem;
  --space-12: 6rem;

  --container-max: 1360px;
  --gutter: var(--space-5);
  --section-y: var(--space-10);

  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-pill: 999px;
  --radius-round: 50%;

  --border-w: 1px;
  --border-w-strong: 1.5px;

  --shadow-xs: 0 1px 2px rgba(60, 40, 30, 0.06);
  --shadow-sm: 0 2px 6px rgba(60, 40, 30, 0.08);
  --shadow-md: 0 6px 16px rgba(60, 40, 30, 0.10);
  --shadow-lg: 0 14px 32px rgba(60, 40, 30, 0.12);
  --shadow-brand: 0 8px 20px rgba(224, 122, 95, 0.28);

  --ring: 0 0 0 3px rgba(42, 157, 143, 0.35);

  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:   120ms;
  --dur-med:    220ms;
  --dur-slow:   380ms;
}