/* ============================================================
   X-Pro Appliance Service — Design Tokens
   Extracted from "X-Pro London Ontario" (Claude Design import)
   Single source of truth for colour, type, spacing, radius,
   shadow and motion. Consume via var(--xp-*).
   ============================================================ */

:root {
  /* ---------- Brand ---------- */
  --xp-brand: #F5B61C;          /* Amber — primary action, accents */
  --xp-brand-hover: #E0A50F;    /* Amber pressed / hover */
  --xp-brand-tint: #FCF3D9;     /* Soft amber — icon wells */
  --xp-brand-glow: rgba(245, 182, 28, .32);

  /* ---------- Ink (text + dark surfaces) ---------- */
  --xp-ink: #101828;            /* Near-black — headings, dark UI */
  --xp-ink-700: #344054;        /* Default body copy */
  --xp-ink-500: #667085;        /* Muted / secondary copy */
  --xp-on-dark-1: #C8CEDA;      /* Body copy on dark */
  --xp-on-dark-2: #9AA4B5;      /* Muted copy on dark */

  /* ---------- Status ---------- */
  --xp-success: #16A34A;        /* Available / verified / checks */
  --xp-success-tint: #E7F6ED;   /* Soft green well */

  /* ---------- Google brand (review card) ---------- */
  --xp-google-blue: #4285F4;
  --xp-google-green: #34A853;
  --xp-google-yellow: #FBBC05;
  --xp-google-red: #EA4335;

  /* ---------- Surfaces ---------- */
  --xp-white: #ffffff;
  --xp-surface: #ffffff;        /* Cards */
  --xp-surface-1: #F4F5F7;      /* Subtle panel / hero wash */
  --xp-surface-2: #EAECF0;      /* Alternating section band */
  --xp-surface-warm: #FAFAF7;   /* Warm page ground */

  /* ---------- Dark surfaces ---------- */
  --xp-dark: #101828;           /* Utility bar, footer, CTA */
  --xp-dark-raised: #1B2435;    /* Raised chip on dark */
  --xp-dark-border: #232E42;    /* Divider on dark */
  --xp-dark-border-2: #2A3548;  /* Border on raised dark */

  /* ---------- Borders ---------- */
  --xp-border: #E4E7EC;         /* Default hairline */
  --xp-border-soft: #EAECF0;    /* Softer hairline */
  --xp-border-strong: #E0E3EA;  /* Band edges */
  --xp-border-input: #D0D5DD;   /* Form controls */
  --xp-border-muted: #D7DBE3;   /* Placeholder blocks */

  /* ---------- Typography ---------- */
  --xp-font-display: 'Plus Jakarta Sans', system-ui, -apple-system, Segoe UI, sans-serif;
  --xp-font-body: 'Manrope', system-ui, -apple-system, Segoe UI, sans-serif;
  --xp-font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  --xp-weight-regular: 400;
  --xp-weight-medium: 500;
  --xp-weight-semibold: 600;
  --xp-weight-bold: 700;
  --xp-weight-extrabold: 800;

  /* Fluid type scale (min → preferred → max) */
  --xp-text-display: clamp(36px, 4.6vw, 58px);  /* Hero H1 */
  --xp-text-h2: clamp(28px, 3.4vw, 42px);       /* Section H2 */
  --xp-text-h2-sm: 28px;                        /* Compact H2 — flat in the design */
  --xp-text-h3: 19px;                           /* Card title */
  --xp-text-lead: clamp(16px, 1.5vw, 19px);     /* Hero lead */
  --xp-text-body-lg: 16.5px;
  --xp-text-body: 15px;
  --xp-text-sm: 14px;
  --xp-text-xs: 13px;
  /* Form labels. 12px sat under the 14px floor for supporting text, and it was
     the one place the scale asked someone to read small print while typing. */
  --xp-text-label: 14px;
  --xp-text-eyebrow: 13px;

  --xp-leading-tight: 1.06;
  --xp-leading-snug: 1.2;
  --xp-leading-normal: 1.5;
  --xp-leading-relaxed: 1.6;
  --xp-leading-loose: 1.65;

  --xp-tracking-display: -.025em;
  --xp-tracking-heading: -.02em;
  --xp-tracking-eyebrow: .08em;
  --xp-tracking-eyebrow-wide: .1em;

  /* ---------- Radius ---------- */
  --xp-radius-sm: 9px;
  --xp-radius: 11px;    /* Buttons, inputs */
  --xp-radius-md: 13px;
  --xp-radius-lg: 16px; /* Cards */
  --xp-radius-xl: 22px; /* Feature panels */
  --xp-radius-2xl: 24px;/* CTA banner */
  --xp-radius-pill: 999px;

  /* ---------- Shadows ---------- */
  --xp-shadow-xs: 0 4px 12px rgba(16, 24, 40, .04);
  --xp-shadow-sm: 0 6px 18px rgba(16, 24, 40, .05);
  --xp-shadow-md: 0 16px 34px rgba(16, 24, 40, .12);
  --xp-shadow-lg: 0 24px 50px rgba(16, 24, 40, .12);
  --xp-shadow-xl: 0 30px 60px rgba(16, 24, 40, .14);
  --xp-shadow-brand: 0 12px 24px rgba(245, 182, 28, .32);
  --xp-shadow-brand-lg: 0 14px 28px rgba(245, 182, 28, .34);

  /* ---------- Layout ---------- */
  --xp-container: 1200px;
  --xp-container-narrow: 1080px;
  --xp-container-text: 820px;
  --xp-gutter: 24px;
  --xp-section-y: 78px;

  /* ---------- Spacing scale (4px base) ---------- */
  --xp-space-1: 4px;
  --xp-space-2: 8px;
  --xp-space-3: 12px;
  --xp-space-4: 16px;
  --xp-space-5: 20px;
  --xp-space-6: 24px;
  --xp-space-8: 32px;
  --xp-space-10: 40px;
  --xp-space-12: 48px;
  --xp-space-16: 64px;
  --xp-space-20: 78px;

  /* ---------- Motion ---------- */
  --xp-ease: cubic-bezier(.4, 0, .2, 1);
  --xp-transition-fast: .15s var(--xp-ease);
  --xp-transition: .25s var(--xp-ease);
}