/* ==========================================================
   ORA HOME SOLUTIONS — DESIGN TOKENS
   Core style variables for local home maintenance services.
   ========================================================== */

:root {
  /* ── Brand Colors ── */
  --brand-dark: #0b1320;           /* Deep Slate Navy — Hero, footer, dark sections, text, main buttons */
  --brand-blue: #0b1320;           /* Replaced with Slate Dark Navy for a premium monochrome look */
  --brand-blue-hover: #1e293b;     /* Slate 800 hover for primary buttons */
  --brand-orange: #4f46e5;         /* Premium Indigo — Accent color used very sparingly */
  --brand-orange-hover: #4338ca;   /* Darker Indigo for hover states */
  --brand-green: #10b981;          /* WhatsApp Green — Reserved strictly for micro-icons */
  
  /* ── Tints & Surfaces ── */
  --orange-bg-soft: #faf9f5;       /* Premium soft alabaster/cream for organic highlights */
  --blue-bg-soft: #f5f3ff;         /* Premium soft indigo tint for badges & highlight blocks */
  --white: #ffffff;
  --surface-light: #f8fafc;        /* Clean light gray background */
  --surface-warm: #faf9f5;         /* Premium warm cream background band */
  --surface-card: #ffffff;         /* Card background */
  
  /* ── Borders & Dividers ── */
  --hairline: #e2e8f0;             /* Standard card borders & dividing lines */
  --hairline-dark: rgba(255, 255, 255, 0.08); /* Borders in dark sections */
  
  /* ── Text Colors ── */
  --text-main: #475569;            /* Body copy on light surfaces (Slate 600) */
  --text-strong: #0f172a;          /* Headings, titles, emphasizes (Slate 900) */
  --muted-on-dark: #94a3b8;         /* Subtitles & descriptions on dark navy (Slate 400) */
  --blue-on-dark: #a3c7ff;         /* Links and stats on dark navy */
  --orange-on-dark: #ffb894;       /* Urgency text on dark navy */
  
  /* ── Accent ── */
  --accent-rating: #fbbf24;        /* Star rating gold (Amber 400) */
  --accent-rating-bg: #fffbeb;     /* Star rating background */

  /* ── Typography ── */
  --font-display: 'Outfit', system-ui, -apple-system, sans-serif;
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* Typography scale */
  --fs-hero: clamp(38px, 5.2vw, 58px);
  --fs-h2: clamp(28px, 3.6vw, 42px);
  --fs-h3: clamp(22px, 2.4vw, 30px);
  --fs-h4: 22px;
  --fs-eyebrow: 13px;
  --fs-body: 16px;
  --fs-small: 14px;
  --fs-stat: clamp(40px, 4.5vw, 60px);

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --lh-heading: 1.15;
  --lh-body: 1.625;

  --ls-eyebrow: 0.18em;

  /* ── Radii ── */
  --r-section: 24px;               /* Major section panels */
  --r-card: 16px;                  /* Standard cards */
  --r-image: 14px;                 /* Photos & previews */
  --r-pill: 999px;                 /* Buttons, action elements, tags */

  /* ── Spacing ── */
  --container-max: 1240px;
  --container-padding: 24px;
  --section-y-desktop: 90px;
  --section-y-mobile: 60px;
  --card-gap: 24px;

  /* ── Motion & Transitions ── */
  --t-fast: 0.2s ease;
  --t-default: 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  --t-slow: 0.5s ease;

  /* ── Shadows ── */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(11, 19, 32, 0.05), 0 2px 4px -2px rgba(11, 19, 32, 0.05);
  --shadow-lg: 0 10px 15px -3px rgba(11, 19, 32, 0.08), 0 4px 6px -4px rgba(11, 19, 32, 0.08);
  --shadow-card-hover: 0 20px 40px -20px rgba(11, 19, 32, 0.12);
  --shadow-card-deep: 0 30px 60px -30px rgba(0, 0, 0, 0.4);
}