/* Design tokens — derived from brand-guidelines SKILL.md v0.1.
   Change values here, never hardcode in components. */

:root {
  /* Color — primary & accent */
  --c-primary:        #0F2A44;
  --c-primary-light:  #1E4877;
  --c-secondary:      #A0531E;   /* darker copper — 5.5:1 on white, passes WCAG AA */
  --c-secondary-light:#B8631F;   /* hover state */
  --c-accent-text:    #8A4413;   /* copper for text on white — 7:1, passes AAA */
  --c-accent-on-dark: #E38A4E;   /* copper for text/accents on navy — 5.6:1, passes AA */
  --c-whatsapp:       #075E54;   /* official WhatsApp dark green — 7.6:1 with white */
  --c-whatsapp-hover: #0A4F46;   /* hover state, darker still */
  --c-whatsapp-bright:#25D366;   /* iconic bright green — reserved for decorative icons only */
  --c-whatsapp-dark:  #075E54;   /* alias for backwards compat */

  /* Color — neutrals */
  --c-text:           #1C232B;
  --c-text-mid:       #5A6470;
  --c-surface:        #FFFFFF;
  --c-surface-warm:   #F3F1EC;
  --c-border:         #E3DED4;

  /* Color — semantic */
  --c-error:          #B42318;
  --c-error-bg:       #FEF3F2;
  --c-success:        #15803D;
  --c-success-bg:     #F0FDF4;

  /* Typography */
  --ff-heading: 'Manrope', -apple-system, 'Segoe UI', Roboto, system-ui, sans-serif;
  --ff-body:    'Inter', -apple-system, 'Segoe UI', Roboto, system-ui, sans-serif;

  --fs-xs:   0.8125rem;   /* 13px */
  --fs-sm:   0.875rem;    /* 14px */
  --fs-base: 1rem;        /* 16px */
  --fs-lg:   1.125rem;    /* 18px */
  --fs-xl:   1.25rem;     /* 20px */
  --fs-2xl:  1.5rem;      /* 24px */
  --fs-3xl:  1.875rem;    /* 30px */
  --fs-4xl:  2.25rem;     /* 36px */
  --fs-5xl:  3rem;        /* 48px — H1 desktop */

  --lh-tight: 1.15;
  --lh-snug:  1.3;
  --lh-body:  1.6;

  /* Spacing (8px grid) */
  --s-1: 0.25rem;  /* 4 */
  --s-2: 0.5rem;   /* 8 */
  --s-3: 0.75rem;  /* 12 */
  --s-4: 1rem;     /* 16 */
  --s-5: 1.5rem;   /* 24 */
  --s-6: 2rem;     /* 32 */
  --s-7: 3rem;     /* 48 */
  --s-8: 4rem;     /* 64 */
  --s-9: 6rem;     /* 96 */

  /* Radius */
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;

  /* Shadow */
  --sh-sm: 0 1px 2px rgba(15, 42, 68, 0.06);
  --sh-md: 0 4px 12px rgba(15, 42, 68, 0.08);
  --sh-lg: 0 16px 40px rgba(15, 42, 68, 0.12);

  /* Layout */
  --container:       1200px;
  --container-pad-x: 1.5rem;   /* 24 mobile */
  --section-py-mob:  3.5rem;   /* 56 */
  --section-py-desk: 6rem;     /* 96 */

  /* Motion */
  --t-fast:   150ms ease-out;
  --t-medium: 200ms ease-out;

  /* Header */
  --header-h: 72px;
}

@media (min-width: 768px) {
  :root {
    --container-pad-x: 2rem;
    --fs-5xl: 3rem;
  }
}