/* ═══════════════════════════════════════════════════════════
   ITargetMarketing — Design Tokens v11.0.0
   GENERAT AUTOMAT din brand/itm-brand.json — NU EDITA MANUAL.
   Regenereaza: python tools/build-tokens.py
   "Business from People to People"
   NO GOLD. Ecosystem v5 exclusiv. Coral #FF5C35 · Blue #5B8AF5 · Void #060C1A.
   ═══════════════════════════════════════════════════════════ */

:root {
  color-scheme: dark light;

  /* ── Brand ────────────────────────────────────── */
  --coral: #FF5C35;            /* primary CTA, accent principal — Ecosystem v5 (confirmat 2026-08-27) */
  --coral-light: #FF8A6A;            /* hover */
  --coral-dark: #CC3A18;            /* pressed */
  --coral-dim: rgba(255,92,53,.12);            /* background tint */
  --blue: #5B8AF5;            /* accent secundar Ecosystem v5 */
  --blue-dim: rgba(91,138,245,.12);            /* background tint albastru */

  /* ── Accent neon (per industrie) ──────────────── */
  --n-cyan: #00F5FF;          /* sanatate */
  --n-violet: #BF5FFF;          /* tech */
  --n-lime: #39FF14;          /* constructii */
  --n-pink: #FF2D78;          /* retail */
  --n-amber: #FFB800;          /* horeca-bar */
  --n-blue: #147BFF;          /* b2b */
  --n-teal: #00FFBB;          /* accent alternativ */

  /* ── Suprafete (DARK = default) ───────────────── */
  --void: #060C1A;
  --deep: #080F22;
  --surface: #0D1730;
  --raised: #142040;
  --card: #0F1C38;
  --border: rgba(91,138,245,.08);
  --border-warm: rgba(255,92,53,.10);
  --border-hover: rgba(255,92,53,.30);
  --text: #F2F0FA;
  --on-accent: #04060F;
  --text-dim: #A9A8BC;
  --text-muted: #9897AE;
  --coral-glow: 0 0 24px rgba(255,92,53,.45), 0 0 60px rgba(255,92,53,.15);
  --blue-glow: 0 0 24px rgba(91,138,245,.40), 0 0 60px rgba(91,138,245,.12);

  /* ── Tipografie ───────────────────────────────── */
  --font-display: 'Syne', 'Helvetica Neue', sans-serif;
  --font-heading: 'Syne', 'Helvetica Neue', sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
  --fs-xs: 12px;
  --fs-sm: 16px;
  --fs-base: 16px;
  --fs-md: 21px;
  --fs-lg: 28px;
  --fs-xl: 37px;
  --fs-2xl: 50px;
  --fs-3xl: 67px;
  --fs-hero: 89px;
  --fw-black: 900;
  --fw-heavy: 800;
  --fw-bold: 700;
  --fw-semibold: 600;
  --fw-medium: 500;
  --fw-regular: 400;
  --fw-light: 300;

  /* ── Spatiere (8pt) ───────────────────────────── */
  --s4: 4px;
  --s8: 8px;
  --s12: 12px;
  --s16: 16px;
  --s24: 24px;
  --s32: 32px;
  --s48: 48px;
  --s64: 64px;
  --s96: 96px;
  --s128: 128px;

  /* ── Radius ───────────────────────────────────── */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-pill: 9999px;

  /* ── Componente ───────────────────────────────── */
  --button-height: 48px;
  --button-height-hero: 52px;
  --button-radius: 12px;
  --card-padding: 24px;
  --card-radius: 16px;
  --bento-columns: 3;
  --bento-gap: 20px;
  --nav-backdrop-filter: blur(16px);
  --nav-position: fixed;
  --cursor-dot: 8px;
  --cursor-ring: 32px;
  --cursor-lag: 0.12;

  /* ── Motion ───────────────────────────────────── */
  --dur-reveal: 300ms;
  --dur-hero: 600ms;
  --ease-out: cubic-bezier(.16,1,.3,1);
  --travel-reveal: 16px;
  --travel-hero: 32px;
  --stagger: 70ms;
  --dur-crestere: 760ms;
  --dur-crestere-opacitate: 520ms;
  --dur-roi-ciclu: 16ms;
  --travel-crestere: 20px;
  --scale-crestere: 0.97;

  /* ── Variante de suprafata (ambele intentionate) ── */
  --card-glass: rgba(15,28,56,.65);
  --surface-glass: rgba(13,23,48,.45);
  --card-solid: #0F1C38;
  --surface-solid: #0D1730;

  /* ── Easing explicit ──────────────────────────── */
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-spring: cubic-bezier(.34,1.45,.64,1);
  --ease-in: cubic-bezier(.7,0,.84,0);
  --ease-crestere: cubic-bezier(.22,1.18,.36,1);
  --ease-seva: cubic-bezier(.25,.8,.25,1);

  /* ── Aliasuri de compatibilitate ───────────────── */
  --itarget-gold: var(--coral);
  --itarget-black: var(--void);
  --itarget-gold-light: var(--coral-light);
  --bg: var(--void);
  --bg-2: var(--deep);
  --bg-3: var(--surface);
  --white: var(--text);
  --txt: var(--text);
  --txt2: var(--text-dim);
  --muted: var(--text-muted);
  --acc: var(--coral);
  --cyan: var(--n-cyan);
  --violet: var(--n-violet);
  --lime: var(--n-lime);
  --pink: var(--n-pink);
  --amber: var(--n-amber);
  --teal: var(--n-teal);
}

/* ── LIGHT MODE (opt-in) ───────────────────────────────────
   Se activeaza DOAR cu <html data-theme="light">.
   Paleta de brand (coral + neon) e identica in ambele moduri;
   se schimba doar tokenii de suprafata.
   Fara auto-switch pe prefers-color-scheme: paginile existente
   isi pastreaza aspectul exact.
   ───────────────────────────────────────────────────────── */
[data-theme="light"] {
  --void: #F5F4FF;
  --deep: #FFFFFF;
  --surface: rgba(255,255,255,.85);
  --raised: #EEF2FF;
  --card: rgba(255,255,255,.90);
  --border: rgba(91,95,200,.28);
  --border-warm: rgba(255,92,53,.15);
  --border-hover: rgba(255,92,53,.28);
  --text: #10184A;
  --text-dim: #2E2A7A;
  --text-muted: #4B3F9E;
  --coral-glow: 0 0 16px rgba(255,92,53,.25);
  --blue-glow: 0 0 16px rgba(91,138,245,.20);
}

/* ── Utilitare (additive, nu suprascriu nimic) ───────────── */
.itm-mono { font-family: var(--font-mono); }
.itm-display { font-family: var(--font-display); }

/* ── Legatura interna in proza ─────────────────────────────
   Pusa de _itm-core/tools/legaturi-interne.py. Clasa e si
   marcajul pe care conducta de traducere il ignora (vezi
   CLASA_LEGATURA in i18n_marcaj.py) — nu o redenumi doar aici.

   Culoarea textului ramane MOSTENITA, in ambele teme. Coralul
   pe fundal deschis da 2,82:1, sub pragul AA de 4,5:1, deci un
   link colorat ar fi ilizibil in tema deschisa exact acolo unde
   pare cel mai bine in cea inchisa. Semnalul de link il duce
   subliniera corala: trece in ambele teme si nu se bazeaza
   numai pe culoare (WCAG 1.4.1).
   ───────────────────────────────────────────────────────── */
.itm-leg {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--coral);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  border-radius: 2px;
  transition: background var(--dur-reveal) var(--ease-out),
              text-decoration-thickness var(--dur-reveal) var(--ease-out);
}
.itm-leg:hover,
.itm-leg:focus-visible {
  text-decoration-thickness: 2px;
  background: var(--coral-dim);
}
.itm-leg:focus-visible {
  outline: 2px solid var(--coral);
  outline-offset: 2px;
}

/* ── Reduced motion (obligatoriu) ─────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}