/* ==========================================================================
   FG Data Consulting – design tokens (sursa: docs/brandbook.md)
   Trei straturi: primitive → semantice → componente.
   Nu folosi valori brute în style.css; adaugă aici un token nou dacă lipsește.
   ========================================================================== */
:root {
    /* ---- primitive: culori ---- */
    --ink-950: #070a12;
    --ink-900: #0a0e18;
    --ink-800: #10162a;
    --ink-700: #141c33;
    --ink-600: #1b2440;
    --blue-700: #2458d3;
    --blue-500: #4f7cff;
    --blue-300: #6d93ff;
    --blue-200: #8fb0ff;
    --gray-100: #f3f5fa;
    --gray-200: #e6e9f2;
    --gray-500: #98a2b8;
    --green-500: #22c55e;
    --amber-400: #fbbf24;
    --red-400: #f87171;

    /* ---- primitive: alpha ---- */
    --alpha-line: rgba(255, 255, 255, 0.08);
    --alpha-line-strong: rgba(79, 124, 255, 0.35);
    --alpha-tint: rgba(79, 124, 255, 0.12);
    --alpha-tint-strong: rgba(79, 124, 255, 0.18);
    --alpha-tint-border: rgba(79, 124, 255, 0.25);
    --alpha-well: rgba(0, 0, 0, 0.25);
    --alpha-white-3: rgba(255, 255, 255, 0.03);
    --alpha-white-6: rgba(255, 255, 255, 0.06);
    --alpha-white-7: rgba(255, 255, 255, 0.07);
    --alpha-tint-soft: rgba(79, 124, 255, 0.10);
    --alpha-tint-active: rgba(79, 124, 255, 0.16);
    --alpha-tint-hover: rgba(79, 124, 255, 0.45);
    --alpha-deep: rgba(36, 88, 211, 0.18);
    --alpha-deep-strong: rgba(36, 88, 211, 0.30);
    --alpha-deep-soft: rgba(36, 88, 211, 0.12);
    --alpha-glow-soft: rgba(79, 124, 255, 0.12);
    --alpha-success: rgba(34, 197, 94, 0.12);
    --alpha-success-border: rgba(34, 197, 94, 0.35);
    --alpha-success-ring: rgba(34, 197, 94, 0.55);
    --alpha-success-ring-0: rgba(34, 197, 94, 0);
    --alpha-warning: rgba(251, 191, 36, 0.12);
    --alpha-warning-border: rgba(251, 191, 36, 0.35);
    --alpha-danger: rgba(248, 113, 113, 0.12);
    --alpha-danger-border: rgba(248, 113, 113, 0.35);
    --scrim: rgba(10, 14, 24, 0.82);
    --scrim-panel: rgba(8, 12, 22, 0.97);
    --scrim-menu: rgba(12, 17, 30, 0.94);

    /* ---- semantice: culori ---- */
    --black: var(--ink-950);
    --bg: var(--ink-900);
    --bg-deep: var(--ink-950);
    --surface: var(--ink-800);
    --surface-2: var(--ink-700);
    --surface-alt: var(--ink-700);
    --white: var(--gray-100);
    --text-strong: var(--gray-100);
    --text: var(--gray-200);
    --muted: var(--gray-500);
    --border: var(--alpha-line);
    --border-strong: var(--alpha-tint-border);
    --primary: var(--blue-700);
    --primary-2: var(--blue-500);
    --accent: var(--blue-300);
    --accent-soft: var(--blue-200);
    --success: var(--green-500);
    --warning: var(--amber-400);
    --danger: var(--red-400);
    --glow: var(--alpha-line-strong);

    /* ---- tipografie ---- */
    --font: 'Inter', system-ui, -apple-system, sans-serif;
    --fs-display: clamp(42px, 5.2vw, 96px);
    --fs-h1: clamp(36px, 4.2vw, 72px);
    --fs-h2: clamp(32px, 3.4vw, 62px);
    --fs-h3: clamp(20px, 1.45vw, 28px);
    --fs-lead: clamp(17px, 1.15vw, 22px);
    --fs-body: clamp(16px, .95vw, 18px);
    --fs-card: clamp(16px, 1vw, 19px);
    --fs-small: 13px;
    --fs-eyebrow: 12px;
    --fs-kpi: clamp(28px, 2.4vw, 44px);
    --fs-stat: clamp(48px, 6vw, 120px);
    --lh-tight: 1.06;
    --lh-heading: 1.12;
    --lh-body: 1.6;
    --ls-heading: -0.025em;
    --ls-display: -0.03em;
    --ls-eyebrow: 0.14em;

    /* ---- spațiere și dimensiuni ---- */
    --gutter: clamp(20px, 3.6vw, 72px);
    --container: min(1800px, calc(100% - var(--gutter) * 2));
    --section-y: 110px;
    --section-gap-head: 56px;
    --grid-gap: 20px;
    --card-pad-y: clamp(30px, 2.4vw, 46px);
    --card-pad-x: clamp(28px, 2.4vw, 46px);
    --card-pad: var(--card-pad-y) var(--card-pad-x);
    --card-pad-sm: 24px;
    --nav-h: 84px;
    --icon-box: 46px;
    --icon-box-lg: 54px;

    /* ---- raze ---- */
    --radius-xl: 22px;
    --radius-lg: 16px;
    --radius-md: 14px;
    --radius-sm: 11px;
    --radius-pill: 100px;
    --radius: var(--radius-xl);

    /* ---- umbre ---- */
    --shadow-card: 0 30px 80px rgba(0, 0, 0, 0.45);
    --shadow-glow: 0 10px 30px var(--glow);
    --shadow-glow-strong: 0 16px 40px var(--glow);
    --shadow: var(--shadow-card);

    /* ---- mișcare ---- */
    --ease-out-expo: cubic-bezier(.16, 1, .3, 1);
    --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
    --ease-in-out-quart: cubic-bezier(.76, 0, .24, 1);
    --dur-fast: .25s;
    --dur-base: .6s;
    --dur-slow: 1.1s;

    /* ---- componente ---- */
    --btn-pad: 14px 26px;
    --btn-pad-nav: 10px 20px;
    --btn-fs: 15px;
    --card-bg: linear-gradient(160deg, var(--alpha-white-6), rgba(255, 255, 255, 0.02));
    --kpi-bg: var(--alpha-well);
    --input-bg: var(--alpha-well);
    --phone-bezel: #0d1220;
    --phone-radius: 44px;
    --phone-radius-inner: 34px;
    --browser-bar-h: 36px;

    /* ---- assets inline (SVG / mască) ---- */
    --check-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.6 12.4 9.5 17.3 19.4 6.9'/%3E%3C/svg%3E");
    --check-mask-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322c55e' stroke-width='3'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E");
    --grain-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    --flag-ro: linear-gradient(90deg, #002b7f 0 33.333%, #fcd116 33.333% 66.666%, #ce1126 66.666% 100%);
    --flag-en:
        linear-gradient(90deg, transparent 42%, #cf142b 42% 58%, transparent 58%),
        linear-gradient(transparent 42%, #cf142b 42% 58%, transparent 58%),
        linear-gradient(90deg, transparent 36%, #ffffff 36% 64%, transparent 64%),
        linear-gradient(transparent 36%, #ffffff 36% 64%, transparent 64%),
        linear-gradient(33deg, transparent 44%, #cf142b 44% 56%, transparent 56%),
        linear-gradient(-33deg, transparent 44%, #cf142b 44% 56%, transparent 56%),
        linear-gradient(33deg, transparent 38%, #ffffff 38% 62%, transparent 62%),
        linear-gradient(-33deg, transparent 38%, #ffffff 38% 62%, transparent 62%),
        #012169;
}

@media (max-width: 900px) {
    :root {
        --nav-h: 72px;
        --section-y: 80px;
        --section-gap-head: 40px;
        --card-pad-y: 26px;
        --card-pad-x: 22px;
    }
}