/**
 * AbhiHub — 01_tokens.css
 * Single source of truth for all design tokens.
 * Import this FIRST. No rules here, only :root variables.
 */

:root {
    /* ── Brand Colors ── */
    --brand-yellow:       #FFE769;
    --brand-green:        #62EEA8;
    --brand-peach:        #FFE4BA;
    --brand-cream:        #FFF6E8;

    /* ── Primary Palette (Blue) ── */
    --primary-50:         #eff6ff;
    --primary-100:        #dbeafe;
    --primary-200:        #bfdbfe;
    --primary-300:        #93c5fd;
    --primary-400:        #60a5fa;
    --primary-500:        #3b82f6;
    --primary-600:        #2563eb;
    --primary-700:        #1d4ed8;
    --primary-800:        #1e40af;
    --primary-900:        #1e3a8a;

    /* ── Semantic Surfaces ── */
    --surface:            #ffffff;
    --surface-elevated:   #ffffff;
    --bg-primary:         #fefefe;
    --bg-secondary:       #f8fafc;
    --bg-tertiary:        #f1f5f9;

    /* ── Text ── */
    --text-primary:       #1a202c;
    --text-secondary:     #4a5568;
    --text-tertiary:      #718096;
    --text-inverse:       #ffffff;
    --text-dark:          #000000;
    --text-gray-dark:     #374151;
    --text-gray-medium:   #6b7280;
    --text-gray-light:    #9ca3af;

    /* ── Borders ── */
    --border-light:       #e2e8f0;
    --border-medium:      #cbd5e0;
    --border-dark:        #a0aec0;

    /* ── Semantic Accents ── */
    --accent-blue:        #3b82f6;
    --accent-purple:      #8b5cf6;
    --accent-pink:        #ec4899;
    --accent-green:       #10b981;
    --accent-green-dark:  #059669;
    --accent-orange:      #f59e0b;
    --accent-red:         #ef4444;

    /* ── Gray Scale ── */
    --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;

    /* ── Shadows ── */
    --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 0 rgba(0,0,0,0.06);
    --shadow-md:          0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
    --shadow-lg:          0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
    --shadow-xl:          0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);
    --shadow-2xl:         0 25px 50px -12px rgba(0,0,0,0.25);
    --shadow-blue:        0 2px 8px rgba(37,99,235,0.09);
    --shadow-blue-md:     0 4px 16px rgba(37,99,235,0.09);
    --shadow-blue-lg:     0 6px 20px rgba(59,130,246,0.3);

    /* ── Spacing ── */
    --space-1:  0.25rem;
    --space-2:  0.5rem;
    --space-3:  0.75rem;
    --space-4:  1rem;
    --space-5:  1.25rem;
    --space-6:  1.5rem;
    --space-8:  2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;

    /* ── Typography ── */
    --font-primary:  'Kanit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    --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;

    /* ── Border Radius ── */
    --radius-sm:   0.375rem;
    --radius-md:   0.5rem;
    --radius-lg:   0.75rem;
    --radius-xl:   1rem;
    --radius-2xl:  1.5rem;
    --radius-full: 9999px;

    /* ── Transitions ── */
    --transition-fast:   0.15s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-normal: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow:   0.3s  cubic-bezier(0.4, 0, 0.2, 1);

    /* ── Gradients ── */
    --gradient-primary:    linear-gradient(135deg, var(--primary-600) 0%, var(--primary-700) 100%);
    --gradient-primary-h:  linear-gradient(90deg,  var(--primary-600) 60%, var(--primary-700) 100%);
    --gradient-secondary:  linear-gradient(135deg, var(--accent-purple) 0%, var(--accent-pink) 100%);
    --gradient-surface:    linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
    --gradient-brand:      linear-gradient(135deg, var(--brand-yellow), var(--brand-green));
    --gradient-brand-warm: linear-gradient(135deg, var(--brand-peach), var(--brand-yellow));
    --gradient-green:      linear-gradient(135deg, var(--accent-green) 0%, var(--accent-green-dark) 100%);

    /* ── Layout ── */
    --nav-bottom-height: 80px;
    --max-content-width: 1200px;
}