/* ═══════════════════════════════════════════════════════════════
   D_Solutions — Design System Tokens
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* ── Brand palette ── */
  --brand: #0d6efd;
  --brand-contrast: #fff;

  /* ── Navy spectrum (topbar, hero, footer) ── */
  --ds-navy: #000410;
  --ds-navy-deep: #000410;
  --ds-navy-mid: #001a3a;

  /* ── Accent colors ── */
  --ds-blue: #0d6efd;
  --ds-blue-light: #60a5fa;
  --ds-blue-ice: #90caf9;
  --ds-green: #10b981;
  --ds-orange: #ea580c;
  --ds-purple: #a78bfa;
  --ds-teal: #14b8a6;

  /* ── Surfaces ── */
  --ds-bg: #f5f6fa;
  --ds-bg-alt: #eef1f6;
  --ds-card: #ffffff;
  --ds-border: rgba(0, 0, 0, .08);

  /* ── Text ── */
  --ds-text: #1e293b;
  --ds-text-muted: #64748b;

  /* ── Typography ── */
  --ds-font-sm: .82rem;
  --ds-font-base: .9rem;
  --ds-font-lg: 1.05rem;
  --ds-heading-xl: clamp(1.8rem, 4vw, 2.8rem);
  --ds-heading-lg: clamp(1.4rem, 3vw, 2rem);
  --ds-heading-md: 1.25rem;

  /* ── Spacing ── */
  --ds-section-py: 5rem;
  --ds-section-py-sm: 3.5rem;

  /* ── Radii ── */
  --ds-radius-sm: 8px;
  --ds-radius-md: 16px;
  --ds-radius-lg: 24px;
  --card-radius: 1rem;

  /* ── Shadows ── */
  --ds-shadow-sm: 0 2px 12px rgba(0, 0, 0, .06);
  --ds-shadow-md: 0 4px 24px rgba(0, 0, 0, .08);
  --ds-shadow-lg: 0 8px 40px rgba(0, 0, 0, .10);
}

/* ── Base ── */
body { background: var(--ds-bg); color: var(--ds-text); }
.card { border-radius: var(--card-radius); }

/* ── Utility classes ── */
.btn-brand { background: var(--brand); color: var(--brand-contrast); }
.link-muted { color: var(--ds-text-muted); text-decoration: none; }
.link-muted:hover { text-decoration: underline; }
.navbar .nav-link { color: rgba(255, 255, 255, .85); }
.navbar .nav-link:hover { color: #fff; }
footer a { opacity: .85; }
footer a:hover { opacity: 1; }