/*
 * BlazorWind — design tokens and base styles.
 * Values come from the Family Planner design handoff (tokens.css), prefixed with --bw-.
 * Override any token on :root (or a container) to theme the components.
 */
:root {
  color-scheme: dark;

  /* Surfaces */
  --bw-color-ground: #15171c;
  --bw-color-surface: #1d2027;
  --bw-color-raised: #252932;
  --bw-color-raised-hover: #2d323c;
  --bw-color-raised-2: #2d313a;      /* switch track when off, dimmed avatars */
  --bw-color-sunken: #181a1f;        /* out-of-month calendar cells */
  --bw-color-line: rgba(255, 255, 255, .06);
  --bw-color-line-strong: rgba(255, 255, 255, .08);
  --bw-color-line-input: rgba(255, 255, 255, .10);
  --bw-color-line-field: rgba(255, 255, 255, .07);
  --bw-color-line-hover: rgba(255, 255, 255, .14);
  --bw-color-line-dashed: rgba(255, 255, 255, .16);
  --bw-color-grid: rgba(255, 255, 255, .05);         /* hour lines in the week grid */
  --bw-color-outline: rgba(255, 255, 255, .25);      /* empty checkboxes, "Anyone" avatar */
  --bw-color-handle: rgba(255, 255, 255, .18);       /* bottom-sheet handle, dashed add buttons */
  --bw-color-hover-faint: rgba(255, 255, 255, .02);
  --bw-color-overlay: rgba(8, 9, 11, .68);
  --bw-color-scrim: rgba(21, 23, 28, .82);  /* badges and buttons over photos */

  /* Text */
  --bw-color-text: #f3f0ea;
  --bw-color-text-2: #d8dbe0;
  --bw-color-text-3: #c9ccd3;
  --bw-color-text-secondary: #a3a7b0;
  --bw-color-text-muted: #8b909a;
  --bw-color-text-faint: #7d828c;
  --bw-color-text-ghost: #5d626c;    /* "No photo yet" placeholders */
  --bw-color-off: #3a3f4a;           /* unmet rules, empty meter */

  /* Accent */
  --bw-color-accent: #e8763a;
  --bw-color-accent-text: #f0915c;
  --bw-color-accent-hover: #ffb68c;
  --bw-color-accent-tint: rgba(232, 118, 58, .14);
  --bw-color-accent-tint-strong: rgba(232, 118, 58, .22);
  --bw-color-accent-border: rgba(232, 118, 58, .5);
  --bw-color-on-accent: #15171c;

  /* Status */
  --bw-color-success: #7fb3a3;
  --bw-color-success-tint: rgba(127, 179, 163, .14);
  --bw-color-success-text: #a9d2c5;
  --bw-color-warning: #e9c46a;
  --bw-color-warning-tint: rgba(233, 196, 106, .16);
  --bw-color-warning-text: #f2d68f;
  --bw-color-danger: #e58fb0;
  --bw-color-danger-tint: rgba(229, 143, 176, .14);
  --bw-color-danger-text: #f0b3ca;
  --bw-color-info: #8aa4e6;
  --bw-color-info-tint: rgba(138, 164, 230, .14);
  --bw-color-info-text: #b3c4f0;

  /* Family member colours (fills take dark text: --bw-color-on-accent) */
  --bw-member-teal: #7fb3a3;
  --bw-member-blue: #8aa4e6;
  --bw-member-yellow: #e9c46a;
  --bw-member-rose: #e58fb0;
  --bw-member-lilac: #b39ddb;
  --bw-member-sage: #a8c686;
  --bw-member-anyone: #a3a7b0;

  /* Nutrition bar */
  --bw-macro-protein: #e8763a;
  --bw-macro-carbs: #e9c46a;
  --bw-macro-fat: #7fb3a3;

  /* Type */
  --bw-font-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --bw-font-body: 'Manrope', system-ui, sans-serif;
  --bw-text-body: 15px;
  --bw-leading-body: 1.5;

  /* Radii */
  --bw-radius-hero: 24px;
  --bw-radius-card: 18px;
  --bw-radius-input: 14px;
  --bw-radius-dialog-field: 12px;
  --bw-radius-button: 12px;
  --bw-radius-small: 10px;
  --bw-radius-chip-inner: 6px;
  --bw-radius-pill: 999px;

  /* Sizing */
  --bw-touch-min: 44px;
  --bw-input-height: 52px;
  --bw-input-height-inset: 48px;
  --bw-chip-height: 40px;
  --bw-sidebar-width: 248px;

  /* Motion */
  --bw-ease-out: cubic-bezier(.2, .8, .2, 1);
  --bw-ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --bw-ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --bw-duration-fast: 120ms;
  --bw-duration: 200ms;
  --bw-duration-slow: 320ms;
  --bw-duration-enter: 300ms;
  --bw-duration-exit: 240ms;
  --bw-duration-pop: 340ms;
  --bw-duration-sheet: 340ms;
  --bw-duration-grow: 600ms;
  --bw-duration-spin: 800ms;
  --bw-duration-pulse: 2.4s;
  --bw-stagger-step: 40ms;

  /* Focus */
  --bw-focus-ring: 0 0 0 2px var(--bw-color-ground), 0 0 0 4px var(--bw-color-accent-text);
}

/* Opt-in page defaults: add class="bw-app" to <body> (or any container). */
.bw-app {
  margin: 0;
  background: var(--bw-color-ground);
  color: var(--bw-color-text);
  font-family: var(--bw-font-body);
  font-size: var(--bw-text-body);
  line-height: var(--bw-leading-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Hide content visually but keep it available to assistive technology. */
.bw-visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Show content only on mobile (below 760px) or only on desktop. */
@media (max-width: 759.98px) {
  .bw-desktop-only {
    display: none !important;
  }
}

@media (min-width: 760px) {
  .bw-mobile-only {
    display: none !important;
  }
}

/* Prevent the page scrolling behind an open dialog. */
.bw-scroll-locked {
  overflow: hidden !important;
}

/*
 * Motion. Shared keyframes that the components use, and utility classes for your own markup.
 *
 * bw-enter and bw-exit move from or to an offset while fading. Tune them per element with
 * --bw-enter-x, --bw-enter-y, --bw-enter-scale and --bw-enter-opacity (and the --bw-exit-* equivalents).
 * bw-pop overshoots with --bw-pop-from, --bw-pop-peak and --bw-pop-opacity. These properties don't
 * inherit, so setting one on a container never changes the animations inside it.
 */
@property --bw-enter-x { syntax: '<length-percentage>'; inherits: false; initial-value: 0px; }
@property --bw-enter-y { syntax: '<length-percentage>'; inherits: false; initial-value: 6px; }
@property --bw-enter-scale { syntax: '<number>'; inherits: false; initial-value: 1; }
@property --bw-enter-opacity { syntax: '<number>'; inherits: false; initial-value: 0; }
@property --bw-exit-x { syntax: '<length-percentage>'; inherits: false; initial-value: 0px; }
@property --bw-exit-y { syntax: '<length-percentage>'; inherits: false; initial-value: 6px; }
@property --bw-exit-scale { syntax: '<number>'; inherits: false; initial-value: 1; }
@property --bw-exit-opacity { syntax: '<number>'; inherits: false; initial-value: 0; }
@property --bw-pop-from { syntax: '<number>'; inherits: false; initial-value: .7; }
@property --bw-pop-peak { syntax: '<number>'; inherits: false; initial-value: 1.12; }
@property --bw-pop-opacity { syntax: '<number>'; inherits: false; initial-value: 1; }

@keyframes bw-enter {
  from { opacity: var(--bw-enter-opacity); transform: translate(var(--bw-enter-x), var(--bw-enter-y)) scale(var(--bw-enter-scale)); }
}

@keyframes bw-exit {
  to { opacity: var(--bw-exit-opacity); transform: translate(var(--bw-exit-x), var(--bw-exit-y)) scale(var(--bw-exit-scale)); }
}

@keyframes bw-fade-in {
  from { opacity: 0; }
}

@keyframes bw-fade-out {
  to { opacity: 0; }
}

@keyframes bw-pop {
  0% { opacity: var(--bw-pop-opacity); transform: scale(var(--bw-pop-from)); }
  60% { opacity: 1; transform: scale(var(--bw-pop-peak)); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes bw-grow-x {
  from { transform: scaleX(0); }
}

@keyframes bw-spin {
  to { transform: rotate(360deg); }
}

@keyframes bw-pulse {
  0% { opacity: .6; transform: scale(1); }
  70%, 100% { opacity: 0; transform: scale(2.6); }
}

.bw-anim-enter,
.bw-anim-enter-down,
.bw-anim-enter-left,
.bw-anim-enter-right,
.bw-anim-scale-in,
.bw-anim-stagger > * {
  animation: bw-enter var(--bw-duration-enter) var(--bw-ease-out) both;
}

.bw-anim-enter-down { --bw-enter-y: -6px; }
.bw-anim-enter-left { --bw-enter-x: -12px; --bw-enter-y: 0px; }
.bw-anim-enter-right { --bw-enter-x: 12px; --bw-enter-y: 0px; }
.bw-anim-scale-in { --bw-enter-y: 0px; --bw-enter-scale: .96; }

.bw-anim-fade-in { animation: bw-fade-in var(--bw-duration) var(--bw-ease-out) both; }
.bw-anim-fade-out { animation: bw-fade-out var(--bw-duration-exit) var(--bw-ease-in-out) forwards; }
.bw-anim-exit { animation: bw-exit var(--bw-duration-exit) var(--bw-ease-in-out) forwards; }
.bw-anim-pop { animation: bw-pop var(--bw-duration-pop) var(--bw-ease-spring) both; }
.bw-anim-grow-x { transform-origin: left center; animation: bw-grow-x var(--bw-duration-grow) var(--bw-ease-out) both; }
.bw-anim-spin { animation: bw-spin var(--bw-duration-spin) linear infinite; }
.bw-anim-pulse { animation: bw-pulse var(--bw-duration-pulse) var(--bw-ease-out) infinite; }

/* Each child enters one --bw-stagger-step after the previous one, up to the eighth. */
.bw-anim-stagger > :nth-child(2) { animation-delay: var(--bw-stagger-step); }
.bw-anim-stagger > :nth-child(3) { animation-delay: calc(var(--bw-stagger-step) * 2); }
.bw-anim-stagger > :nth-child(4) { animation-delay: calc(var(--bw-stagger-step) * 3); }
.bw-anim-stagger > :nth-child(5) { animation-delay: calc(var(--bw-stagger-step) * 4); }
.bw-anim-stagger > :nth-child(6) { animation-delay: calc(var(--bw-stagger-step) * 5); }
.bw-anim-stagger > :nth-child(7) { animation-delay: calc(var(--bw-stagger-step) * 6); }
.bw-anim-stagger > :nth-child(n + 8) { animation-delay: calc(var(--bw-stagger-step) * 7); }

/*
 * Reduced motion. Respects the OS setting, and the "Reduce motion" appearance setting when the app sets
 * data-bw-motion="reduce" on <html>. Set data-bw-motion="full" to keep animations regardless.
 */
@media (prefers-reduced-motion: reduce) {
  :root:not([data-bw-motion="full"]) *,
  :root:not([data-bw-motion="full"]) *::before,
  :root:not([data-bw-motion="full"]) *::after {
    animation-duration: 1ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
}

[data-bw-motion="reduce"] *,
[data-bw-motion="reduce"] *::before,
[data-bw-motion="reduce"] *::after {
  animation-duration: 1ms !important;
  animation-delay: 0s !important;
  animation-iteration-count: 1 !important;
  transition-duration: 1ms !important;
  transition-delay: 0s !important;
  scroll-behavior: auto !important;
}