/* =========================================================================
   AHIL REAL ESTATE GROWTH PARTNERS - DESIGN TOKENS
   Every brand colour below is sampled directly from the logo artwork.
     #8C52FF  wordmark gradient - start     #FF914D  wordmark gradient - end
     #FF3131  window + swoosh                #545454  roof chevron
   ========================================================================= */

@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&family=Instrument+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap");

:root {
  /* ---------- 1. PRIMITIVES: colour ---------- */
  --ahil-white: #FFFFFF;
  /* violet */
  --ahil-violet-50: #F7F3FF;
  --ahil-violet-100: #E4DBFF;
  --ahil-violet-200: #CCBAFF;
  --ahil-violet-300: #B597FF;
  --ahil-violet-400: #A072FF;
  --ahil-violet-500: #8C52FF;
  --ahil-violet-600: #732FDF;
  --ahil-violet-700: #5C0FBB;
  --ahil-violet-800: #470097;
  --ahil-violet-900: #340073;
  --ahil-violet-950: #250057;
  /* ember */
  --ahil-ember-50: #FFF3EA;
  --ahil-ember-100: #FFE4D2;
  --ahil-ember-200: #FFCEAF;
  --ahil-ember-300: #FFB88A;
  --ahil-ember-400: #FFA266;
  --ahil-ember-500: #FF914D;
  --ahil-ember-600: #D1681B;
  --ahil-ember-700: #A54600;
  --ahil-ember-800: #7C2B00;
  --ahil-ember-900: #571700;
  --ahil-ember-950: #3C0A00;
  /* signal */
  --ahil-signal-50: #FFEFEB;
  --ahil-signal-100: #FFD5CE;
  --ahil-signal-200: #FFB0A4;
  --ahil-signal-300: #FF877A;
  --ahil-signal-400: #FF5B51;
  --ahil-signal-500: #FF3131;
  --ahil-signal-600: #D90001;
  --ahil-signal-700: #B10000;
  --ahil-signal-800: #8B0000;
  --ahil-signal-900: #670000;
  --ahil-signal-950: #4C0000;
  /* slate */
  --ahil-slate-50: #F7F7F7;
  --ahil-slate-100: #E2E2E2;
  --ahil-slate-200: #C8C8C8;
  --ahil-slate-300: #ADADAD;
  --ahil-slate-400: #949494;
  --ahil-slate-500: #7D7D7D;
  --ahil-slate-600: #676767;
  --ahil-slate-700: #545454;
  --ahil-slate-800: #3E3E3E;
  --ahil-slate-900: #2B2B2B;
  --ahil-slate-950: #1E1E1E;
  /* verdant */
  --ahil-verdant-50: #EDFBF1;
  --ahil-verdant-100: #D1EED9;
  --ahil-verdant-200: #A8DCB9;
  --ahil-verdant-300: #7ECB99;
  --ahil-verdant-400: #51B87B;
  --ahil-verdant-500: #27A563;
  --ahil-verdant-600: #008646;
  --ahil-verdant-700: #00692F;
  --ahil-verdant-800: #004F1E;
  --ahil-verdant-900: #003911;
  --ahil-verdant-950: #00280A;

  /* ---------- 2. PRIMITIVES: gradient (the brand signature) ---------- */
  --ahil-gradient-brand: linear-gradient(90deg, #8C52FF 0%, #FF914D 100%);
  --ahil-gradient-brand-diagonal: linear-gradient(135deg, #8C52FF 0%, #FF914D 100%);
  --ahil-gradient-brand-safe: linear-gradient(90deg, #732FDF 0%, #A54600 100%);
  --ahil-gradient-brand-soft: linear-gradient(90deg, #E4DBFF 0%, #FFE4D2 100%);
  --ahil-gradient-brand-wash: linear-gradient(160deg, #F7F3FF 0%, #FFF3EA 100%);
  --ahil-gradient-signal: linear-gradient(90deg, #FF3131 0%, #FF914D 100%);
  --ahil-gradient-ink: linear-gradient(160deg, #2B2B2B 0%, #1E1E1E 100%);

  /* ---------- 3. PRIMITIVES: typography ---------- */
  --ahil-font-display: "Outfit", "Century Gothic", ui-sans-serif, system-ui, sans-serif;
  --ahil-font-body: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --ahil-font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;
  --ahil-text-display-2xl-size: 72px;
  --ahil-text-display-2xl-line: 1.02;
  --ahil-text-display-2xl-track: -0.035em;
  --ahil-text-display-2xl-weight: 700;
  --ahil-text-display-2xl-family: var(--ahil-font-display);
  --ahil-text-display-xl-size: 60px;
  --ahil-text-display-xl-line: 1.04;
  --ahil-text-display-xl-track: -0.032em;
  --ahil-text-display-xl-weight: 700;
  --ahil-text-display-xl-family: var(--ahil-font-display);
  --ahil-text-display-lg-size: 48px;
  --ahil-text-display-lg-line: 1.06;
  --ahil-text-display-lg-track: -0.028em;
  --ahil-text-display-lg-weight: 700;
  --ahil-text-display-lg-family: var(--ahil-font-display);
  --ahil-text-h1-size: 38px;
  --ahil-text-h1-line: 1.12;
  --ahil-text-h1-track: -0.022em;
  --ahil-text-h1-weight: 700;
  --ahil-text-h1-family: var(--ahil-font-display);
  --ahil-text-h2-size: 30px;
  --ahil-text-h2-line: 1.18;
  --ahil-text-h2-track: -0.018em;
  --ahil-text-h2-weight: 600;
  --ahil-text-h2-family: var(--ahil-font-display);
  --ahil-text-h3-size: 24px;
  --ahil-text-h3-line: 1.26;
  --ahil-text-h3-track: -0.012em;
  --ahil-text-h3-weight: 600;
  --ahil-text-h3-family: var(--ahil-font-display);
  --ahil-text-h4-size: 20px;
  --ahil-text-h4-line: 1.32;
  --ahil-text-h4-track: -0.006em;
  --ahil-text-h4-weight: 600;
  --ahil-text-h4-family: var(--ahil-font-display);
  --ahil-text-body-lg-size: 18px;
  --ahil-text-body-lg-line: 1.62;
  --ahil-text-body-lg-track: 0em;
  --ahil-text-body-lg-weight: 400;
  --ahil-text-body-lg-family: var(--ahil-font-body);
  --ahil-text-body-size: 16px;
  --ahil-text-body-line: 1.62;
  --ahil-text-body-track: 0em;
  --ahil-text-body-weight: 400;
  --ahil-text-body-family: var(--ahil-font-body);
  --ahil-text-body-sm-size: 14px;
  --ahil-text-body-sm-line: 1.56;
  --ahil-text-body-sm-track: 0em;
  --ahil-text-body-sm-weight: 400;
  --ahil-text-body-sm-family: var(--ahil-font-body);
  --ahil-text-caption-size: 13px;
  --ahil-text-caption-line: 1.46;
  --ahil-text-caption-track: 0.002em;
  --ahil-text-caption-weight: 400;
  --ahil-text-caption-family: var(--ahil-font-body);
  --ahil-text-eyebrow-size: 12px;
  --ahil-text-eyebrow-line: 1.20;
  --ahil-text-eyebrow-track: 0.18em;
  --ahil-text-eyebrow-weight: 600;
  --ahil-text-eyebrow-family: var(--ahil-font-body);
  --ahil-text-eyebrow-wide-size: 12px;
  --ahil-text-eyebrow-wide-line: 1.20;
  --ahil-text-eyebrow-wide-track: 0.32em;
  --ahil-text-eyebrow-wide-weight: 500;
  --ahil-text-eyebrow-wide-family: var(--ahil-font-body);
  --ahil-text-metric-lg-size: 44px;
  --ahil-text-metric-lg-line: 1.00;
  --ahil-text-metric-lg-track: -0.02em;
  --ahil-text-metric-lg-weight: 500;
  --ahil-text-metric-lg-family: var(--ahil-font-mono);
  --ahil-text-metric-size: 28px;
  --ahil-text-metric-line: 1.05;
  --ahil-text-metric-track: -0.01em;
  --ahil-text-metric-weight: 500;
  --ahil-text-metric-family: var(--ahil-font-mono);

  /* ---------- 4. PRIMITIVES: space / radius / elevation ---------- */
  --ahil-space-0: 0px;
  --ahil-space-px: 1px;
  --ahil-space-0-5: 2px;
  --ahil-space-1: 4px;
  --ahil-space-1-5: 6px;
  --ahil-space-2: 8px;
  --ahil-space-3: 12px;
  --ahil-space-4: 16px;
  --ahil-space-5: 20px;
  --ahil-space-6: 24px;
  --ahil-space-8: 32px;
  --ahil-space-10: 40px;
  --ahil-space-12: 48px;
  --ahil-space-16: 64px;
  --ahil-space-20: 80px;
  --ahil-space-24: 96px;
  --ahil-space-32: 128px;
  --ahil-space-40: 160px;
  --ahil-radius-none: 0px;
  --ahil-radius-xs: 4px;
  --ahil-radius-sm: 6px;
  --ahil-radius-md: 10px;
  --ahil-radius-lg: 14px;
  --ahil-radius-xl: 20px;
  --ahil-radius-2xl: 28px;
  --ahil-radius-3xl: 40px;
  --ahil-radius-full: 9999px;
  --ahil-radius-arch: 9999px 9999px var(--ahil-radius-md) var(--ahil-radius-md);
  --ahil-shadow-xs: 0 1px 2px rgba(29,29,29,.06);
  --ahil-shadow-sm: 0 1px 3px rgba(29,29,29,.08), 0 1px 2px rgba(29,29,29,.04);
  --ahil-shadow-md: 0 4px 12px rgba(29,29,29,.08), 0 2px 4px rgba(29,29,29,.04);
  --ahil-shadow-lg: 0 12px 28px rgba(29,29,29,.10), 0 4px 8px rgba(29,29,29,.04);
  --ahil-shadow-xl: 0 24px 56px rgba(29,29,29,.12), 0 8px 16px rgba(29,29,29,.05);
  --ahil-shadow-violet: 0 10px 30px rgba(140,82,255,.28);
  --ahil-shadow-signal: 0 10px 30px rgba(255,49,49,.24);

  --ahil-ease-out: cubic-bezier(.22,1,.36,1);
  --ahil-ease-swoosh: cubic-bezier(.65,0,.35,1);
  --ahil-dur-fast: 140ms;
  --ahil-dur-base: 240ms;
  --ahil-dur-slow: 480ms;
  --ahil-container: 1200px;
}

/* ---------- 5. SEMANTIC LAYER ---------- */
/* Reference these in components - never the primitives directly. */
:root, [data-theme="light"] {
  --ahil-bg-canvas: var(--ahil-white);
  --ahil-bg-subtle: var(--ahil-slate-50);
  --ahil-bg-muted: var(--ahil-slate-100);
  --ahil-bg-inverse: var(--ahil-slate-950);
  --ahil-bg-brand-subtle: var(--ahil-violet-50);
  --ahil-bg-accent-subtle: var(--ahil-ember-50);
  --ahil-bg-signal-subtle: var(--ahil-signal-50);
  --ahil-text-primary: var(--ahil-slate-950);
  --ahil-text-secondary: var(--ahil-slate-700);
  --ahil-text-tertiary: var(--ahil-slate-600);
  --ahil-text-inverse: var(--ahil-white);
  --ahil-text-brand: var(--ahil-violet-600);
  --ahil-text-accent: var(--ahil-ember-700);
  --ahil-text-signal: var(--ahil-signal-600);
  --ahil-text-link: var(--ahil-violet-600);
  --ahil-border-subtle: var(--ahil-slate-100);
  --ahil-border-default: var(--ahil-slate-200);
  --ahil-border-strong: var(--ahil-slate-400);
  --ahil-border-brand: var(--ahil-violet-500);
  --ahil-action-primary-bg: var(--ahil-violet-600);
  --ahil-action-primary-bg-hover: var(--ahil-violet-700);
  --ahil-action-primary-fg: var(--ahil-white);
  --ahil-action-signal-bg: var(--ahil-signal-600);
  --ahil-action-signal-bg-hover: var(--ahil-signal-700);
  --ahil-action-signal-fg: var(--ahil-white);
  --ahil-focus-ring: var(--ahil-violet-500);
  --ahil-success: var(--ahil-verdant-600);
  --ahil-warning: var(--ahil-ember-700);
  --ahil-danger: var(--ahil-signal-600);
  --ahil-info: var(--ahil-violet-600);
}

[data-theme="dark"] {
  --ahil-bg-canvas: var(--ahil-slate-950);
  --ahil-bg-subtle: var(--ahil-slate-900);
  --ahil-bg-muted: var(--ahil-slate-800);
  --ahil-bg-inverse: var(--ahil-white);
  --ahil-bg-brand-subtle: #241542;
  --ahil-bg-accent-subtle: #2E1A08;
  --ahil-bg-signal-subtle: #2E0D0D;
  --ahil-text-primary: #F7F7F7;
  --ahil-text-secondary: var(--ahil-slate-300);
  --ahil-text-tertiary: var(--ahil-slate-400);
  --ahil-text-inverse: var(--ahil-slate-950);
  --ahil-text-brand: var(--ahil-violet-300);
  --ahil-text-accent: var(--ahil-ember-400);
  --ahil-text-signal: var(--ahil-signal-400);
  --ahil-text-link: var(--ahil-violet-300);
  --ahil-border-subtle: var(--ahil-slate-900);
  --ahil-border-default: var(--ahil-slate-800);
  --ahil-border-strong: var(--ahil-slate-600);
  --ahil-border-brand: var(--ahil-violet-500);
  --ahil-action-primary-bg: var(--ahil-violet-500);
  --ahil-action-primary-bg-hover: var(--ahil-violet-400);
  --ahil-action-primary-fg: var(--ahil-slate-950);
  --ahil-action-signal-bg: var(--ahil-signal-500);
  --ahil-action-signal-bg-hover: var(--ahil-signal-400);
  --ahil-action-signal-fg: var(--ahil-slate-950);
  --ahil-focus-ring: var(--ahil-violet-400);
  --ahil-success: var(--ahil-verdant-400);
  --ahil-warning: var(--ahil-ember-400);
  --ahil-danger: var(--ahil-signal-400);
  --ahil-info: var(--ahil-violet-300);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}