/*
 * Snug Concerts Design System — Tokens
 *
 * All design values in one place. Every component references
 * these custom properties instead of hardcoded values.
 *
 * Style: Clean corporate meets music industry.
 * Inspired by: Sofar Sounds, DICE, Songkick.
 */

:root {
    /* ── Colors ──────────────────────────────────── */
    --snug-text:           #1a1a2e;
    --snug-text-muted:     #6b7280;
    --snug-text-light:     #9ca3af;

    --snug-bg:             #ffffff;
    --snug-bg-subtle:      #f8f8f6;
    --snug-bg-card:        #ffffff;
    --snug-bg-hover:       #f3f4f6;

    --snug-accent:         #d97706;
    --snug-accent-hover:   #b45309;
    --snug-accent-light:   #fef3c7;
    --snug-accent-text:    #92400e;

    --snug-border:         #e5e7eb;
    --snug-border-light:   #f3f4f6;

    --snug-success:        #059669;
    --snug-success-bg:     #ecfdf5;
    --snug-error:          #dc2626;
    --snug-error-bg:       #fef2f2;
    --snug-info:           #2563eb;
    --snug-info-bg:        #eff6ff;
    --snug-warning:        #d97706;
    --snug-warning-bg:     #fffbeb;

    /* ── Typography ──────────────────────────────── */
    --snug-font:           -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --snug-font-mono:      'SF Mono', 'Fira Code', monospace;

    --snug-text-xs:        0.75rem;    /* 12px */
    --snug-text-sm:        0.875rem;   /* 14px */
    --snug-text-base:      1rem;       /* 16px */
    --snug-text-lg:        1.125rem;   /* 18px */
    --snug-text-xl:        1.25rem;    /* 20px */
    --snug-text-2xl:       1.5rem;     /* 24px */
    --snug-text-3xl:       1.875rem;   /* 30px */
    --snug-text-4xl:       2.25rem;    /* 36px */

    --snug-leading-tight:  1.25;
    --snug-leading-normal: 1.5;
    --snug-leading-relaxed: 1.75;

    --snug-weight-normal:  400;
    --snug-weight-medium:  500;
    --snug-weight-semibold: 600;
    --snug-weight-bold:    700;

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

    /* ── Borders & Radius ────────────────────────── */
    --snug-radius-sm:      4px;
    --snug-radius:         8px;
    --snug-radius-lg:      12px;
    --snug-radius-xl:      16px;
    --snug-radius-full:    9999px;

    /* ── Shadows ─────────────────────────────────── */
    --snug-shadow-sm:      0 1px 2px rgba(0, 0, 0, 0.05);
    --snug-shadow:         0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
    --snug-shadow-md:      0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.06);
    --snug-shadow-lg:      0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);

    /* ── Transitions ─────────────────────────────── */
    --snug-transition:     150ms ease;
    --snug-transition-slow: 300ms ease;

    /* ── Layout ──────────────────────────────────── */
    --snug-max-width:      800px;
    --snug-max-width-wide: 1280px;
}