/* ==========================================================================
   D&D Pro Cleaning Services — Design Tokens
   Source: client Design System (Drive: D&D Cleaning Svcs/01_Brand Assets)
   Do not hand-edit values here without checking the source design system.
   ========================================================================== */

/* ---- Fonts ---- */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@600;700;800;900&family=Source+Sans+3:wght@400;500;600;700&display=swap');

:root {
  /* ---- Brand Blue (primary) ---- */
  --blue-900: #0A1D3D; /* deepest navy — dark section backgrounds, footer (matches official brand navy per business card assets) */
  --blue-800: #0D2E4E;
  --blue-700: #0F4C81; /* primary brand blue — nav, headings on light bg */
  --blue-600: #145FA0; /* primary interactive (buttons, links) */
  --blue-500: #1C74BD; /* hover/lighter interactive */
  --blue-100: #E4ECF3; /* pale tint — section backgrounds, chips */
  --blue-050: #F2F6F9; /* faintest tint */

  /* ---- Steel / Charcoal (neutral) ---- */
  --steel-950: #14181B; /* body copy, near-black */
  --steel-800: #2B3237;
  --steel-700: #414A50;
  --steel-500: #6D767C;
  --steel-300: #A6A8AB; /* matches official brand silver per business card assets */
  --steel-200: #C7CDD1;
  --steel-100: #E1E5E7;
  --steel-050: #F4F5F6;
  --white: #FFFFFF;
  --paper: #FAFBFB; /* app background, cool off-white */

  /* ---- Accent (CTA / emphasis only — use sparingly) ---- */
  --accent-700: #A84E0E;
  --accent-600: #C75E12; /* safety-amber — primary CTA fill */
  --accent-500: #E07620; /* hover state */
  --accent-100: #FBE8D6; /* pale tint for badges */

  /* ---- Semantic aliases ---- */
  --color-bg: var(--paper);
  --color-bg-dark: var(--blue-900);
  --color-surface: var(--white);
  --color-surface-tint: var(--blue-050);
  --color-border: var(--steel-200);
  --color-border-strong: var(--steel-700);

  --color-text: var(--steel-950);
  --color-text-muted: var(--steel-700);
  --color-text-subtle: var(--steel-500);
  --color-text-inverse: var(--white);
  --color-text-inverse-muted: var(--steel-200);

  --color-brand: var(--blue-700);
  --color-brand-strong: var(--blue-900);
  --color-interactive: var(--blue-600);
  --color-interactive-hover: var(--blue-500);

  --color-cta: var(--accent-600);
  --color-cta-hover: var(--accent-500);
  --color-cta-text: var(--white);

  --color-success: #1E6E4E;
  --color-link: var(--blue-600);
  --color-link-hover: var(--blue-500);

  /* ---- Placeholder (build-time only — remove before launch) ---- */
  --color-placeholder-border: #A6AEB3;
  --color-placeholder-bg: #F4F5F6;
  --color-placeholder-text: #6D767C;

  /* ---- Type ---- */
  --font-display: 'Archivo', 'Arial Narrow', Arial, sans-serif;
  --font-body: 'Source Sans 3', 'Segoe UI', Arial, sans-serif;

  --text-display: 700 clamp(2.5rem, 4vw, 4rem)/1.05 var(--font-display);
  --text-h1: 800 clamp(2rem, 3.2vw, 3rem)/1.1 var(--font-display);
  --text-h2: 700 clamp(1.5rem, 2.4vw, 2.25rem)/1.15 var(--font-display);
  --text-h3: 700 1.375rem/1.25 var(--font-display);
  --text-h4: 600 1.125rem/1.3 var(--font-display);

  --text-body-lg: 400 1.1875rem/1.55 var(--font-body);
  --text-body: 400 1rem/1.55 var(--font-body);
  --text-body-sm: 400 0.875rem/1.5 var(--font-body);
  --text-label: 600 0.8125rem/1.2 var(--font-body);
  --text-eyebrow: 700 0.75rem/1.2 var(--font-body);

  --tracking-eyebrow: 0.08em;
  --tracking-tight: -0.01em;

  /* ---- Spacing / Grid (4px base unit) ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  --radius-sm: 4px;   /* inputs, chips */
  --radius-md: 6px;   /* buttons, cards */
  --radius-lg: 10px;  /* large panels/photos */
  --radius-full: 999px; /* pill badges only */

  --container-max: 1200px;
  --container-pad: clamp(20px, 5vw, 64px);
  --section-pad-y: clamp(56px, 8vw, 120px);

  --border-thin: 1px;
  --border-thick: 2px;

  /* ---- Elevation ---- */
  --shadow-none: none;
  --shadow-xs: 0 1px 2px rgba(10, 32, 56, 0.06);
  --shadow-sm: 0 2px 6px rgba(10, 32, 56, 0.08);
  --shadow-md: 0 6px 16px rgba(10, 32, 56, 0.10);
  --shadow-lg: 0 16px 32px rgba(10, 32, 56, 0.14);

  --focus-ring: 0 0 0 3px rgba(20, 95, 160, 0.35);

  /* ---- Motion ---- */
  --transition-fast: 130ms ease;
}