/* Sidecar design tokens — authored for design-sync from src/theme.js.
   The app itself styles via React Native StyleSheet (inline styles through
   react-native-web), so these custom properties exist for the design agent's
   own layout glue, not for the components. Keep values in lockstep with
   src/theme.js (C / R / S / SKY_THEMES). */
:root {
  /* ── Backgrounds ── */
  --sidecar-bg: #F5F5F7;
  --sidecar-surface: #FFFFFF;
  --sidecar-surface-alt: #F0F0F3;

  /* ── Text ── */
  --sidecar-text-1: #111111;
  --sidecar-text-2: #6E6E73;
  --sidecar-text-3: #AEAEB2;

  /* ── Brand accent (periwinkle — reserved for interactive chrome) ── */
  --sidecar-accent: #6B9FE4;
  --sidecar-accent-soft: #EEF3FB;
  --sidecar-accent-dark: #4A7FC1;

  /* ── Birthday purple ── */
  --sidecar-purple: #BB95E4;

  /* ── Structure ── */
  --sidecar-border: #E5E5EA;
  --sidecar-divider: #F2F2F7;

  /* ── Semantic ── */
  --sidecar-danger: #D92D20;
  --sidecar-success: #2B8A3E;
  --sidecar-done-green: #5DC87A;

  /* ── Radii ── */
  --sidecar-radius-sm: 8px;
  --sidecar-radius-md: 12px;
  --sidecar-radius-lg: 16px;
  --sidecar-radius-xl: 20px;
  --sidecar-radius-full: 999px;

  /* ── Shadows (S.card / S.elevated) ── */
  --sidecar-shadow-card: 0 1px 4px rgba(0, 0, 0, 0.06);
  --sidecar-shadow-elevated: 0 2px 8px rgba(0, 0, 0, 0.10);

  /* ── Sky themes: the app ground is a vertical 4-stop gradient
        (stops at 0%, 32%, 58%, 100%). Dawn is the default theme. ── */
  --sidecar-sky-dawn: linear-gradient(to bottom, #C3D7F2 0%, #E9EFF7 32%, #F6F3EF 58%, #FAEFE4 100%);
  --sidecar-sky-dusk: linear-gradient(to bottom, #C3D7F2 0%, #E9EFF7 32%, #F2EFF7 58%, #EFE2F6 100%);
  --sidecar-sky-sage: linear-gradient(to bottom, #C3D7F2 0%, #E9EFF7 32%, #F3F5F1 58%, #EFF5EE 100%);

  /* ── Tertiary families (ambient, non-interactive surfaces) per theme ── */
  --sidecar-tert-soft-dawn: #FBEBDD;
  --sidecar-tert-dawn: #E8A87C;
  --sidecar-tert-dark-dawn: #B26E45;
  --sidecar-tert-soft-dusk: #F2E7F8;
  --sidecar-tert-dusk: #BB95E4;
  --sidecar-tert-dark-dusk: #7D5BA6;
  --sidecar-tert-soft-sage: #E9F1EA;
  --sidecar-tert-sage: #9CBFA0;
  --sidecar-tert-dark-sage: #5E8A63;
}

body {
  font-family: 'SourceSans3_400Regular', 'Source Sans 3', sans-serif;
  color: var(--sidecar-text-1);
}