/**
 * CanGo App Empire – zentrales Design-System
 * Einbinden mit: <link rel="stylesheet" href="/css/empire-theme.css">
 * Gilt für alle Unterseiten (Tool-Details, Marktplatz, etc.)
 */

:root {
    /* Graustufen */
    --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;
    --gray-950: #030712;

    /* Primary – Orange */
    --primary-50: #FFF7ED;
    --primary-100: #FFEDD5;
    --primary-200: #FED7AA;
    --primary-300: #FDBA74;
    --primary-400: #FB923C;
    --primary-500: #F97316;
    --primary-600: #EA580C;
    --primary-700: #C2410C;

    /* Accent */
    --accent-400: #F87171;
    --accent-500: #EF4444;
    --accent-600: #DC2626;
    --accent-700: #B91C1C;

    /* Semantic */
    --success: #10B981;
    --warning: #F59E0B;

    /* Empire Dark – Navy, edler Look */
    --bg: #050810;
    --bg-elevated: #0a0f1a;
    --bg-surface: #080d18;
    --bg-hover: #0d1220;
    --text: var(--gray-50);
    --text-light: var(--gray-400);
    --text-muted: var(--gray-500);
    --border: rgba(220, 228, 240, 0.12);
    --border-hover: rgba(220, 228, 240, 0.2);
    --shadow: rgba(0, 0, 0, 0.45);

    /* Karten-Verlauf: oben links minimal heller → unten rechts dunkler Navy */
    --empire-gradient: linear-gradient(135deg, #0a0f1a 0%, #080d18 35%, #060a14 70%, #050810 100%);
    --empire-shadow: 0 10px 40px rgba(0, 0, 0, 0.5), 0 4px 20px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* Basis: Seiten, die nur diese Datei einbinden, bekommen mindestens Hintergrund & Schrift */
body.empire-theme,
.empire-theme {
    font-family: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
}

/* Utility: Karten-Look für beliebige Boxen */
.empire-card {
    background: var(--empire-gradient);
    border: 1px solid var(--border);
    border-radius: 1rem;
    box-shadow: var(--empire-shadow);
}

.empire-card:hover {
    border-color: var(--border-hover);
}