/**
 * Löwenschatz Design System — Color Palette
 *
 * Four-scale system with Tailwind-style 50-950 shades:
 *   Primary  (Navy)   #002D5A — base at 800
 *   Secondary (Orange) #FF7F00 — base at 500
 *   Tertiary  (Gold)   #FFB800 — base at 500
 *   Neutral            #F8F9FA — base at 50
 *
 * Plus semantic status colors and component tokens.
 * Usage: var(--primary-800) or var(--secondary-500)
 */

:root {

    /* ===================================
     * PRIMARY (Navy) — Base: #002D5A at 800
     * Brand authority, headings, dark backgrounds
     * WCAG: AA on white at 500+, AAA at 600+
     * =================================== */
    --primary-50:  #EDF2F8;
    --primary-100: #D6E1EE;
    --primary-200: #ADBFD8;
    --primary-300: #849DC2;
    --primary-400: #5B7BAC;
    --primary-500: #3A5F93;
    --primary-600: #1E4A7B;
    --primary-700: #0F3B6A;
    --primary-800: #002D5A;  /* ← base */
    --primary-900: #001E3D;
    --primary-950: #001228;

    /* ===================================
     * SECONDARY (Orange) — Base: #FF7F00 at 500
     * CTAs, links, energy, action
     * WCAG: AA on white at 700+
     * =================================== */
    --secondary-50:  #FFF6ED;
    --secondary-100: #FFEBD6;
    --secondary-200: #FFD4AD;
    --secondary-300: #FFB978;
    --secondary-400: #FF9C3D;
    --secondary-500: #FF7F00;  /* ← base */
    --secondary-600: #DB6C00;
    --secondary-700: #AD5500;
    --secondary-800: #803F00;
    --secondary-900: #522800;
    --secondary-950: #331900;

    /* ===================================
     * TERTIARY (Gold) — Base: #FFB800 at 500
     * Accents, premium, highlights
     * WCAG: Use 700+ for text on white
     * =================================== */
    --tertiary-50:  #FFFAED;
    --tertiary-100: #FFF3D6;
    --tertiary-200: #FFE5AD;
    --tertiary-300: #FFD678;
    --tertiary-400: #FFC73D;
    --tertiary-500: #FFB800;  /* ← base */
    --tertiary-600: #DB9E00;
    --tertiary-700: #AD7D00;
    --tertiary-800: #805C00;
    --tertiary-900: #523B00;
    --tertiary-950: #332500;

    /* ===================================
     * NEUTRAL — Base: #F8F9FA at 50
     * Backgrounds, text, borders
     * =================================== */
    --neutral-50:  #F8F9FA;  /* ← base */
    --neutral-100: #F0F1F3;
    --neutral-200: #E1E3E6;
    --neutral-300: #C4C7CC;
    --neutral-400: #A8ABB2;
    --neutral-500: #8C9098;
    --neutral-600: #6E7279;
    --neutral-700: #53575D;
    --neutral-800: #3A3D42;
    --neutral-900: #222528;
    --neutral-950: #131517;

    /* ===================================
     * STATUS COLORS
     * =================================== */
    --success-50:  #F0FDF4;
    --success-100: #DCFCE7;
    --success-500: #22C55E;
    --success-600: #16A34A;
    --success-700: #15803D;
    --success-900: #14532D;

    --warning-50:  #FFFBEB;
    --warning-100: #FEF3C7;
    --warning-500: #F59E0B;
    --warning-600: #D97706;
    --warning-700: #B45309;
    --warning-900: #78350F;

    --error-50:  #FEF2F2;
    --error-100: #FEE2E2;
    --error-500: #EF4444;
    --error-600: #DC2626;
    --error-700: #B91C1C;
    --error-900: #7F1D1D;

    --info-50:  #ECFEFF;
    --info-100: #CFFAFE;
    --info-500: #06B6D4;
    --info-600: #0891B2;
    --info-700: #0E7490;
    --info-900: #164E63;

    /* ===================================
     * SEMANTIC TOKENS
     * Map scale values to UI roles
     * =================================== */

    /* Text */
    --text-heading:   var(--primary-800);
    --text-body:      var(--neutral-700);
    --text-secondary: var(--neutral-500);
    --text-muted:     var(--neutral-400);
    --text-inverse:   #FFFFFF;
    --text-link:      var(--secondary-500);
    --text-link-hover: var(--secondary-600);

    /* Backgrounds */
    --bg-page:       #FFFFFF;
    --bg-surface:    var(--neutral-50);
    --bg-muted:      var(--neutral-100);
    --bg-dark:       var(--primary-800);
    --bg-dark-deep:  var(--primary-900);
    --bg-accent:     var(--secondary-500);

    /* Borders */
    --border-light:  var(--neutral-200);
    --border-medium: var(--neutral-300);
    --border-strong: var(--neutral-400);

    /* Buttons */
    --button-primary-bg:    var(--secondary-500);
    --button-primary-hover: var(--secondary-600);
    --button-primary-text:  #FFFFFF;

    /* Cards */
    --card-bg:           #FFFFFF;
    --card-border:       var(--neutral-200);
    --card-shadow:       rgba(0, 45, 90, 0.08);
    --card-hover-shadow: rgba(0, 45, 90, 0.15);

    /* Badges */
    --badge-primary-bg:   var(--secondary-500);
    --badge-primary-text: #FFFFFF;
    --badge-premium-bg:   var(--tertiary-500);
    --badge-premium-text: var(--primary-900);

    /* ===================================
     * GRADIENTS
     * =================================== */
    --gradient-primary:   linear-gradient(135deg, var(--secondary-400) 0%, var(--secondary-600) 100%);
    --gradient-navy:      linear-gradient(135deg, var(--primary-600) 0%, var(--primary-900) 100%);
    --gradient-hero:      radial-gradient(ellipse at center, var(--primary-700) 0%, var(--primary-900) 100%);

    /* ===================================
     * BORDER RADIUS
     * =================================== */
    --radius-sm:      0.375rem;
    --radius-md:      0.5rem;
    --radius-lg:      0.75rem;
    --radius-xl:      1rem;
    --radius-2xl:     1.5rem;
    --radius-card:    1.5rem;
    --radius-organic: 1.5rem;
    --radius-full:    9999px;

    /* ===================================
     * SHADOWS
     * Navy-tinted for brand cohesion
     * =================================== */
    --shadow-sm: 0 1px 2px 0 rgba(0, 45, 90, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 45, 90, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 45, 90, 0.1);
    --shadow-xl: 0 20px 25px -5px rgba(0, 45, 90, 0.1);

    /* ===================================
     * SPACING
     * =================================== */
    --spacing-xs:  0.5rem;
    --spacing-sm:  1rem;
    --spacing-md:  1.5rem;
    --spacing-lg:  2rem;
    --spacing-xl:  3rem;
    --spacing-2xl: 4rem;

    /* ===================================
     * PAGE SYSTEM TOKENS
     * Editorial + partner pages only
     * =================================== */
    --shell-max: 1400px;
    --content-max: 760px;
    --intro-max: 48rem;
    --results-gap: var(--spacing-sm);
    --section-gap: var(--spacing-xl);

    /* Surface cards */
    --surface-card-bg: #FFFFFF;
    --surface-card-border: var(--neutral-100);
    --surface-card-shadow: var(--shadow-sm);
    --surface-card-shadow-hover: var(--shadow-lg);
    --surface-card-radius: var(--radius-card);
    --surface-card-padding: var(--spacing-lg);
    --surface-card-padding-compact: var(--spacing-md);

    /* Pills / chips / badges */
    --pill-radius: var(--radius-full);
    --pill-padding-y: 0.45rem;
    --pill-padding-x: 0.9rem;
    --pill-border: 1px solid var(--neutral-200);
    --pill-bg: var(--neutral-50);
    --pill-text: var(--neutral-700);
    --chip-bg-active: var(--primary-800);
    --chip-border-active: var(--primary-800);
    --chip-text-active: #FFFFFF;
    --badge-radius: var(--radius-full);
    --badge-padding-y: 0.35rem;
    --badge-padding-x: 0.75rem;
    --badge-text-transform: uppercase;

    /* Focus / motion */
    --focus-ring-color: var(--secondary-500);
    --focus-ring-shadow: 0 0 0 3px var(--secondary-200), 0 0 0 5px var(--focus-ring-color);
    --focus-ring-shadow-soft: 0 0 0 3px rgba(255, 127, 0, 0.12);
    --motion-hover-lift: 2px;
    --motion-card-scale: 1.04;

    /* ===================================
     * TRANSITIONS
     * =================================== */
    --transition-fast: 150ms ease-in-out;
    --transition-base: 250ms ease-in-out;
    --transition-slow: 350ms ease-in-out;
}

/* Component: Primary Button */
.btn-primary {
    background: var(--gradient-primary);
    color: var(--button-primary-text);
    padding: var(--spacing-sm) var(--spacing-lg);
    border-radius: var(--radius-md);
    border: none;
    transition: var(--transition-base);
    font-weight: 600;
    cursor: pointer;
}
.btn-primary:hover {
    background: var(--button-primary-hover);
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
}