/* Design tokens extracted from FamilyWall 12.2.2 (com.familywall) resources.
   Colors resolved from values/colors.xml; dims from values/dimens.xml. */
:root {
  /* ---- Brand & semantic colors (light) ---- */
  --fw-primary: #4784ec;
  --fw-primary-dark: #3f76d4;
  --fw-primary-darker: #224073;
  --fw-primary-translucent: rgba(71,132,236,.28);
  --fw-on-primary: #ffffff;
  --fw-primary-container: #d3e2fb;

  --fw-secondary: var(--fw-primary);
  --fw-green: #7ebe68;
  --fw-green-dark: #018801;
  --fw-orange: #f16e00;
  --fw-red-1: #e72e5b;
  --fw-red-2: #e67c73;
  --fw-red-3: #f7285e;
  --fw-yellow: #ffe100;
  --fw-premium: #fec52e;
  --fw-premium-primary: #a572ea;
  --fw-premium-secondary: #fec42d;
  --fw-premium-variant1: #7a52cc;
  --fw-premium-variant2: #b485f2;

  --fw-bg: #efeff4;
  --fw-bg-higher: #fafafa;
  --fw-surface: #ffffff;
  --fw-surface-container: #ffffff;
  --fw-surface-container-lower: #f6f7fa;
  --fw-on-surface: #000000;
  --fw-text-primary: #000000;
  --fw-text-secondary: #808080;
  --fw-text-disabled: #737373;
  --fw-outline: #f0f0f0;
  --fw-outline-variant: #e0e0e0;
  --fw-ripple: rgba(0,0,0,.12);
  --fw-scrim-04: rgba(0,0,0,.04);
  --fw-scrim-08: rgba(0,0,0,.08);
  --fw-scrim-12: rgba(0,0,0,.12);
  --fw-skeleton: rgba(0,0,0,.12);
  --fw-negative: #e67c73;
  --fw-flight-mode: #a6a6a6;

  --fw-black-5: #f2f2f2;
  --fw-black-10: #e6e6e6;
  --fw-black-15: #d9d9d9;
  --fw-black-20: #cccccc;
  --fw-black-30: #bcbcc8;
  --fw-black-35: #a6a6a6;
  --fw-black-40: #999999;
  --fw-black-50: #808080;
  --fw-black-55: #737373;
  --fw-black-65: #595959;
  --fw-black-70: #4d4d4d;
  --fw-black-80: #333333;
  --fw-black-85: #21242e;
  --fw-black-90: #1a1a1a;

  /* ---- Event colors ---- */
  --ev-banana: #f6bf26; --ev-basil: #0b8043; --ev-blueberry: #3f51b5;
  --ev-flamingo: #e67c73; --ev-glacier: #66c0c6; --ev-grape: #8e24aa;
  --ev-graphite: #616161; --ev-hibiscus: #d25c80; --ev-lavender: #7986cb;
  --ev-mocha: #ad7c4c; --ev-onyx: #1a2421; --ev-pale-purple: #675e94;
  --ev-peach: #ffb07c; --ev-peacock: #039be5; --ev-sage: #33b679;
  --ev-tangerine: #f4511e; --ev-tomato: #d50000; --ev-default: var(--fw-primary);

  /* ---- File-type colors ---- */
  --file-doc: #6889bf; --file-image: #6f54a5; --file-other: #a29e96;
  --file-pdf: #f94a23; --file-presentation: #c9270b; --file-sound: #ffb413;
  --file-spreadsheet: #57a661; --file-video: #4fa0ca; --file-zip: #6e7b97;

  /* ---- Budget colors ---- */
  --budget-plus: #7aaa64; --budget-minus: #e68abb;
  --budget-exceeded-bg: #fae5e3; --budget-exceeded-track: #e67c73;

  /* ---- Type scale (sp -> rem, base 16) ---- */
  --fs-xxs: .625rem;   /* 10sp */
  --fs-xs: .6875rem;   /* 11sp */
  --fs-s: .75rem;      /* 12sp xSmall */
  --fs-sm: .875rem;    /* 14sp small */
  --fs-m: 1rem;        /* 16sp medium */
  --fs-l: 1.125rem;    /* 18sp large */
  --fs-xl: 1.25rem;    /* 20sp xLarge */
  --fs-xxl: 1.5rem;    /* 24sp xxLarge */
  --fs-xxxl: 1.75rem;  /* 28sp xxxLarge */

  /* ---- Radii ---- */
  --r-s: 4px; --r-m: 8px; --r-l: 12px; --r-xl: 16px; --r-xxl: 20px; --r-xxxl: 24px; --r-xxxxl: 28px; --r-round: 999px;

  /* ---- Spacing ---- */
  --sp-xxs: 2px; --sp-xs: 4px; --sp-s: 6px; --sp-m: 8px; --sp-l: 12px; --sp-xl: 16px; --sp-xxl: 24px;

  /* ---- Elevation ---- */
  --shadow-1: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
  --shadow-2: 0 4px 10px rgba(0,0,0,.10);
  --shadow-3: 0 8px 24px rgba(0,0,0,.14);

  /* ---- Sizing ---- */
  --toolbar-h: 56px;
  --dashboard-header-h: 80px;
  --bottomnav-h: 60px;
  --sidebar-w: 280px;
  --avatar-xs: 24px; --avatar-s: 28px; --avatar-m: 40px; --avatar-ml: 49px; --avatar-l: 58px; --avatar-xl: 74px; --avatar-xxl: 118px;

  /* ---- App shell nav (sidebar is always dark, independent of light/dark
     mode — persistent chrome, not screen content) ---- */
  --sidebar-bg: #10151f;
  --sidebar-bg-active: #232b3d;
  --sidebar-text: #e7e9ee;
  --sidebar-text-dim: #8b93a7;
  --sidebar-border: rgba(255,255,255,.08);

  --safe-t: env(safe-area-inset-top, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
}

/* Dark mode (device setting mirrors the app's Dark Mode option) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fw-bg: #121212;
    --fw-bg-higher: #1a1a1a;
    --fw-surface: #1e1e1e;
    --fw-surface-container: #232323;
    --fw-surface-container-lower: #1a1a1a;
    --fw-on-surface: #ffffff;
    --fw-text-primary: #f2f2f2;
    --fw-text-secondary: #a0a0a6;
    --fw-outline: #2c2c2e;
    --fw-outline-variant: #38383a;
    --fw-ripple: rgba(255,255,255,.10);
    --fw-scrim-04: rgba(255,255,255,.04);
    --fw-scrim-08: rgba(255,255,255,.08);
    --fw-scrim-12: rgba(255,255,255,.12);
    --fw-skeleton: rgba(255,255,255,.10);

    /* The --fw-black-N scale is "N% black over a light surface" — light-mode
       only by construction. Left undefined here, it falls through to its
       light-mode value (e.g. --fw-black-5: #f2f2f2), which in dark mode is
       indistinguishable from --fw-text-primary (also #f2f2f2) — invisible
       text on chips, segmented controls, disabled buttons, etc. Inverted to
       "N% white over a dark surface" so contrast holds in both themes. */
    --fw-black-5: rgba(255,255,255,.06);
    --fw-black-10: rgba(255,255,255,.10);
    --fw-black-15: rgba(255,255,255,.14);
    --fw-black-20: rgba(255,255,255,.18);
    --fw-black-30: rgba(255,255,255,.26);
  }
}
:root[data-theme="dark"] {
  --fw-bg: #121212;
  --fw-bg-higher: #1a1a1a;
  --fw-surface: #1e1e1e;
  --fw-surface-container: #232323;
  --fw-surface-container-lower: #1a1a1a;
  --fw-on-surface: #ffffff;
  --fw-text-primary: #f2f2f2;
  --fw-text-secondary: #a0a0a6;
  --fw-outline: #2c2c2e;
  --fw-outline-variant: #38383a;
  --fw-ripple: rgba(255,255,255,.10);
  --fw-scrim-04: rgba(255,255,255,.04);
  --fw-scrim-08: rgba(255,255,255,.08);
  --fw-scrim-12: rgba(255,255,255,.12);
  --fw-skeleton: rgba(255,255,255,.10);
  --fw-black-5: rgba(255,255,255,.06);
  --fw-black-10: rgba(255,255,255,.10);
  --fw-black-15: rgba(255,255,255,.14);
  --fw-black-20: rgba(255,255,255,.18);
  --fw-black-30: rgba(255,255,255,.26);
}