/* ==========================================================================
   BrewMaster — design tokens + components
   Hand-authored. No framework, no CDN, no external network requests.
   ========================================================================== */

/* --- Fonts -------------------------------------------------------------
   @font-face rules live in the generated assets/css/fonts.css, linked
   before this file. Regenerate with: python deploy/fetch_fonts.py
   If that file is absent the stacks below fall back to system faces.
   --------------------------------------------------------------------- */

/* --- Reset -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
input, button { font: inherit; color: inherit; }
button { background: none; border: none; cursor: pointer; }
svg { display: block; }

/* --- Tokens: light ------------------------------------------------------ */
:root {
  --font-ar: 'Tajawal', 'Noto Kufi Arabic', 'Segoe UI', system-ui, sans-serif;
  --font-en: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Neutral ground — warm sand */
  --bg:            #faf6f0;
  --bg-grad:       radial-gradient(120% 80% at 50% 0%, #fffdfa 0%, #faf6f0 55%, #f3ece2 100%);
  --surface:       #ffffff;
  --surface-sunk:  #f6f1ea;
  --border:        #e7ded1;
  --border-strong: #d6c9b6;

  /* Ratios are the worst case across every light backdrop the token can
     land on: the gradient's dark stop #f3ece2, --surface-sunk, and white. */
  --text:          #26201a;   /* 13.7:1 */
  --text-muted:    #6b5d4f;   /*  5.4:1 */
  --text-faint:    #726351;   /*  4.9:1 */

  --danger:        #b3291c;
  --ring:          color-mix(in srgb, var(--accent) 40%, transparent);

  --shadow-sm:     0 1px 2px rgba(60, 42, 24, .06);
  --shadow-md:     0 4px 14px -4px rgba(60, 42, 24, .14);
  --shadow-lg:     0 18px 40px -18px rgba(60, 42, 24, .35);

  --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-pill: 999px;
  --sp-1: .25rem; --sp-2: .5rem; --sp-3: .75rem; --sp-4: 1rem;
  --sp-5: 1.5rem; --sp-6: 2rem;

  --ease: cubic-bezier(.32, .72, 0, 1);

  /* Beverage accents — selected by [data-mode] below */
  --coffee:        #8b4a2b;   /* 6.7:1 on white */
  --coffee-wash:   #fdf2ea;
  --coffee-line:   #ecd9c8;

  --tea:           #0f766e;   /* 5.5:1 on white */
  --tea-wash:      #ecfaf7;
  --tea-line:      #c9e9e3;

  /* Result-panel gradients (white text sits on these) */
  --grad-coffee-from: #8b4a2b; --grad-coffee-to: #40200f;
  --grad-tea-from:    #0f766e; --grad-tea-to:    #063a36;
  --grad-sugar-from:  #9a5f2b; --grad-sugar-to:  #46290e;

  /* Fallback accent before a beverage is chosen */
  --accent:      var(--coffee);
  --accent-wash: var(--coffee-wash);
  --accent-line: var(--coffee-line);
}

/* --- Tokens: dark ------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --bg:            #16120e;
    --bg-grad:       radial-gradient(120% 80% at 50% 0%, #241c15 0%, #16120e 60%, #100d0a 100%);
    --surface:       #211b15;
    --surface-sunk:  #1a1510;
    --border:        #362c22;
    --border-strong: #4a3c2e;

    --text:          #f5eee6;
    --text-muted:    #bbab97;
    --text-faint:    #a3927e;

    --danger:        #ff9a8c;

    --shadow-sm:     0 1px 2px rgba(0, 0, 0, .4);
    --shadow-md:     0 4px 14px -4px rgba(0, 0, 0, .55);
    --shadow-lg:     0 18px 40px -18px rgba(0, 0, 0, .8);

    --coffee:        #e79a68;   /* 8.9:1 on --surface */
    --coffee-wash:   #2c1d13;
    --coffee-line:   #4a3120;

    --tea:           #5ed6c9;   /* 9.7:1 on --surface */
    --tea-wash:      #0f2a26;
    --tea-line:      #1d453f;

    --grad-coffee-from: #6d3a21; --grad-coffee-to: #2c1710;
    --grad-tea-from:    #0d5c56; --grad-tea-to:    #052b28;
    --grad-sugar-from:  #7c4c22; --grad-sugar-to:  #33200c;
  }
}

:root[data-theme='dark'] {
  --bg:            #16120e;
  --bg-grad:       radial-gradient(120% 80% at 50% 0%, #241c15 0%, #16120e 60%, #100d0a 100%);
  --surface:       #211b15;
  --surface-sunk:  #1a1510;
  --border:        #362c22;
  --border-strong: #4a3c2e;

  --text:          #f5eee6;
  --text-muted:    #bbab97;
  --text-faint:    #a3927e;

  --danger:        #ff9a8c;

  --shadow-sm:     0 1px 2px rgba(0, 0, 0, .4);
  --shadow-md:     0 4px 14px -4px rgba(0, 0, 0, .55);
  --shadow-lg:     0 18px 40px -18px rgba(0, 0, 0, .8);

  --coffee:        #e79a68;
  --coffee-wash:   #2c1d13;
  --coffee-line:   #4a3120;

  --tea:           #5ed6c9;
  --tea-wash:      #0f2a26;
  --tea-line:      #1d453f;

  --grad-coffee-from: #6d3a21; --grad-coffee-to: #2c1710;
  --grad-tea-from:    #0d5c56; --grad-tea-to:    #052b28;
  --grad-sugar-from:  #7c4c22; --grad-sugar-to:  #33200c;
}

/* --- The one lever: active beverage retints the whole UI ---------------- */
:root[data-mode='coffee'] {
  --accent: var(--coffee); --accent-wash: var(--coffee-wash); --accent-line: var(--coffee-line);
}
:root[data-mode='tea'] {
  --accent: var(--tea); --accent-wash: var(--tea-wash); --accent-line: var(--tea-line);
}

/* --- Base --------------------------------------------------------------- */
body {
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: var(--sp-3);
  /* Safe-area aware: viewport-fit=cover means the notch and the home
     indicator would otherwise sit on top of the UI. */
  padding-block-start: max(var(--sp-4), env(safe-area-inset-top));
  padding-block-end:   max(var(--sp-3), env(safe-area-inset-bottom));
  padding-inline-start: max(var(--sp-4), env(safe-area-inset-left));
  padding-inline-end:   max(var(--sp-4), env(safe-area-inset-right));
  max-width: 30rem;
  margin-inline: auto;
  background-color: var(--bg);        /* solid floor under the gradient */
  background-image: var(--bg-grad);
  background-attachment: fixed;
  color: var(--text);
  font-family: var(--font-ar);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  /* Touch hardening — this app is used on phones. */
  touch-action: manipulation;              /* kills the 300ms tap delay */
  -webkit-tap-highlight-color: transparent;/* no grey flash on tap */
  overscroll-behavior-y: contain;          /* no pull-to-refresh mid-entry */
  transition: background-color .35s var(--ease), color .35s var(--ease);
}
body.lang-en { font-family: var(--font-en); }

/* Chrome shouldn't be text-selectable on touch — long-press selects the
   label instead of doing nothing. Inputs and results stay selectable. */
button, .field__label, .presets__label, .result__label { -webkit-user-select: none; user-select: none; }

[hidden] { display: none !important; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* Focus: a ring, never colour alone. */
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* --- Top bar ------------------------------------------------------------ */
.topbar { display: flex; align-items: center; gap: var(--sp-2); min-height: 2.75rem; }
.topbar__spacer { flex: 1; }

.icon-btn {
  display: inline-grid;
  place-items: center;
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding-inline: var(--sp-3);
  border-radius: var(--r-pill);
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: .8125rem;
  font-weight: 700;
  box-shadow: var(--shadow-sm);
  transition: background-color .2s var(--ease), color .2s var(--ease),
              border-color .2s var(--ease), transform .12s var(--ease);
}
@media (hover: hover) {
  .icon-btn:hover { color: var(--accent); border-color: var(--accent-line); }
}
.icon-btn:active { transform: scale(.94); }
.icon-btn__glyph { font-size: 1rem; line-height: 1; display: inline-block; }
.icon { inline-size: 1.15rem; block-size: 1.15rem; }

/* The back arrow must point "backwards" in both writing directions. */
[dir='ltr'] .icon-btn--back .icon-btn__glyph { transform: scaleX(-1); }

/* --- Landing ------------------------------------------------------------ */
.landing {
  display: grid;
  grid-template-rows: auto auto;
  gap: var(--sp-6);
  align-content: center;   /* head + cards centre together, not separately */
  padding-block: var(--sp-4);
}

.landing__head { text-align: center; display: grid; gap: var(--sp-2); }

.brandmark {
  inline-size: 3.5rem; block-size: 3.5rem;
  margin-inline: auto;
  display: grid; place-items: center;
  font-size: 1.75rem;
  border-radius: var(--r-pill);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
}

.landing__title {
  font-size: clamp(1.65rem, 7vw, 2.15rem);
  font-weight: 900;
  letter-spacing: -.02em;
  line-height: 1.15;
}
.landing__subtitle { color: var(--text-muted); font-size: .9375rem; font-weight: 500; }

.choices { display: grid; gap: var(--sp-4); }

.choice {
  --choice: var(--coffee);
  --choice-wash: var(--coffee-wash);
  --choice-line: var(--coffee-line);
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  min-height: 6.25rem;
  text-align: start;
  border-radius: var(--r-xl);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease),
              border-color .18s var(--ease);
}
.choice--tea { --choice: var(--tea); --choice-wash: var(--tea-wash); --choice-line: var(--tea-line); }

/* Gradient wash revealed on hover. */
.choice::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, color-mix(in srgb, var(--choice) 14%, transparent), transparent 60%);
  opacity: 0;
  transition: opacity .18s var(--ease);
  pointer-events: none;
}
@media (hover: hover) {
  .choice:hover { border-color: var(--choice-line); box-shadow: var(--shadow-lg); }
  .choice:hover::after { opacity: 1; }
}
.choice:active { transform: scale(.975); }

.choice__plate {
  flex: none;
  inline-size: 3.75rem; block-size: 3.75rem;
  display: grid; place-items: center;
  font-size: 2rem;
  border-radius: var(--r-pill);
  background: var(--choice-wash);
  border: 1px solid var(--choice-line);
}
.choice__text { display: grid; gap: 2px; min-width: 0; }
.choice__name { font-size: 1.375rem; font-weight: 900; color: var(--choice); letter-spacing: -.01em; }
.choice__desc { font-size: .8125rem; color: var(--text-muted); font-weight: 500; }
.choice__chev { flex: none; margin-inline-start: auto; color: var(--text-faint); font-size: 1.1rem; }
[dir='ltr'] .choice__chev { transform: scaleX(-1); }

/* --- App shell ---------------------------------------------------------- */
.app { display: grid; grid-template-rows: auto auto 1fr; gap: var(--sp-3); align-content: start; }

.app__head { text-align: center; display: grid; gap: 2px; }
.app__title { font-size: 1.375rem; font-weight: 900; letter-spacing: -.015em; }
.app__subtitle { font-size: .75rem; color: var(--text-muted); font-weight: 600; }

/* --- Segmented tabs ----------------------------------------------------- */
.tabs {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 4px;
  border-radius: var(--r-lg);
  background: var(--surface-sunk);
  border: 1px solid var(--border);
  isolation: isolate;
}

/* Sliding indicator — transform only, so it stays on the compositor. */
.tabs::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset-block: 4px;
  inset-inline-start: 4px;
  inline-size: calc((100% - 8px) / 2);
  border-radius: calc(var(--r-lg) - 5px);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  transform: translateX(calc(var(--tab-index, 0) * 100%));
  transition: transform .32s var(--ease), background-color .3s var(--ease);
}
[dir='rtl'] .tabs::before { transform: translateX(calc(var(--tab-index, 0) * -100%)); }

.tab {
  padding-block: var(--sp-3);
  min-height: 2.75rem;
  border-radius: calc(var(--r-lg) - 5px);
  font-size: .9375rem;
  font-weight: 700;
  color: var(--text-muted);
  transition: color .25s var(--ease);
}
.tab[aria-selected='true'] { color: var(--accent); }
.tab:focus-visible { outline-offset: -2px; }

/* --- Card --------------------------------------------------------------- */
.card {
  display: grid;
  gap: var(--sp-4);
  align-content: start;
  padding: var(--sp-5) var(--sp-4);
  border-radius: var(--r-xl);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
}

.card__head { display: flex; align-items: center; gap: var(--sp-3); }
.card__title {
  flex: 1; min-width: 0;
  font-size: 1.0625rem;
  font-weight: 900;
  color: var(--accent);
  letter-spacing: -.01em;
}

/* --- Direction switch (coffee) ------------------------------------------ */
.swap {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 2.75rem;
  padding: var(--sp-1) var(--sp-4);
  border-radius: var(--r-pill);
  background: var(--accent-wash);
  border: 1px solid var(--accent-line);
  color: var(--accent);
  font-size: .75rem;
  font-weight: 700;
  transition: transform .12s var(--ease), background-color .2s var(--ease);
}
.swap:active { transform: scale(.94); }
.swap__glyph { font-size: .875rem; line-height: 1; }

/* --- Fields ------------------------------------------------------------- */
.fields { display: grid; gap: var(--sp-4); }
.fields--pair { grid-template-columns: 1fr 1fr; gap: var(--sp-3); }

.field { display: grid; gap: var(--sp-2); min-width: 0; }

.field__label {
  font-size: .75rem;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: .01em;
}

.field__input {
  inline-size: 100%;
  min-height: 3rem;
  padding: var(--sp-3);
  border-radius: var(--r-md);
  background: var(--surface-sunk);
  border: 2px solid var(--border);
  color: var(--text);
  font-size: 1.0625rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: start;
  transition: border-color .2s var(--ease), background-color .2s var(--ease),
              box-shadow .2s var(--ease);
}
.field__input::placeholder { color: var(--text-faint); font-weight: 500; }
@media (hover: hover) {
  .field__input:hover { border-color: var(--border-strong); }
}
.field__input:focus {
  outline: none;
  background: var(--surface);
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--ring);
}
/* Strip the spinners — presets and the keyboard cover stepping. */
.field__input::-webkit-outer-spin-button,
.field__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.field__input[type='number'] { -moz-appearance: textfield; appearance: textfield; }

.field__input[aria-invalid='true'] {
  border-color: var(--danger);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--danger) 22%, transparent);
}

.field__error { font-size: .6875rem; font-weight: 700; color: var(--danger); }
.field__hint  { font-size: .6875rem; font-weight: 600; color: var(--text-faint); }

/* --- Preset chips ------------------------------------------------------- */
.presets { display: grid; gap: var(--sp-2); }
.presets__label {
  font-size: .6875rem;
  font-weight: 700;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: .08em;
}
.presets__row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: var(--sp-2);
}

.chip {
  min-height: 2.75rem;
  padding-inline: var(--sp-2);
  border-radius: var(--r-pill);
  background: var(--surface-sunk);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: .8125rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  transition: background-color .18s var(--ease), color .18s var(--ease),
              border-color .18s var(--ease), transform .12s var(--ease);
}
@media (hover: hover) {
  .chip:hover { border-color: var(--accent-line); color: var(--accent); }
}
.chip:active { transform: scale(.94); }
.chip[aria-pressed='true'] {
  background: var(--accent-wash);
  border-color: var(--accent);
  color: var(--accent);
}

/* --- Result panels ------------------------------------------------------ */
.results { display: grid; gap: var(--sp-3); }
.results--pair { grid-template-columns: 1fr 1fr; }

.result {
  display: grid;
  gap: var(--sp-1);
  padding: var(--sp-4) var(--sp-3);
  text-align: center;
  border-radius: var(--r-lg);
  background: linear-gradient(145deg, var(--r-from), var(--r-to));
  color: #fff;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.result--water, .result--dose { --r-from: var(--grad-coffee-from); --r-to: var(--grad-coffee-to); }
.result--tea   { --r-from: var(--grad-tea-from);    --r-to: var(--grad-tea-to); }
.result--sugar { --r-from: var(--grad-sugar-from);  --r-to: var(--grad-sugar-to); }

.result__label {
  font-size: .625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  opacity: .88;
}
.result__value {
  font-size: clamp(1.75rem, 9vw, 2.5rem);
  font-weight: 900;
  letter-spacing: -.03em;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;  /* digits stop jittering as you type */
}
.results--pair .result__value { font-size: clamp(1.375rem, 6.5vw, 1.75rem); }
.result__unit { font-size: .55em; font-weight: 700; opacity: .82; margin-inline-start: .15em; }

/* --- Footer ------------------------------------------------------------- */
.footer {
  text-align: center;
  font-size: .6875rem;
  font-weight: 600;
  color: var(--text-faint);
  padding-block: var(--sp-2);
}

/* --- Motion ------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  @keyframes tick {
    0%   { transform: translateY(.14em); opacity: .45; }
    100% { transform: translateY(0);     opacity: 1; }
  }
  .result__value.is-ticking { animation: tick .22s var(--ease); }

  @keyframes rise {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
  }
  .panel-enter { animation: rise .3s var(--ease); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

/* --- Short viewports (landscape phones) --------------------------------- */
@media (max-height: 620px) {
  .landing { gap: var(--sp-4); padding-block: var(--sp-2); }
  .choice { min-height: 5rem; padding: var(--sp-3) var(--sp-4); }
  .choice__plate { inline-size: 3rem; block-size: 3rem; font-size: 1.5rem; }
  .card { gap: var(--sp-3); padding: var(--sp-4) var(--sp-3); }
  .brandmark { display: none; }
}