/*
  Mbalwa Investment Services — Design Tokens
  Source of truth: MD Files/mbalwa-brand-guide.md
*/

:root {
  /* ---- Colour: core ---- */
  --color-charcoal: #353535;
  --color-gold: #E2BD57;        /* large display only, 24px+ */
  --color-gold-antique: #BE9335; /* gold text on white */
  --color-gold-deep: #9C7007;    /* AA-safe gold text, borders */
  --color-champagne: #FBF3A8;    /* highlight, watermark */
  --color-white: #FFFFFF;

  /* ---- Colour: supporting neutrals ---- */
  --color-slate: #6B6B6A;
  --color-warm-grey: #E4E1D9;
  --color-ivory: #FAF8F2;
  --color-near-black: #1F1F1E;

  /* ---- Colour: semantic ---- */
  --color-text: var(--color-charcoal);
  --color-text-muted: var(--color-slate);
  --color-surface: var(--color-white);
  --color-surface-tint: var(--color-ivory);
  --color-surface-dark: var(--color-near-black);
  --color-border: var(--color-warm-grey);
  --color-accent-safe: var(--color-gold-deep);   /* small gold text/icons */
  --color-accent-display: var(--color-gold-antique); /* large gold text */
  --color-danger: #A83232;

  /* ---- Colour: footer (dark brand surface) ---- */
  --color-footer-bg: var(--color-near-black);
  --color-footer-heading: var(--color-white);
  --color-footer-text: #D4D1CA;
  --color-footer-text-muted: #AAA79F;
  --color-footer-border: rgba(255, 255, 255, 0.14);
  --color-footer-accent-border: rgba(226, 189, 87, 0.32);
  --color-footer-accent-hover: rgba(226, 189, 87, 0.12);

  /* ---- Gradients ---- */
  --gradient-gold-fill: linear-gradient(180deg, #FBF3A8 0%, #E2BD57 45%, #9C7007 100%);
  --gradient-gold-text: linear-gradient(180deg, #E2BD57 0%, #BE9335 60%, #9C7007 100%);

  /* ---- Typography ---- */
  --font-heading: "Outfit", system-ui, -apple-system, sans-serif;
  --font-ui: "Outfit", system-ui, -apple-system, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, sans-serif;

  --size-h1: clamp(1.8rem, 4vw, 3.75rem);
  --size-h2: clamp(1.8rem, 4vw, 2.375rem);
  --size-h3: clamp(1.4rem, 2.4vw, 1.75rem);
  --size-h4: 1.125rem;
  --size-lead: 1.05rem;
  --size-body: 1rem;
  --size-small: 0.9rem;
  --size-eyebrow: 0.8rem;

  --leading-tight: 1.15;
  --leading-snug: 1.3;
  --leading-body: 1.7;
  --leading-small: 1.6;

  --tracking-eyebrow: 0.14em;
  --tracking-wide: 0.03em;

  /* ---- Spacing (8px rhythm; 4px increments for compact controls) ---- */
  --space-0-5: 0.25rem;
  --space-1: 0.5rem;
  --space-1-5: 0.75rem;
  --space-2: 1rem;
  --space-2-5: 1.25rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4.5rem;
  --space-7: 5.5rem;
  --space-8: 7rem;

  /* ---- Layout ---- */
  --container-max: 1240px;
  --container-narrow: 760px;
  --container-pad: 24px;
  --section-space: 88px;
  --section-space-compact: 72px;
  --column-gap: 64px;
  --card-gap: 0.75rem;
  --header-topbar-h: 40px;
  --header-nav-h: 80px;

  /* ---- Radius (restrained — architectural, not bubbly) ---- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-card: 4px;
  --radius-soft: 8px;
  --radius-pill: 999px;

  /* ---- Shadow (soft, low-elevation, premium not glassy) ---- */
  --shadow-sm: 0 2px 8px rgba(53, 53, 53, 0.08);
  --shadow-md: 0 12px 28px rgba(53, 53, 53, 0.12);
  --shadow-lg: 0 20px 56px rgba(53, 53, 53, 0.16);
  --shadow-gold: 0 8px 24px rgba(156, 112, 7, 0.18);

  /* ---- Motion ---- */
  --ease-out: ease;
  --duration-fast: 200ms;
  --duration-base: 300ms;
  --duration-slow: 300ms;
  --transition: 300ms ease;
  --reveal-offset: 14px;

  /* ---- Z-index ---- */
  --z-header: 100;
  --z-overlay: 200;
}