/* variables.css — design tokens mirrored from the Aneemarcom Android app's
   src/theme.js (colors, radii, spacing, shadows). The app defines one theme
   only (no dark palette), so this site ships one theme only — no
   [data-theme="dark"] overrides anywhere in this CSS.

   Surface/divider/secondary shades that theme.js doesn't define (it only
   gives two neutrals — bg and surface) are interpolated from the values it
   does define, noted inline below. */

:root {
  /* ── Brand / Primary (theme.js colors.primary/.primaryDark/.primaryLight) */
  --color-primary:           #2f5fe0;
  --color-primary-light:     #4e77e5; /* hover state — primary lightened ~15%, not in theme.js */
  --color-primary-pale:      #eaf0fe; /* = theme.js colors.primaryLight */
  --color-primary-dark:      #2447b3;
  --color-secondary:         #2f5fe0; /* theme.js defines one brand hue only — alias to primary */
  --color-secondary-light:   #4e77e5;

  /* ── Surfaces (theme.js only defines bg + surface; -low/-high interpolated) */
  --color-background:        #f4f6fb; /* theme.js colors.bg */
  --color-surface:           #ffffff; /* theme.js colors.surface */
  --color-surface-low:       #f8f9fc; /* between bg and surface */
  --color-surface-high:      #ecf5fb; /* = theme.js colors.skyBg */
  --color-surface-lowest:    #ffffff;

  /* ── Text (theme.js colors.text/.textMuted/.textFaint) */
  --color-text-primary:      #171b26;
  --color-text-secondary:    #5b6478;
  --color-text-muted:        #8891a3;
  --color-text-on-primary:   #ffffff;

  /* ── Borders & Dividers (theme.js colors.border/.borderStrong; divider interpolated) */
  --color-border:            #e2e6ef;
  --color-divider:           #eef0f5; /* = theme.js colors.grayBg */

  /* ── Semantic (theme.js colors.green/.amber/.red) */
  --color-success:           #1a8f5e;
  --color-success-bg:        #e5f7ee;
  --color-error:             #c62b3f;
  --color-error-bg:          #fbe8ea;
  --color-warning:           #b5730a;
  --color-warning-bg:        #fdf1de;

  /* ── Border Radius (theme.js radii: sm=6, md=10, lg=14, pill=999; xl extrapolated) */
  --radius-sm:               6px;
  --radius-md:                10px;
  --radius-lg:               14px;
  --radius-xl:               18px;
  --radius-pill:             9999px;

  /* ── Spacing (theme.js spacing scale; xxl extrapolated past its max of 40) */
  --space-xs:                4px;
  --space-sm:                8px;
  --space-md:                16px;
  --space-lg:                24px;
  --space-xl:                32px;
  --space-xxl:               48px;

  /* ── Typography (theme.js type scale; theme.js itself notes this scale is
       "authored, not mirrored" for the app too, since it has no web/CSS
       equivalent to copy from — same approach taken here) */
  --font-family:             -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-size-xxs:           10px;
  --font-size-xs:            11px;
  --font-size-sm:            13px;
  --font-size-md:            16px;
  --font-size-lg:            20px;
  --font-size-xl:            25px;
  --font-size-xxl:           32px;
  --font-size-hero:          40px;

  /* ── Elevation / Shadows (theme.js shadows: shadowColor #141826, converted
       from RN elevation/opacity/radius/offset to CSS box-shadow) */
  --shadow-sm:               0 1px 2px rgba(20, 24, 38, 0.06);
  --shadow-md:               0 4px 8px rgba(20, 24, 38, 0.08);
  --shadow-lg:               0 8px 16px rgba(20, 24, 38, 0.14);

  /* ── Motion (no app equivalent — RN has no CSS transitions) ─────────── */
  --transition-fast:         150ms ease;
  --transition-base:         250ms ease;

  /* ── Layout (site-only constants — no app equivalent) ───────────────── */
  --header-height:           64px;
  --container-max:           1200px;
  --content-max:             860px;
}