/* Aroma Real Estate Design Tokens — Extracted from Stitch Visual Source of Truth */
:root {
  /* Surfaces & Canvas */
  --color-surface: #fbfbf9;
  --color-surface-bright: #fbfbf9;
  --color-surface-dim: #dadad8;
  --color-surface-container-lowest: #ffffff;
  --color-surface-container-low: #f4f4f2;
  --color-surface-container: #eeeeec;
  --color-surface-container-high: #e8e8e6;
  --color-surface-container-highest: #e2e3e1;
  --color-surface-stone: #efece6;

  /* Typography & Foreground */
  --color-on-surface: #1a1a1a;
  --color-on-surface-variant: #444748;
  --color-outline: #747878;
  --color-outline-variant: #dcd7ce;

  /* Primary Brand Authority */
  --color-primary: #1a1a1a;
  --color-on-primary: #ffffff;
  --color-primary-container: #1c1b1b;
  --color-on-primary-container: #858383;
  --color-primary-fixed: #e5e2e1;
  --color-primary-fixed-dim: #c8c6c5;

  /* Secondary Botanical (Margalla / Gulberg Agro-Farms) */
  --color-secondary: #2b382f;
  --color-on-secondary: #ffffff;
  --color-secondary-container: #d2e1d4;
  --color-on-secondary-container: #56645a;

  /* Tertiary Architectural Metallic (Muted Brass) */
  --color-tertiary: #9b804e;
  --color-on-tertiary: #ffffff;
  --color-tertiary-container: #271900;
  --color-on-tertiary-container: #9b804e;
  --color-tertiary-fixed: #ffdea5;

  /* Inverted Surfaces (Nocturnal / Footer) */
  --color-inverse-surface: #1c1b1b;
  --color-inverse-on-surface: #f1f1ef;

  /* Feedback */
  --color-error: #ba1a1a;
  --color-error-container: #ffdad6;
  --color-success: #2b382f;

  /* Typography Families */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Standard Type Scale (8 tiers across entire system) */
  --text-xs: 0.6875rem;   /* 11px */
  --text-sm: 0.8125rem;  /* 13px */
  --text-base: 0.9375rem;/* 15px */
  --text-lg: 1.125rem;    /* 18px */
  --text-xl: 1.375rem;    /* 22px */
  --text-2xl: 1.75rem;    /* 28px */
  --text-3xl: 2.5rem;     /* 40px */
  --text-4xl: 3.5rem;     /* 56px */

  /* Spacing Scale */
  --space-2xs: 0.125rem;  /* 2px */
  --space-xs: 0.25rem;    /* 4px */
  --space-sm: 0.5rem;     /* 8px */
  --space-md: 1rem;       /* 16px */
  --space-lg: 2rem;       /* 32px */
  --space-xl: 3.5rem;     /* 56px */
  --space-2xl: 6rem;      /* 96px */
  --space-3xl: 8rem;      /* 128px */

  /* Layout Containers & Insets */
  --max-width: 1440px;
  --compact-width: 1080px;
  --gutter-desktop: clamp(1.5rem, 2.5vw, 2.25rem); /* 24–36px */
  --margin-desktop: 4rem;    /* 64px */
  --gutter-tablet: 1.5rem;   /* 24px */
  --margin-tablet: 2rem;     /* 32px */
  --gutter-mobile: 1rem;     /* 16px */
  --margin-mobile: 1.25rem;  /* 20px */
  --header-height: 80px;

  /* Shapes & Radii */
  --radius-none: 0px;
  --radius-xs: 2px;
  --radius-sm: 0;
  --radius-md: 0;
  --radius-lg: 0;
  --radius-xl: 0;
  --radius-2xl: 0;
  --radius-pill: 9999px;

  /* Hairline Rules */
  --border-hairline: 1px solid var(--color-outline-variant);
  --border-structural: 1px solid var(--color-primary);
  --border-accent: 1px solid var(--color-tertiary);
}