/* bestcreditcard.ae shared theme
   Single source of truth for colours, type, radii, shadows.
   Loaded from every page; safe to inline in detail pages where build-time inlining is needed. */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=Inter:wght@400;500;600;700;800&family=Sora:wght@600;700&display=swap');

:root {
  --brand-purple: #ac4bff;
  --brand-purple-deep: #7c3cb3;
  --brand-purple-mid: #863dc5;
  --brand-purple-light: #913fd8;
  --brand-purple-extra: #9b40ea;
  --teal: #badede;
  --cloud-25: #fafaf8;
  --cloud-50: #f5f5f2;
  --cloud-100: #ebeae4;
  --ink: #101828;
  --slate: #333;
  --body-ink: #364153;
  --muted: #4a5565;
  --caption: #6a7282;
  --line: #e5e7eb;
  --status-green: #058101;
  --status-red: #d40004;
  --font-display: 'Fraunces','Tiempos Headline',Georgia,serif;
  --font-brand: 'Sora',system-ui,sans-serif;
  --font-body: 'Inter','Manrope',system-ui,sans-serif;
  --shadow-sm: 0 1px 2px rgba(16,24,40,0.04);
  --shadow-md: 0 4px 14px rgba(16,24,40,0.06);
  --shadow-lg: 0 12px 30px rgba(16,24,40,0.08);
  --radius: 14px;
  --radius-lg: 18px;

  /* Legacy aliases so any page using the old variable names still works */
  --bg: var(--cloud-25);
  --card-bg: #fff;
  --ink-soft: var(--body-ink);
  --accent: var(--brand-purple);
  --accent-2: var(--brand-purple-deep);
  --pill-bg: #fff;
  --pill-border: var(--line);
  --pill-active-bg: var(--ink);
  --pill-active-fg: #fff;
  --soft: var(--cloud-50);
  --radius-sm: 10px;
  --shadow: var(--shadow-md);
  --font: var(--font-body);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--cloud-25); color: var(--body-ink); font-family: var(--font-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* Display type — serif headings, big and confident */
h1, .h-display { font-family: var(--font-display); color: var(--ink); font-weight: 500; letter-spacing: -0.02em; line-height: 1.05; }
h2, h3, h4 { font-family: var(--font-body); color: var(--ink); }
.brand { font-family: var(--font-brand); font-weight: 700; letter-spacing: -0.01em; }

a { color: var(--brand-purple-deep); }
a:hover { color: var(--brand-purple); }