/*
 * DecDEPO shared design tokens
 * -----------------------------
 * Importáld minden pillér frontend-jéből:
 *    @import url("/shared/tokens/tokens.css");
 *
 * Konvenció:
 *  - Sötét stealth háttér (mint v48-brutalist)
 *  - Cián akcens (#67e8f9) az összes pillérben — ez a DecDEPO brand-színe
 *  - Tipó: DM Serif Display (cím) + Inter (body) + JetBrains Mono (labelek)
 *  - Minden platform saját szekunder akcenst ad a közös cián mellé
 *    ( /print = narancs , /card = ibolya ) — lásd a pillér-specifikus tokeneket.
 */

@import url("https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap");

:root {
    /* === Alap színek (mind a három pilléren közös) === */
    --bg:            #0a0a0b;          /* legsötétebb háttér */
    --bg-elev-1:    #111114;          /* kártya / szekció */
    --bg-elev-2:    #18181d;          /* modal / panel */
    --bg-elev-3:    #22222a;          /* input / hover */
    --border:        #2a2a33;
    --border-hi:    #3a3a45;

    --fg:            #f4f4f5;          /* alap szöveg */
    --fg-muted:     #a1a1aa;
    --fg-dim:       #71717a;

    --accent:        #67e8f9;          /* cián — DecDEPO brand */
    --accent-hi:    #22d3ee;
    --accent-dim:   #0e7490;

    --ok:            #4ade80;
    --warn:          #fbbf24;
    --err:           #f87171;

    /* === Pillér-akcensek (szekunder — ne vidd túlzásba) === */
    --print-accent:  #fb923c;          /* narancs — 3D filament vibe */
    --card-accent:  #c084fc;          /* ibolya — plasztikkártya vibe */

    /* === Tipográfia === */
    --serif:  "DM Serif Display", Georgia, serif;
    --body:   "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --mono:   "JetBrains Mono", "SF Mono", Consolas, monospace;

    --text-xs:    0.75rem;
    --text-sm:    0.875rem;
    --text-base:  1rem;
    --text-md:    1.125rem;
    --text-lg:    1.25rem;
    --text-xl:    1.5rem;
    --text-2xl:   2rem;
    --text-3xl:   2.75rem;
    --text-4xl:   4rem;

    /* === Térközök (4-skála) === */
    --sp-1: 0.25rem;
    --sp-2: 0.5rem;
    --sp-3: 0.75rem;
    --sp-4: 1rem;
    --sp-5: 1.5rem;
    --sp-6: 2rem;
    --sp-8: 3rem;
    --sp-10: 4rem;
    --sp-12: 6rem;
    --sp-16: 8rem;

    /* === Sugár, árnyék === */
    --r-sm: 4px;
    --r-md: 8px;
    --r-lg: 12px;
    --r-xl: 20px;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5);
    --glow-accent: 0 0 24px rgba(103, 232, 249, 0.3);

    /* === Layout === */
    --container: 1200px;
    --container-narrow: 800px;
    --header-h: 64px;

    /* === Motion === */
    --ease:   cubic-bezier(0.4, 0, 0.2, 1);
    --dur-fast: 120ms;
    --dur:     220ms;
    --dur-slow: 420ms;
}

/* === Alap reset === */
*, *::before, *::after { box-sizing: border-box; }

html {
    background: var(--bg);
    color: var(--fg);
    font-family: var(--body);
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

body { margin: 0; }

h1, h2, h3, h4 {
    font-family: var(--serif);
    font-weight: 400;
    line-height: 1.15;
    margin: 0;
}

h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-xl); }

.kicker {
    font-family: var(--mono);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--fg-muted);
}

a {
    color: var(--accent);
    text-decoration: none;
    transition: color var(--dur-fast) var(--ease);
}

a:hover { color: var(--accent-hi); }

/* === Közös komponensek === */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-5);
    border: 1px solid var(--border-hi);
    background: var(--bg-elev-2);
    color: var(--fg);
    font-family: var(--body);
    font-size: var(--text-base);
    font-weight: 500;
    border-radius: var(--r-md);
    cursor: pointer;
    transition: all var(--dur) var(--ease);
    text-decoration: none;
}

.btn:hover {
    border-color: var(--accent);
    background: var(--bg-elev-3);
    color: var(--accent);
}

.btn-primary {
    background: var(--accent);
    color: var(--bg);
    border-color: var(--accent);
}

.btn-primary:hover {
    background: var(--accent-hi);
    border-color: var(--accent-hi);
    color: var(--bg);
    box-shadow: var(--glow-accent);
}

.card {
    background: var(--bg-elev-1);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: var(--sp-5);
}

.container {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--sp-5);
}

/* === Utility === */
.muted { color: var(--fg-muted); }
.dim   { color: var(--fg-dim); }
.mono  { font-family: var(--mono); }
.serif { font-family: var(--serif); }