/* ============================================================
   Voice Of Raluca — tokens.css
   SURSA UNICA DE ADEVAR pentru culori, fonturi, raze, umbre si scara de layout.
   Se incarca PRIMUL pe fiecare pagina, inaintea oricarui alt CSS.
   Restul fisierelor (styles.css, service.css, landing.css, proiecte.css si
   blocurile <style> din pagini) pastreaza deocamdata copii cu valori identice;
   pot fi curatate treptat fara sa se schimbe randarea.
   Tema principala = LIGHT. v20260725c
   ============================================================ */

/* ---------- BAZA + TEMA IMPLICITA (light) + ACCENT IMPLICIT (violet) ---------- */
:root{
    /* fonturi */
    --font-d:'DM Serif Display',Georgia,serif;
    --font-b:'Space Grotesk',sans-serif;
    --font-m:'JetBrains Mono',monospace;

    /* miscare */
    --ease:cubic-bezier(0.16,1,0.3,1);
    --tr:0.35s var(--ease);

    /* raze */
    --r-sm:8px;
    --r-md:14px;
    --r-lg:22px;

    /* scara de layout */
    --w-page:1200px;   /* latimea maxima a unei pagini */
    --w-read:720px;    /* coloana de text lung (blog, termeni, politici) */
    --nav-h:72px;      /* inaltimea navigatiei fixe */

    /* accent implicit: violet */
    --ac:#8B5CF6;
    --ac-l:#A78BFA;
    --ac-s:rgba(139,92,246,0.1);
    --ac-glow:rgba(139,92,246,0.12);

    /* fundal de buton principal: violet inchis, 5.70:1 pe alb */
    --ac-btn:#7C3AED;
    --ac-btn-h:#6D28D9;
    --ac-btn-tx:#FFFFFF;

    /* paleta light (implicita) */
    --bg1:#F8F8FB;
    --bg2:#F0F0F5;
    --bg3:#FFFFFF;
    --bg4:#FFFFFF;
    --bgH:#EAEAF0;
    --tx1:#111118;
    --tx2:#555566;
    --tx3:#999AAA;      /* decorativ, nu pentru text de citit */
    --txI:#FFFFFF;
    --brd:rgba(0,0,0,0.07);
    --brdH:rgba(0,0,0,0.13);
    --glass:rgba(248,248,251,0.95);
    --photo-overlay:rgba(248,248,251,0.5);

    /* umbre light */
    --sh-1:0 1px 3px rgba(0,0,0,0.06);
    --sh-2:0 4px 14px rgba(0,0,0,0.08);
    --sh-3:0 12px 32px rgba(0,0,0,0.12);
}

/* ---------- TEMA DARK ---------- */
[data-theme="dark"]{
    --bg1:#08080A;
    --bg2:#0E0E12;
    --bg3:#151519;
    --bg4:#1C1C22;
    --bgH:#242430;
    --tx1:#F5F5F5;
    --tx2:#9E9EB1;
    --tx3:#65657A;
    --txI:#08080A;
    --brd:rgba(255,255,255,0.07);
    --brdH:rgba(255,255,255,0.14);
    --glass:rgba(14,14,18,0.85);
    --photo-overlay:rgba(8,8,10,0.55);

    --ac-btn:#A78BFA;
    --ac-btn-h:#C4B5FD;
    --ac-btn-tx:#08080A;

    --sh-1:0 2px 8px rgba(0,0,0,0.45);
    --sh-2:0 4px 16px rgba(0,0,0,0.5);
    --sh-3:0 8px 24px rgba(0,0,0,0.6);

    --grad-hero:radial-gradient(ellipse 80% 60% at 60% 40%,var(--ac-glow) 0%,transparent 70%),radial-gradient(ellipse 50% 50% at 20% 80%,rgba(99,102,241,0.06) 0%,transparent 60%);
    --grad-mesh:radial-gradient(at 30% 20%,var(--ac-glow) 0%,transparent 50%),radial-gradient(at 80% 70%,rgba(139,92,246,0.06) 0%,transparent 50%),radial-gradient(at 50% 50%,rgba(20,184,166,0.04) 0%,transparent 60%);
    --grad-card:linear-gradient(135deg,rgba(255,255,255,0.02) 0%,transparent 100%);
    --noise:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
}

/* ---------- TEMA LIGHT (explicita) ---------- */
[data-theme="light"]{
    --bg1:#F8F8FB;
    --bg2:#F0F0F5;
    --bg3:#FFFFFF;
    --bg4:#FFFFFF;
    --bgH:#EAEAF0;
    --tx1:#111118;
    --tx2:#555566;
    --tx3:#999AAA;
    --txI:#FFFFFF;
    --brd:rgba(0,0,0,0.07);
    --brdH:rgba(0,0,0,0.13);
    --glass:rgba(248,248,251,0.95);
    --photo-overlay:rgba(248,248,251,0.5);

    --ac-btn:#7C3AED;
    --ac-btn-h:#6D28D9;
    --ac-btn-tx:#FFFFFF;

    --sh-1:0 1px 3px rgba(0,0,0,0.06);
    --sh-2:0 4px 14px rgba(0,0,0,0.08);
    --sh-3:0 12px 32px rgba(0,0,0,0.12);

    --grad-hero:radial-gradient(ellipse 80% 60% at 60% 40%,var(--ac-glow) 0%,transparent 70%),radial-gradient(ellipse 50% 50% at 20% 80%,rgba(99,102,241,0.04) 0%,transparent 60%);
    --grad-mesh:radial-gradient(at 30% 20%,var(--ac-glow) 0%,transparent 50%),radial-gradient(at 80% 70%,rgba(139,92,246,0.04) 0%,transparent 50%);
    --grad-card:linear-gradient(135deg,rgba(0,0,0,0.01) 0%,transparent 100%);
    --noise:none;
}

/* ---------- ACCENTE ---------- */
[data-accent="gold"]{--ac:#D4A843;--ac-l:#E8C96A;--ac-s:rgba(212,168,67,0.1);--ac-glow:rgba(212,168,67,0.12)}
[data-accent="teal"]{--ac:#14B8A6;--ac-l:#2DD4BF;--ac-s:rgba(20,184,166,0.1);--ac-glow:rgba(20,184,166,0.12)}
[data-accent="violet"]{--ac:#8B5CF6;--ac-l:#A78BFA;--ac-s:rgba(139,92,246,0.1);--ac-glow:rgba(139,92,246,0.12)}
[data-accent="rose"]{--ac:#F43F5E;--ac-l:#FB7185;--ac-s:rgba(244,63,94,0.1);--ac-glow:rgba(244,63,94,0.12)}
[data-accent="blue"]{--ac:#3B82F6;--ac-l:#60A5FA;--ac-s:rgba(59,130,246,0.1);--ac-glow:rgba(59,130,246,0.12)}
[data-accent="emerald"]{--ac:#10B981;--ac-l:#34D399;--ac-s:rgba(16,185,129,0.1);--ac-glow:rgba(16,185,129,0.12)}
[data-accent="coral"]{--ac:#FF6B6B;--ac-l:#FF8E8E;--ac-s:rgba(255,107,107,0.1);--ac-glow:rgba(255,107,107,0.12)}
[data-accent="amber"]{--ac:#F59E0B;--ac-l:#FBBF24;--ac-s:rgba(245,158,11,0.1);--ac-glow:rgba(245,158,11,0.12)}

/* ---------- RAZE (comutator din panoul de setari) ---------- */
[data-radius="sharp"]{--r-sm:2px;--r-md:4px;--r-lg:8px}
[data-radius="rounded"]{--r-sm:8px;--r-md:14px;--r-lg:22px}
[data-radius="pill"]{--r-sm:50px;--r-md:50px;--r-lg:50px}

/* ---------- DENSITATE (comutator din panoul de setari) ---------- */
[data-density="compact"] section{padding:60px 0}
[data-density="normal"] section{padding:100px 0}
[data-density="spacious"] section{padding:140px 0}

/* ---------- TITLURI ----------
   DM Serif Display exista intr-o singura greutate. Orice font-weight peste 400
   produce bold sintetic, care ingroasa neuniform literele. Titlurile stau pe 400. */
h1,h2,h3{font-weight:400}


/* ===== TINTE TACTILE PE ECRANE CU DEGET (2026-07-28) =====
   tokens.css e singurul fisier incarcat de toate cele 76 de pagini, inclusiv blogul,
   care are stilurile scrise inline. Regulile de mai jos trebuie sa ajunga peste tot. */
@media (pointer: coarse) {
    .burger, .nav-burger, .nav-theme, .theme-btn, .theme-toggle { min-width:44px; min-height:44px; }
    .lang-btn, .lang-toggle, .lang-switch { min-width:44px; min-height:44px; display:inline-flex; align-items:center; justify-content:center; }
    .footer-link, .foot-links a { display:inline-flex; align-items:center; min-height:40px; }
    form button[type="submit"], form input[type="submit"], .cookie-btn, .btn-share { min-height:44px; }
    /* butonul flotant de WhatsApp sta fix langa baza si acoperea ultimul rand de linkuri
       din footer cand pagina era derulata pana jos, unde nu mai ai unde sa scrollezi */
    footer, .foot { padding-bottom:96px; }
}

/* ===== FLOTANTE vs BANNER DE COOKIE (2026-07-28) =====
   styles.css avea deja regula, dar tinteste doar .wa-float. Paginile-unealta
   (quote-generator, script-calculator, word-counter, RO+EN) folosesc .whatsapp-float
   sau .whatsapp-btn, deci butonul de WhatsApp ramanea sub banner si nu se putea apasa. */
body:has(.cookie-banner.visible) .wa-float,
body:has(.cookie-banner.visible) .whatsapp-float,
body:has(.cookie-banner.visible) .whatsapp-btn,
body:has(.cookie-banner.visible) #btt { opacity:0; pointer-events:none; }