/* ============================================================
   Theme: PROFESSIONAL — Legal, CA, Consulting, Finance
   Primary: Blue-700 (#1d4ed8) — universally trusted
   Philosophy: Authority, trust, clean, information-dense
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@400;700&family=Inter:wght@400;500;600;700&display=swap');

:root {
  --theme: professional;

  /* Blue-700: 4.7:1 contrast on white ✅, excellent on dark ✅
     The most trusted colour in B2B worldwide (IBM, LinkedIn, Deloitte) */
  --color-primary:         #1d4ed8;   /* blue-700                 */
  --color-primary-h:       #1e40af;   /* blue-800 hover           */
  --color-accent:          #dbeafe;   /* blue-100 soft highlights */
  --color-secondary:       #1e3a5f;   /* deep navy                */

  --color-surface:         #ffffff;
  --color-surface-2:       #f1f5f9;   /* slate-100                */
  --color-border:          rgba(29,78,216,0.12);
  --color-text:            #0f172a;
  --color-text-muted:      #475569;
  --color-text-on-primary: #ffffff;

  /* ── Typography — authoritative ── */
  --font-heading: 'Merriweather', serif;
  --font-body:    'Inter', sans-serif;

  --text-hero:    clamp(2.5rem, 5vw, 4rem);
  --text-h2:      clamp(1.75rem, 3vw, 2.75rem);

  --weight-heading:        700;
  --letter-spacing-hero:   -0.01em;
  --letter-spacing-label:  0.08em;

  /* ── Shape — precise, no-nonsense ── */
  --radius-xs:    2px;
  --radius-sm:    4px;
  --radius-md:    6px;
  --radius-card:  8px;
  --radius-btn:   6px;
  --radius-image: 4px;

  /* ── Depth — subtle, professional ── */
  --shadow-sm:   0 1px 4px rgba(15,23,42,0.06);
  --shadow-md:   0 4px 16px rgba(15,23,42,0.08);
  --shadow-card: 0 2px 12px rgba(15,23,42,0.08);
  --shadow-btn:  0 2px 8px rgba(29,78,216,0.25);

  /* ── Spacing — information-dense ── */
  --section-py:    5rem;
  --section-py-sm: 3.5rem;
  --container-max: 1200px;

  /* ── Button — solid, reliable ── */
  --btn-radius:         6px;
  --btn-padding:        0.75rem 1.75rem;
  --btn-letter-spacing: 0.02em;
  --btn-transform:      none;
  --btn-weight:         600;

  /* ── Motion — snappy, efficient ── */
  --ease-default:  cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 120ms;
  --duration-base: 250ms;
  --duration-slow: 500ms;

  --divider-style: straight;
}

.dark {
  --color-surface:    #0f172a;
  --color-surface-2:  #1e293b;
  --color-text:       #f1f5f9;
  --color-text-muted: #94a3b8;
  --color-border:     rgba(96,165,250,0.12);
  /* blue-700 remains vibrant on dark slate ✅ */
}