/* base.css (Flamesy — ember/charcoal palette)
   Color remap from pink/magenta (#C2185B, #E20066) 
   to warm ember/charcoal (#c8622a, #1e1a17)
   Font: Quicksand retained throughout
*/

/* ------------------------------
   1) Android resource aliases
------------------------------ */
:root {
  --app-width: 375px;
  --app-max-width: 375px;
  --app-min-height: 100svh;

  --font_montserrat: "Quicksand", "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --font_quicksand:  "Quicksand", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  /* colors.xml */
  --purple_200: #FFBB86FC;
  --purple_500: #FF6200EE;
  --purple_700: #FF3700B3;
  --teal_200:   #FF03DAC5;
  --teal_700:   #FF018786;
  --black:  #1e1a17;
  --white:  #FFFFFFFF;

  --highlight1:          #6b5f56;
  --banner:              #faf8f5;

  /* ── EMBER PALETTE (replaces pink/magenta) ── */
  --slidercolor:           #c8622a;
  --button_background_1:   #f5ede4;
  --button_text_1:         #c8622a;
  --button_background_2:   #6b5f56;
  --button_text_2:         #FFFFFF;

  /* themes.xml */
  --colorPrimary:           #c8622a;
  --colorOnPrimary:         #FFFFFF;
  --colorSecondary:         #6b5f56;
  --colorOnSecondary:       #FFFFFF;

  --colorPrimaryContainer:    #f5ede4;
  --colorOnPrimaryContainer:  #1e1a17;
  --colorSecondaryContainer:  #ede8e0;
  --colorOnSecondaryContainer:#1e1a17;

  --colorSurface:         #FFFFFF;
  --colorOnSurface:       #1e1a17;
  --colorSurfaceVariant:  #f5f0ea;
  --colorOnSurfaceVariant:#4a3f37;

  --colorOutline:        #d8d0c6;
  --colorOutlineVariant: #e8e2da;

  --colorSurfaceContainerLowest:  #FFFFFF;
  --colorSurfaceContainerLow:     #FFFFFF;
  --colorSurfaceContainer:        #FFFFFF;
  --colorSurfaceContainerHigh:    #FFFFFF;
  --colorSurfaceContainerHighest: #FFFFFF;

  --statusBarColor: #f0ebe4;
  --navBarColor:    transparent;

  /* dimens.xml */
  --text_size_small:  14px;
  --text_size_medium: 16px;
  --text_size_large:  20px;

  --margin_top:   20px;
  --margin_bottom: 0px;
  --margin_left:  26px;
  --margin_right: 26px;

  --margin_top_inner:    30px;
  --margin_bottom_inner:  0px;
  --margin_left_inner:    0px;
  --margin_right_inner:   0px;

  /* backgrounds */
  --bg_radial_start:  #faf8f5;
  --bg_radial_end:    #f0ebe4;
  --bg_radial_radius: 800px;

  --applebg_base:   #f0ebe4;
  --applebg_start:  #faf8f5;
  --applebg_end:    #ede8e0;
  --applebg_radius: 360px;

  --border_background_color:  #d8d0c6;
  --border_background_width:  2px;
  --border_background_radius: 8px;

  --border_background_black_fill:   #fefcfa;
  --border_background_black_stroke: #d8d0c6;
  --border_background_black_width:  1px;
  --border_background_black_radius: 12px;

  --bg_black_radius: 10px;

  --border_glass_fill:   #FFFFFF;
  --border_glass_radius: 8px;

  --card_border_base:         #fefcfa;
  --card_border_stroke:       #b0a090;
  --card_border_stroke_width: 2px;
  --card_border_inset:        4px;

  /* text colors */
  --text_111111: #1e1a17;
  --text_222222: #2d2520;
  --text_555555: #6b5f56;

  --warn_yellow: #FFCC00;

  --tap_min:  44px;
  --input_h:  48px;

  --radius_pill:        999px;
  --radius_bottomsheet: 28px;

  --shadow_1: 0 6px 16px rgba(30,26,23,.10);
  --shadow_2: 0 10px 24px rgba(30,26,23,.14);

  /* semantic aliases */
  --font-body:   var(--font_montserrat);
  --font-accent: var(--font_quicksand);

  --color-accent:  var(--slidercolor);
  --color-banner:  var(--banner);

  --btn-1-bg:   var(--button_background_1);
  --btn-1-text: var(--button_text_1);
  --btn-2-bg:   var(--button_background_2);
  --btn-2-text: var(--button_text_2);

  --ink-900: var(--text_111111);
  --ink-800: var(--text_222222);
  --ink-600: var(--colorOnSurfaceVariant);
  --ink-500: var(--text_555555);
  --ink-400: var(--highlight1);

  --surface:    var(--colorSurface);
  --on-surface: var(--colorOnSurface);
  --outline:    var(--colorOutline);
  --outline-variant: var(--colorOutlineVariant);

  --page-pad-l: var(--margin_left);
  --page-pad-r: var(--margin_right);

  --focus-ring: rgba(200, 98, 42, 0.70);
  --focus-halo: rgba(200, 98, 42, 0.18);
}

html[data-app-width="360"] {
  --app-width: 360px;
  --app-max-width: 360px;
}

/* ------------------------------
   2) Reset / base
------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink-900);
  background: radial-gradient(circle var(--bg_radial_radius) at 50% 50%, var(--bg_radial_start), var(--bg_radial_end));
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
}

img, svg, video { display: block; max-width: 100%; }

button, input, select, textarea { font: inherit; color: inherit; }

a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* ------------------------------
   3) App frame
------------------------------ */
.app-shell {
  width: min(100vw, var(--app-width));
  min-height: var(--app-min-height);
  margin: 0 auto;
  position: relative;
}

.app-safe {
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}

.screen    { min-height: var(--app-min-height); }
.page-pad  { padding-left: var(--page-pad-l); padding-right: var(--page-pad-r); }
.mt-page   { margin-top: var(--margin_top); }
.mt-inner  { margin-top: var(--margin_top_inner); }

/* ------------------------------
   4) Drawable-to-CSS
------------------------------ */
.drawable-bg_radial {
  background: radial-gradient(circle var(--bg_radial_radius) at 50% 50%, var(--bg_radial_start), var(--bg_radial_end));
}

.drawable-applebg {
  background:
    radial-gradient(circle var(--applebg_radius) at 50% 50%, var(--applebg_start), var(--applebg_end)),
    var(--applebg_base);
}

.drawable-bg_black {
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--bg_black_radius);
}

.drawable-border_background {
  background: transparent;
  border: var(--border_background_width) solid var(--border_background_color);
  border-radius: var(--border_background_radius);
}

.drawable-border_background_black {
  background: var(--border_background_black_fill);
  border: var(--border_background_black_width) solid var(--border_background_black_stroke);
  border-radius: var(--border_background_black_radius);
}

.drawable-border_glass {
  background: var(--border_glass_fill);
  border-radius: var(--border_glass_radius);
}

.drawable-card_border {
  position: relative;
  background: var(--card_border_base);
}

.drawable-card_border::before {
  content: "";
  position: absolute;
  inset: var(--card_border_inset);
  border: var(--card_border_stroke_width) solid var(--card_border_stroke);
  border-radius: inherit;
  pointer-events: none;
  background: transparent;
}

/* ------------------------------
   5) Typography helpers
------------------------------ */
.h1 { font-size: var(--text_size_large); font-weight: 700; line-height: 1.25; color: var(--ink-900); }
.h2 { font-size: 18px; font-weight: 700; line-height: 1.3; color: var(--ink-900); }
.p  { font-size: var(--text_size_small); line-height: 1.45; color: var(--ink-900); }

.muted { color: var(--ink-500); }
.link  { color: var(--color-accent); }
.link:hover { text-decoration: underline; }

.text-bottom-nav { font-family: var(--font_montserrat); font-size: 14px; color: var(--text_111111); }
.text-menu       { font-family: var(--font_montserrat); font-size: 16px; color: var(--text_111111); }
.font-accent     { font-family: var(--font-accent); }

/* ------------------------------
   6) Common UI blocks
------------------------------ */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px var(--page-pad-r);
  padding-left: var(--page-pad-l);
}

.topbar__title { font-size: 18px; font-weight: 700; }

.icon-btn {
  width: var(--tap_min);
  height: var(--tap_min);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--radius_pill);
  background: transparent;
  cursor: pointer;
}

.icon { width: 24px; height: 24px; flex: 0 0 auto; }

.title-chip {
  display: inline-block;
  background: var(--ink-900);
  color: var(--color-accent);
  padding: 16px;
  border-radius: 12px;
  font-family: var(--font-accent);
  font-size: 16px;
  line-height: 1.2;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap_min);
  padding: 10px 16px;
  border-radius: var(--radius_pill);
  border: 1px solid transparent;
  cursor: pointer;
  user-select: none;
}

.btn:disabled { opacity: 0.55; cursor: not-allowed; }

.btn--primary,
.btn-nav {
  background: var(--button_background_1);   /* light warm cream */
  color: var(--button_text_1);              /* ember text */
  border: 1.5px solid rgba(200, 98, 42, 0.25);
  box-shadow: 0 2px 8px rgba(200, 98, 42, 0.12);
  position: relative;
  overflow: hidden;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.12s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.btn--primary::after,
.btn-nav::after {
  display: none;  /* not needed for flat pill style */
}

.btn--primary:hover:not(:active),
.btn-nav:hover:not(:active) {
  background: #edddd0;
  border-color: rgba(200, 98, 42, 0.45);
  box-shadow: 0 4px 14px rgba(200, 98, 42, 0.20);
}

/* ACTIVE / PRESSED → charcoal bg, white text (matches gender pill behavior) */
.btn--primary:active,
.btn-nav:active,
.btn--primary.is-active,
.btn-nav.is-active {
  background: #1e1a17;
  color: #ffffff;
  border-color: #1e1a17;
  box-shadow: 0 2px 8px rgba(30, 26, 23, 0.22);
  transform: translateY(1px) scale(0.98);
  transition-duration: 0.08s;
}

.btn--secondary { background: var(--btn-2-bg); color: var(--btn-2-text); }
.btn--ghost     { background: transparent; border-color: var(--outline); color: var(--ink-900); }
.btn--warn-icon { background: var(--warn_yellow); border-radius: var(--radius_pill); }

/* Inputs */
.input {
  width: 100%;
  min-height: var(--input_h);
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--outline);
  background: var(--surface);
  color: var(--ink-900);
}
.input::placeholder { color: var(--ink-500); }
.input:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--focus-halo);
  outline: none;
}

/* Avatar */
.avatar { width: 48px; height: 48px; border-radius: 50%; overflow: hidden; background: var(--outline-variant); }
.avatar img { width: 100%; height: 100%; object-fit: cover; }

/* Slider */
input[type="range"] { width: 100%; height: 28px; background: transparent; -webkit-appearance: none; appearance: none; }
input[type="range"]::-webkit-slider-runnable-track { height: 4px; border-radius: var(--radius_pill); background: var(--slidercolor); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--slidercolor); margin-top: -7px; }
input[type="range"]::-moz-range-track { height: 4px; border-radius: var(--radius_pill); background: var(--slidercolor); }
input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; border: 0; background: var(--slidercolor); }

/* Bottom sheet */
.modal-backdrop { position: fixed; inset: 0; background: rgba(30,26,23,.45); display: none; }
.modal-backdrop.is-open { display: block; }

.bottom-sheet {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  width: min(100vw, var(--app-width));
  background: var(--colorSurface);
  color: var(--ink-800);
  border-top-left-radius: var(--radius_bottomsheet);
  border-top-right-radius: var(--radius_bottomsheet);
  box-shadow: var(--shadow_2);
  padding: 16px;
}

.bottom-sheet__handle { width: 44px; height: 4px; border-radius: var(--radius_pill); background: var(--outline); margin: 0 auto 12px; }

/* ------------------------------
   6b) Compatibility helpers
------------------------------ */
.card { background: var(--surface); border: 1px solid var(--outline); border-radius: var(--border_background_black_radius); box-shadow: none; }
.card-pad { padding: 10px; }
.card--soft { background: var(--card_border_base); }

.rounded-rect { background: transparent; border: var(--border_background_width) solid var(--border_background_color); border-radius: var(--border_background_radius); }
.silver-tile  { background: var(--outline-variant); border-radius: var(--border_background_black_radius); overflow: hidden; }

.row { display: flex; }
.col { display: flex; flex-direction: column; }
.center { display: flex; align-items: center; justify-content: center; }
.gap-8  { gap: 8px; }
.gap-12 { gap: 12px; }
.gap-16 { gap: 16px; }
.pad-12 { padding: 12px; }
.pad-16 { padding: 16px; }

/* ------------------------------
   7) Motion safety
------------------------------ */
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }

/* Dialog */
.dialog-overlay {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(30,26,23,0.50);
  display: flex; justify-content: center; align-items: center;
  z-index: 10000;
}

.dialog-box {
  background: var(--colorSurface);
  border-radius: 12px;
  padding: 20px;
  max-width: 90%;
  max-height: 80%;
  overflow-y: auto;
  box-shadow: 0 8px 32px rgba(30,26,23,0.28);
  min-width: 300px;
}

.dialog-box h3 { margin: 0 0 16px 0; font-size: 18px; font-weight: 600; color: var(--ink-900); }

.dialog-list { max-height: 400px; overflow-y: auto; margin-bottom: 16px; }

.dialog-item { display: flex; align-items: center; padding: 12px 8px; cursor: pointer; border-bottom: 1px solid var(--outline-variant); }
.dialog-item:hover { background: var(--colorPrimaryContainer); }
.dialog-item input[type="checkbox"], .dialog-item input[type="radio"] { margin-right: 12px; cursor: pointer; accent-color: var(--color-accent); }
.dialog-item span { flex: 1; font-size: 15px; color: var(--ink-900); }

.dialog-input { width: 100%; padding: 12px; border: 1px solid var(--outline); border-radius: 8px; font-size: 15px; margin-bottom: 8px; background: var(--surface); color: var(--ink-900); }

.char-counter { text-align: right; font-size: 13px; color: var(--ink-500); margin-bottom: 16px; }

.dialog-buttons { display: flex; justify-content: flex-end; gap: 8px; }
.dialog-buttons button { padding: 10px 20px; border: none; border-radius: 8px; font-size: 14px; font-weight: 500; cursor: pointer; transition: all 0.2s; }

.btn-positive { background: var(--button_background_1); color: var(--button_text_1); border: 1.5px solid rgba(200,98,42,0.25); }
.btn-positive:hover { background: #edddd0; } .btn-positive:active { background: #1e1a17; color: #fff; }

.btn-negative { background: var(--colorSecondaryContainer); color: var(--ink-900); }
.btn-negative:hover { background: var(--outline); }

.btn-neutral { background: transparent; color: var(--color-accent); border: 1px solid var(--color-accent); }
.btn-neutral:hover { background: var(--colorPrimaryContainer); }

/* Field validation */
.field-valid::after   { content: "✓"; color: #34C759; margin-left: 8px; font-weight: bold; }
.field-invalid::after { content: "✗"; color: #FF3B30; margin-left: 8px; font-weight: bold; }