/* tokens.css - Design tokens for colors, spacing, typography, radii, and shadows. */
/* Sections: Color palette, type scale, spacing/radius/shadow tokens, and semantic aliases. */

/* Core design token declarations */

/* Primary style rules */

:root {

  

  --clr-primary-50:  #f0fdf4;
  --clr-primary-100: #dcfce7;
  --clr-primary-200: #bbf7d0;
  --clr-primary-300: #86efac;
  --clr-primary-400: #4ade80;
  --clr-primary-500: #22c55e;
  --clr-primary-600: #16a34a;
  --clr-primary-700: #15803d;
  --clr-primary-800: #166534;
  --clr-primary-900: #14532d;

  --clr-amber-50:  #fffbeb;
  --clr-amber-100: #fef3c7;
  --clr-amber-200: #fde68a;
  --clr-amber-300: #fcd34d;
  --clr-amber-400: #fbbf24;
  --clr-amber-500: #f59e0b;
  --clr-amber-600: #d97706;
  --clr-amber-700: #b45309;

  --clr-red-50:  #fef2f2;
  --clr-red-100: #fee2e2;
  --clr-red-400: #f87171;
  --clr-red-500: #ef4444;
  --clr-red-600: #dc2626;
  --clr-red-700: #b91c1c;

  --clr-stone-50:  #fafaf9;
  --clr-stone-100: #f5f5f4;
  --clr-stone-200: #e7e5e4;
  --clr-stone-300: #d6d3d1;
  --clr-stone-400: #a8a29e;
  --clr-stone-500: #78716c;
  --clr-stone-600: #57534e;
  --clr-stone-700: #44403c;
  --clr-stone-800: #292524;
  --clr-stone-900: #1c1917;

  

  --clr-bg:             var(--clr-stone-50);
  --clr-surface:        #ffffff;
  --clr-surface-2:      var(--clr-stone-100);
  --clr-surface-3:      var(--clr-stone-200);

  --clr-text:           var(--clr-stone-900);
  --clr-text-secondary: var(--clr-stone-600);
  --clr-text-muted:     var(--clr-stone-400);
  --clr-text-inverse:   #ffffff;
  --clr-text-on-primary:#ffffff;

  --clr-border:         var(--clr-stone-200);
  --clr-border-strong:  var(--clr-stone-300);

  --clr-brand:          var(--clr-primary-600);
  --clr-brand-hover:    var(--clr-primary-700);
  --clr-brand-active:   var(--clr-primary-800);
  --clr-brand-light:    var(--clr-primary-50);
  --clr-brand-medium:   var(--clr-primary-100);

  --clr-warning:        var(--clr-amber-500);
  --clr-warning-bg:     var(--clr-amber-50);
  --clr-warning-text:   var(--clr-amber-700);

  --clr-danger:         var(--clr-red-600);
  --clr-danger-bg:      var(--clr-red-50);
  --clr-danger-text:    var(--clr-red-700);

  --clr-success:        var(--clr-primary-600);
  --clr-success-bg:     var(--clr-primary-50);
  --clr-success-text:   var(--clr-primary-800);

  --clr-footer-bg:      var(--clr-stone-900);
  --clr-footer-text:    var(--clr-stone-400);
  --clr-footer-heading: var(--clr-stone-100);
  --clr-footer-link:    var(--clr-stone-300);

  

  --font-display: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, Ubuntu, sans-serif;
  --font-body:    -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, Ubuntu, sans-serif;
  --font-mono:    'Courier New', Courier, monospace;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;
  --text-5xl:  3rem;
  --text-6xl:  3.75rem;

  --fw-normal:    400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;
  --fw-extrabold: 800;

  --lh-tight:   1.2;
  --lh-snug:    1.375;
  --lh-normal:  1.5;
  --lh-relaxed: 1.625;
  --lh-loose:   1.8;

  --ls-tight:  -0.025em;
  --ls-normal:  0;
  --ls-wide:    0.025em;
  --ls-wider:   0.05em;
  --ls-widest:  0.1em;

  

  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.25rem;
  --sp-6:  1.5rem;
  --sp-8:  2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;
  --sp-32: 8rem;

  

  --container-max:      1200px;
  --container-padding:  1.25rem;
  --header-height:      64px;

  

  --radius-sm:   4px;
  --radius-base: 8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   20px;
  --radius-2xl:  24px;
  --radius-3xl:  32px;
  --radius-full: 9999px;

  

  --shadow-xs:  0 1px 2px 0 rgba(0,0,0,0.05);
  --shadow-sm:  0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px -1px rgba(0,0,0,0.1);
  --shadow-md:  0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);
  --shadow-lg:  0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);
  --shadow-xl:  0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1);
  --shadow-2xl: 0 25px 50px -12px rgba(0,0,0,0.25);
  --shadow-brand:    0 4px 16px -2px rgba(22,163,74,0.25);
  --shadow-brand-lg: 0 8px 32px -4px rgba(22,163,74,0.30);

  

  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in:      cubic-bezier(0.4, 0, 1, 1);
  --ease-out:     cubic-bezier(0, 0, 0.2, 1);
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);

  --duration-fast:   150ms;
  --duration-normal: 250ms;
  --duration-slow:   400ms;

  --transition-base:   var(--duration-normal) var(--ease-default);
  --transition-fast:   var(--duration-fast) var(--ease-default);
  --transition-slow:   var(--duration-slow) var(--ease-out);
  --transition-spring: 300ms var(--ease-spring);

  

  --z-base:    0;
  --z-raised:  10;
  --z-sticky:  100;
  --z-header:  200;
  --z-nav:     300;
  --z-modal:   400;
  --z-toast:   500;
  --z-tooltip: 600;

  --focus-ring:        0 0 0 3px rgba(22,163,74,0.35);
  --focus-ring-offset: 2px;
}

/* Responsive overrides */

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast:    1ms;
    --duration-normal:  1ms;
    --duration-slow:    1ms;
    --transition-base:  1ms;
    --transition-fast:  1ms;
    --transition-slow:  1ms;
    --transition-spring:1ms;
  }
}