/* ═══════════════════════════════════════════════════════════════
   TAPSI Design System — Design Tokens
   Based on VENTO BOX clean, modern aesthetic
   ═══════════════════════════════════════════════════════════════ */

:root {

    /* ── Colors: Primary (Green) ── */
    --tapsi-50:  #f0fdf4;
    --tapsi-100: #dcfce7;
    --tapsi-200: #bbf7d0;
    --tapsi-300: #86efac;
    --tapsi-400: #4ade80;
    --tapsi-500: #22c55e;
    --tapsi-600: #16a34a;
    --tapsi-700: #15803d;
    --tapsi-800: #166534;
    --tapsi-900: #14532d;

    /* ── Colors: Neutral (Gray) ── */
    --gray-50:  #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;

    /* ── Colors: Semantic ── */
    --color-success: #22c55e;
    --color-warning: #f59e0b;
    --color-error:   #ef4444;
    --color-info:    #3b82f6;

    /* ── Colors: Surface ── */
    --surface-primary:   #ffffff;
    --surface-secondary: #f9fafb;
    --surface-tertiary:  #f3f4f6;

    /* ── Typography ── */
    --font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-size-xs:   0.75rem;    /* 12px */
    --font-size-sm:   0.875rem;   /* 14px */
    --font-size-base: 1rem;       /* 16px */
    --font-size-lg:   1.125rem;   /* 18px */
    --font-size-xl:   1.25rem;    /* 20px */
    --font-size-2xl:  1.5rem;     /* 24px */
    --font-size-3xl:  1.875rem;   /* 30px */
    --font-size-4xl:  2.25rem;    /* 36px */
    --font-size-5xl:  3rem;       /* 48px */

    --font-weight-regular:  400;
    --font-weight-medium:   500;
    --font-weight-semibold: 600;
    --font-weight-bold:     700;
    --font-weight-extrabold:800;

    --line-height-tight:  1.1;
    --line-height-snug:   1.3;
    --line-height-normal: 1.6;
    --line-height-relaxed:1.75;

    --letter-spacing-tight: -0.025em;
    --letter-spacing-normal: 0;
    --letter-spacing-wide:   0.05em;

    /* ── Spacing ── */
    --space-0:  0;
    --space-1:  0.25rem;   /* 4px */
    --space-2:  0.5rem;    /* 8px */
    --space-3:  0.75rem;   /* 12px */
    --space-4:  1rem;      /* 16px */
    --space-5:  1.25rem;   /* 20px */
    --space-6:  1.5rem;    /* 24px */
    --space-8:  2rem;      /* 32px */
    --space-10: 2.5rem;    /* 40px */
    --space-12: 3rem;      /* 48px */
    --space-16: 4rem;      /* 64px */
    --space-20: 5rem;      /* 80px */
    --space-24: 6rem;      /* 96px */

    /* ── Border Radius ── */
    --radius-sm:  6px;
    --radius-md:  8px;
    --radius-lg:  12px;
    --radius-xl:  16px;
    --radius-2xl: 20px;
    --radius-full: 9999px;

    /* ── Shadows ── */
    --shadow-xs:  0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-md:  0 4px 6px -1px rgba(0, 0, 0, 0.06), 0 2px 4px -2px rgba(0, 0, 0, 0.04);
    --shadow-lg:  0 10px 15px -3px rgba(0, 0, 0, 0.07), 0 4px 6px -4px rgba(0, 0, 0, 0.04);
    --shadow-xl:  0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.04);
    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
    --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.04);

    /* ── Transitions ── */
    --transition-fast:    150ms ease;
    --transition-base:    200ms ease;
    --transition-slow:    300ms ease;
    --transition-spring:  500ms cubic-bezier(0.34, 1.56, 0.64, 1);

    /* ── Z-Index ── */
    --z-dropdown: 10;
    --z-sticky:   20;
    --z-overlay:  30;
    --z-modal:    40;
    --z-toast:    50;

    /* ── Layout ── */
    --container-sm:  640px;
    --container-md:  768px;
    --container-lg:  1024px;
    --container-xl:  1200px;
    --container-2xl: 1400px;
}