/* Diabudy design tokens. One source for the website and the mobile prototype.
   The React Native app reads the same values from theme.js. */
:root {
  /* brand */
  --sun: #FFC12E;
  --sun-light: #FFE08A;
  --coral: #FF5E57;
  --coral-deep: #D63A34;      /* AA on white for text (4.65:1) */
  --teal: #12B8A6;
  --teal-deep: #0B7F73;       /* AA on white for text */
  --teal-soft: #BFF1EA;
  --violet: #7C5CFA;
  --violet-soft: #E4DCFF;
  --pink: #FF8FB1;

  /* neutrals (light) */
  --ink: #1F2340;
  --ink-2: #565B7A;
  --ink-3: #8A8FA8;
  --bg: #FFF8F1;
  --bg-2: #FFE9D6;
  --surface: #FFFFFF;
  --line: #F1E3D4;

  /* glucose range scale: ALWAYS paired with an icon + label, never colour alone */
  --g-low: #7C5CFA;        /* arrow down */
  --g-in: #12B8A6;         /* check */
  --g-high: #F59E0B;       /* arrow up */
  --g-veryhigh: #E4572E;   /* double arrow up */

  /* mood scale (warm, uplifting; separate from glucose colours) */
  --m1: #8F9BFF; --m2: #C4B5FD; --m3: #FFD66B; --m4: #FFB347; --m5: #FF6B57;

  /* gradients */
  --grad-brand: linear-gradient(135deg, #FFC12E 0%, #FF5E57 100%);
  --grad-cta: linear-gradient(135deg, #FFD65C 0%, #FFB020 100%);
  --grad-sky: linear-gradient(180deg, #FFF3DD 0%, #FFDDBA 55%, #FFB69A 100%);

  /* shape + depth */
  --r-sm: 12px; --r-md: 20px; --r-lg: 28px; --r-xl: 36px; --r-pill: 999px;
  --shadow-1: 0 2px 6px rgba(122, 58, 32, .08);
  --shadow-2: 0 10px 30px rgba(122, 58, 32, .12);
  --shadow-cta: 0 8px 20px rgba(255, 176, 32, .45);

  /* type: Nunito (rounded, friendly, very readable). Self-host before launch for privacy. */
  --font: 'Nunito', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* spacing scale (px): 4 8 12 16 24 32 48 64 96 */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;
}

/* Dark theme: deep indigo night, same warm accents. */
:root[data-theme="dark"] {
  --ink: #F6F2FF;
  --ink-2: #C9C6E4;
  --ink-3: #9A97BD;
  --bg: #14162B;
  --bg-2: #1E2140;
  --surface: #1E2140;
  --line: #2E325A;
  --teal-soft: #0F3D3A;
  --violet-soft: #2A2358;
  --coral-deep: #FF8A84;
  --teal-deep: #4FE0CF;
  --shadow-1: 0 2px 6px rgba(0, 0, 0, .35);
  --shadow-2: 0 10px 30px rgba(0, 0, 0, .45);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #F6F2FF; --ink-2: #C9C6E4; --ink-3: #9A97BD;
    --bg: #14162B; --bg-2: #1E2140; --surface: #1E2140; --line: #2E325A;
    --teal-soft: #0F3D3A; --violet-soft: #2A2358; --coral-deep: #FF8A84; --teal-deep: #4FE0CF;
  }
}