/* ============================================
   Asigurări Contactless — Brand Design Tokens
   v1.0 · 2026
   Import in every page: <link rel="stylesheet" href="/assets/tokens.css">

   ⚠️ DIVERGENȚĂ DESIGN SYSTEM (de știut la editarea culorilor):
   index.html / calculator-rca.html NU importă acest fișier — au
   :root propriu în assets/index.css și assets/calculator-rca.css,
   cu ACELEAȘI valori (--primary == --brand-primary == #0E5B94, etc.)
   dar prefix scurt (--primary) + variabile proprii (--ease, --gradient,
   --shadow-cta). Dacă schimbi paleta brand AICI, actualizează și acele
   două fișiere ca să nu derive. (calculator-rca devine PHP — se rescrie.)
   ============================================ */

:root {
  /* Palette */
  --brand-primary: #0E5B94;
  --brand-primary-dark: #0a3f68;
  --brand-secondary: #3B8CB8;
  --brand-accent-light: #A8D8F0;
  --brand-bg: #FFFFFF;
  --brand-bg-alt: #F5F7FA;
  --brand-text: #1A2B3C;
  --brand-text-muted: #6B7B8A;
  --brand-border: #E1E8EF;

  /* Signature gradient */
  --gradient-signature: linear-gradient(180deg, #A8D8F0 0%, #3B8CB8 50%, #0E5B94 100%);
  --gradient-button-hover: linear-gradient(180deg, #3B8CB8 0%, #0E5B94 50%, #0a3f68 100%);

  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(14, 91, 148, 0.08);
  --shadow-md: 0 8px 24px rgba(14, 91, 148, 0.12);
  --shadow-lg: 0 24px 64px rgba(14, 91, 148, 0.18);

  /* Typography stacks */
  --font-display: 'Poppins', sans-serif;
  --font-body: 'Inter', 'Poppins', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* Type scale (modular 1.250) */
  --fs-12: 12px;
  --fs-14: 14px;
  --fs-16: 16px;
  --fs-20: 20px;
  --fs-24: 24px;
  --fs-32: 32px;
  --fs-40: 40px;
  --fs-56: 56px;
  --fs-72: 72px;

  /* Spacing scale (8px base) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-24: 96px;

  /* Radius scale */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-pill: 100px;
  --r-full: 9999px;

  /* Transitions */
  --t-fast: 0.2s ease;
  --t-base: 0.35s cubic-bezier(.2,.7,.3,1);
  --t-slow: 0.6s ease;
}

/* === Lockup primitive: ASIGURĂRI + CONTACTLESS + tagline === */
.brand-lockup .asig {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--brand-primary);
  display: block;
  line-height: 1;
}
.brand-lockup .contact {
  display: block;
  width: 100%;
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--brand-secondary);
  text-transform: uppercase;
  text-align: justify;
  text-align-last: justify;
  line-height: 1;
  margin-top: 1.5mm;
}
.brand-lockup .contact::after {
  content: '';
  display: inline-block;
  width: 100%;
  height: 0;
  line-height: 0;
  vertical-align: top;
}
.brand-lockup .tag {
  display: block;
  width: 100%;
  font-family: var(--font-display);
  font-weight: 300;
  color: var(--brand-secondary);
  text-transform: uppercase;
  text-align: justify;
  text-align-last: justify;
  line-height: 1;
  margin-top: 0.6mm;
}
.brand-lockup .tag::after {
  content: '';
  display: inline-block;
  width: 100%;
  height: 0;
  line-height: 0;
  vertical-align: top;
}

/* === Button primitives === */
.btn-primary {
  background: var(--gradient-signature);
  color: white;
  border: none;
  border-radius: var(--r-md);
  box-shadow: 0 4px 16px rgba(14, 91, 148, 0.25);
  transition: var(--t-base);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(14, 91, 148, 0.4);
  background: var(--gradient-button-hover);
}
.btn-secondary {
  background: transparent;
  color: var(--brand-primary);
  border: 1.5px solid var(--brand-primary);
  border-radius: var(--r-md);
  transition: var(--t-base);
}
.btn-secondary:hover {
  background: var(--brand-primary);
  color: white;
  transform: translateY(-2px);
}