/* CAREpharma design tokens — from Figma (file y9s2DLXGf7ZD2BwEVVp8p9).
   Reusable across all carepharma-life pages. */
:root {
  /* Brand */
  --color-primary: #01727C;        /* main teal */
  --color-primary-deep: #046870;   /* badge / darker teal */
  --color-primary-ink: #005b64;    /* teal text on light */
  --color-primary-soft: #29bcb2;   /* accent teal */
  --color-primary-50: #def3f2;     /* teal tint */
  --color-primary-900: #005344;    /* deep teal heading */
  --color-primary-800: #006f61;    /* teal quote text */
  --color-primary-700: #008070;    /* teal tag / case-study text */

  /* Accent (orange) */
  --color-secondary: #f6851f;      /* orange quote bar */
  --color-secondary-ink: #945013;  /* brown eyebrow */
  --color-secondary-400: #f89d4c;  /* light orange eyebrow (dark hero) */
  --color-secondary-50: #fef3e9;   /* peach badge bg */

  /* Neutrals */
  --color-ink: #383938;            /* body text */
  --color-grey-500: #383938;
  --color-grey-400: #636363;
  --color-grey-300: #808082;
  --color-grey-200: #c1c1c1;
  --color-grey-100: #e6e6e6;
  --color-grey-50: #f7f7f7;
  --color-bg: #f7f7f7;
  --color-bg-02: #f7f9fb;          /* form card / contact card bg */
  --color-bg-02: #f7f9fb;
  --color-hero-bg: #f3f3f1;
  --color-white: #ffffff;

  /* Type */
  --font-family: 'Outfit', 'Noto Sans Thai', system-ui, sans-serif;
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;

  --fs-h1: 48px;
  --fs-h2: 32px;
  --fs-h3: 24px;
  --fs-body: 20px;
  --fs-small: 16px;
  --fs-small-2: 14px;

  /* Spacing */
  --space-4: 4px;
  --space-8: 8px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-64: 64px;
  --space-section: 96px;
  --space-edge: 150px;   /* desktop horizontal padding */

  /* Radius */
  --radius-12: 12px;
  --radius-24: 24px;
  --radius-pill: 999px;
}