/*
 * skin-dark.css — QuadroPlace "Dark Violet" skin
 *
 * A skin-default.css-ben definiált tokeneket írja felül.
 * Betöltési sorrend: index-modern.css UTÁN, base.css ELŐTT.
 * Így a --qp-* tokeneket is felülírja, amelyeket index-modern.css definiál.
 *
 * Paletta: mélykék háttér + violet/indigo akcent (#818cf8)
 */

:root {
    /* ─── TYPOGRAPHY (skin-default.css-ből öröklés helyett explicit definiálva,
       mert a skin-dark.css skin-default.css nélkül töltődik be) ─────────────── */

    --font-body: "Inter", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    --font-heading: "Inter", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    --font-ui: "Inter", system-ui, sans-serif;
    --font-mono: 'Courier New', Courier, monospace;

    /* ─── BASE TOKENS (skin-default.css felülírása) ───────────────────────── */

    --color-primary: #818cf8;
    --color-primary-dark: #6366f1;
    --color-primary-gradient: linear-gradient(90deg, #4338ca, #818cf8);

    --color-bg: linear-gradient(180deg, #0f172a 0%, #020617 100%);
    --color-surface: #0f172a;
    --color-surface-alt: rgba(15, 23, 42, 0.95);
    --color-surface-inset: #1e293b;
    --color-surface-glass: rgba(15, 23, 42, 0.9);
    --color-surface-danger: #1a0a1a;

    --color-text: #e2e8f0;
    --color-text-muted: #94a3b8;
    --color-text-muted-2: #64748b;
    --color-text-subtle: #cbd5e1;
    --color-text-on-primary: #ffffff;
    --color-text-link: #818cf8;
    --color-text-link-hover: #c7d2fe;

    --color-border: rgba(148, 163, 184, 0.18);
    --color-border-light: rgba(148, 163, 184, 0.07);
    --color-border-muted: rgba(148, 163, 184, 0.25);

    --color-accent: #818cf8;
    --color-success: #34d399;
    --color-success-light: #6ee7b7;
    --color-success-bg: rgba(52, 211, 153, 0.9);
    --color-success-tint: rgba(52, 211, 153, 0.18);
    --color-success-border: #059669;
    --color-success-text-dark: #a7f3d0;

    --color-danger: #f87171;
    --color-danger-light: #fca5a5;
    --color-danger-bg: rgba(248, 113, 113, 0.12);
    --color-danger-border: #ef4444;
    --color-danger-text: #fca5a5;
    --color-danger-shadow: rgba(239, 68, 68, 0.28);
    --color-danger-toast: rgba(239, 68, 68, 0.92);

    --color-warning: #fbbf24;
    --color-warning-dark: #f59e0b;

    --color-toast-bg: rgba(15, 23, 42, 0.95);
    --color-overlay: rgba(0, 0, 6, 0.65);
    --color-overlay-dark: rgba(0, 0, 6, 0.72);
    --color-overlay-light: rgba(0, 0, 6, 0.55);

    --color-header-bg: linear-gradient(90deg, #1e1b4b, #0f172a);
    --color-progress-track: #1e293b;

    --color-user-stats-bg: rgba(129, 140, 248, 0.12);
    --color-user-stats-text: #a5b4fc;
    --color-user-metrics-bg: rgba(255, 255, 255, 0.06);
    --color-user-metrics-text: #c7d2fe;
    --color-user-metrics-border: rgba(129, 140, 248, 0.18);
    --color-user-panel-bg: rgba(0, 0, 0, 0.35);

    --color-landing-header-bg: linear-gradient(90deg, #312e81, #4338ca);

    /* ─── QP-SPECIFIC TOKENS (felülírja az index-modern.css :root értékeit) ─ */

    --qp-bg: #0a0c1a;
    --qp-bg-gradient: linear-gradient(180deg, #170f35 0%, #0e0820 48%, #090512 100%);
    --qp-surface: #1e1b4b;
    --qp-surface-2: #312e81;
    --qp-border: #3730a3;
    --qp-border-strong: #818cf8;
    --qp-highlight: #818cf8;
    --qp-text: #e2e8f0;
    --qp-text-dim: #94a3b8;
    --qp-shadow: rgba(0, 0, 10, 0.65);

    /* RGB channel triplets (violet palette) */
    --qp-blue-rgb: 129, 140, 248;
    --qp-highlight-rgb: 129, 140, 248;

    /* Extended text scale */
    --qp-text-bright: #f0f4ff;
    --qp-text-body: rgba(226, 232, 240, 0.92);

    /* Glass / micro-shine overlays */
    --qp-glass-faint: rgba(255, 255, 255, 0.05);
    --qp-glass-hint: rgba(255, 255, 255, 0.04);
}