/* ──────────────────────────────────────────────────────────────────
   Design Tokens – CSS Custom Properties (Light Theme)
   Matches approved mockup-slot-page.html
   ────────────────────────────────────────────────────────────────── */

:root {
    /* ── Page & Surface ── */
    --sn-page-bg:       #F8FAFC;
    --sn-card-bg:       #FFFFFF;
    --sn-hero-bg:       #FFFFFF;

    /* ── Text Hierarchy ── */
    --sn-text-primary:  #0F172A;
    --sn-text-body:     #334155;
    --sn-text-secondary:#64748B;
    --sn-text-muted:    #94A3B8;

    /* ── Brand Colors ── */
    --sn-primary:       #5B6CFF;
    --sn-primary-dark:  #4A59E0;
    --sn-primary-light: #8B96FF;
    --sn-primary-soft:  #EEF0FF;
    --sn-gradient:      linear-gradient(135deg, #5B6CFF 0%, #6366F1 100%);
    --sn-gradient-dark: linear-gradient(135deg, #4F5BD5, #5558E3);

    --sn-accent:        #E8408D;
    --sn-accent-hover:  #D4307D;
    --sn-accent-active: #BE185D;
    --sn-accent-light:  #FBD5E8;

    /* ── Borders & Surfaces ── */
    --sn-border:        #E2E8F0;
    --sn-border-light:  #F1F5F9;
    --sn-border-strong: #CBD5E1;
    --sn-surface-hover: #F8FAFC;

    /* ── Status Colors ── */
    --sn-success:       #10B981;
    --sn-success-bg:    #ECFDF5;
    --sn-warning:       #F59E0B;
    --sn-warning-bg:    #FFFBEB;
    --sn-danger:        #EF4444;
    --sn-danger-bg:     #FEF2F2;
    --sn-info:          #3B82F6;
    --sn-info-bg:       #EFF6FF;

    /* ── Typography ── */
    --sn-font:      'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --sn-font-mono: 'JetBrains Mono', 'Fira Code', monospace;

    --sn-font-size:      16px;
    --sn-line-height:    1.65;
    --sn-weight-strong:  600;
    --sn-weight-heading: 700;

    /* ── Sizing ── */
    --sn-container:     1140px;

    /* ── Border Radius ── */
    --sn-radius-xs:     4px;
    --sn-radius-sm:     8px;
    --sn-radius:        12px;
    --sn-radius-lg:     16px;
    --sn-radius-xl:     20px;
    --sn-radius-full:   9999px;

    /* ── Shadows ── */
    --sn-shadow-xs:     0 1px 2px rgba(0,0,0,0.04);
    --sn-shadow-sm:     0 1px 3px rgba(0,0,0,0.05);
    --sn-shadow:        0 2px 8px rgba(0,0,0,0.05);
    --sn-shadow-md:     0 4px 16px rgba(0,0,0,0.06);
    --sn-shadow-lg:     0 12px 32px rgba(0,0,0,0.08);
    --sn-shadow-xl:     0 20px 50px -10px rgba(0,0,0,0.12);

    /* ── Transitions ── */
    --sn-transition:      0.2s ease;
    --sn-transition-fast: 0.15s ease;
    --sn-transition-slow: 0.3s ease;

    /* ── Legacy Aliases (backward compatibility) ── */
    --sn-bg:            var(--sn-page-bg);
    --sn-surface:       var(--sn-card-bg);
    --sn-text:          var(--sn-text-primary);
    --sn-bg-alt:        var(--sn-border-light);
    --sn-muted:         var(--sn-text-secondary);
    --sn-white:         var(--sn-card-bg);
    --sn-dark:          var(--sn-text-primary);
    --sn-container-max: var(--sn-container);
}