/* ===================================================
   Helpu Design System — Tokens
   Premium home-interiors + ecommerce brand system
   =================================================== */
:root {
  /* Brand colors — sampled from the HelpU logo (navy / teal / gold-orange arrow) */
  --color-primary: #24487C;       /* logo navy — header text, headings */
  --color-primary-dark: #16294A;  /* deep navy — topbar, footer */
  --color-primary-light: #EAF0F8;
  --color-accent: #F0691E;        /* logo arrow orange — primary CTA, price highlights */
  --color-accent-dark: #D6540F;
  --color-accent-light: #FDEBDD;
  --color-teal: #2FB4B4;          /* logo teal — secondary accent, links, "Company"-style highlights */
  --color-teal-dark: #23918F;
  --color-gold: #FDC02A;          /* logo arrow gold — premium accent, badges, dividers */

  /* Neutrals */
  --color-bg: #FAFAF9;
  --color-surface: #FFFFFF;
  --color-border: #E5E8ED;
  --color-text: #1C2430;
  --color-text-muted: #5C6672;
  --color-text-inverse: #FFFFFF;

  /* Feedback */
  --color-success: #2E7D5B;
  --color-error: #C6392B;

  /* Typography */
  --font-heading: 'Poppins', 'Segoe UI', sans-serif;
  --font-body: 'Inter', 'Segoe UI', sans-serif;

  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.375rem;
  --fs-xl: 1.75rem;
  --fs-2xl: 2.25rem;
  --fs-3xl: 3rem;

  /* Spacing */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;

  /* Radius / Shadow */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;
  --shadow-sm: 0 2px 8px rgba(14, 70, 64, 0.08);
  --shadow-md: 0 8px 24px rgba(14, 70, 64, 0.12);
  --shadow-lg: 0 16px 48px rgba(14, 70, 64, 0.16);

  /* Layout */
  --container-max: 1280px;
  --header-h: 84px;
  --transition: 0.25s ease;
}