/* Budget — House of Honey design system (see design/design-system.html). */

:root {
  /* Brand palette */
  --bright-amber:  #f9c80e;
  --tiger-flame:   #f86624;
  --punch-red:     #ea3546;
  --rebecca-purple:#662e9b;
  --pacific-blue:  #43bccd;

  /* Neutral anchors */
  --plum:  #2a1418;
  --cream: #f3ddd4;

  /* Semantic tokens — cream ground by default, .invert flips */
  --bg:        var(--cream);
  --fg:        var(--plum);
  --fg-muted:  color-mix(in srgb, var(--plum) 62%, var(--cream));
  --surface-2: color-mix(in srgb, var(--cream) 88%, var(--plum));
  --line:      color-mix(in srgb, var(--plum) 24%, var(--cream));

  --accent:     var(--tiger-flame);
  --accent-2:   var(--punch-red);
  --focus-ring: var(--bright-amber);

  /* Type roles */
  --font-display: "Bodoni Moda", "Times New Roman", serif;
  --font-script:  "Pinyon Script", cursive;
  --font-serif:   "Fraunces", Georgia, serif;

  /* Scale */
  --step--1: 0.833rem;
  --step-0:  1rem;
  --step-1:  1.25rem;
  --step-4:  2.441rem;

  --radius: 2px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; background: var(--plum); overscroll-behavior: none; }

/* Installed to the home screen, the status bar overlays the page
   (black-translucent). The body drops below it and the plum canvas shows
   through, so the white status text stays readable on cream pages too. */
body { margin-top: env(safe-area-inset-top); }

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-serif);
  font-optical-sizing: auto;
  font-size: var(--step-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  min-height: calc(100dvh - env(safe-area-inset-top));
}

a { color: var(--accent); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--accent-2); }
:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }

/* ── Home: plum ground, two display lines at 1/3 and 2/3 ── */
/* Painted on the root as well: iOS 26 can end the layout viewport above the
   home indicator (WebKit regression), and the strip below shows the root
   canvas — `repeat` lets the photo tile into it instead of bare plum. */
html:has(body.home) {
  background:
    linear-gradient(color-mix(in srgb, var(--plum) 72%, transparent),
                    color-mix(in srgb, var(--plum) 72%, transparent)),
    var(--plum) url("/static/bg.jpg") center / cover repeat;
}
body.home {
  /* Seawall photo under a plum scrim so the cream display stays readable */
  background:
    linear-gradient(color-mix(in srgb, var(--plum) 72%, transparent),
                    color-mix(in srgb, var(--plum) 72%, transparent)),
    var(--plum) url("/static/bg.jpg") center / cover no-repeat;
  color: var(--cream);
  --bg: var(--plum);
  --fg: var(--cream);
  --fg-muted: color-mix(in srgb, var(--cream) 80%, var(--plum));
  --line: color-mix(in srgb, var(--cream) 22%, var(--plum));
  overflow: hidden;
}
/* The home photo bleeds edge-to-edge behind the notch/status bar (the scrim
   keeps white status text readable); cream pages keep the plum strip. */
body.home { margin-top: 0; overscroll-behavior: none; touch-action: none; }
body.home .sheet { touch-action: auto; }
.display { height: 100dvh; position: relative; }
.big {
  position: absolute;
  left: 0; right: 0;
  text-align: center;
  transform: translateY(-50%);
  line-height: .9;
}
.amount {
  top: 33.33%;
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: -.01em;
  font-size: clamp(3.5rem, 19vw, 9rem);
}
.amount.over { color: var(--punch-red); }
.days {
  top: 66.66%;
  font-family: var(--font-serif);
  font-weight: 400;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-size: clamp(2rem, 11vw, 5rem);
  color: var(--fg-muted);
}

.toast {
  position: fixed; top: max(0.85rem, env(safe-area-inset-top)); left: 1rem; right: 3.5rem;
  z-index: 2; text-align: left;
  color: var(--punch-red); font-size: var(--step--1);
}

.gear {
  position: fixed; top: max(0.85rem, env(safe-area-inset-top)); right: 1rem;
  font-size: 1.6rem; text-decoration: none; color: var(--fg-muted); z-index: 2;
}
.gear:hover { color: var(--accent); }

.fab {
  position: fixed;
  right: max(1.25rem, env(safe-area-inset-right));
  bottom: max(1.25rem, env(safe-area-inset-bottom));
  width: 4rem; height: 4rem; padding: 0; border-radius: 50%;
  border: 1px solid var(--accent);
  background: var(--accent); color: var(--plum);
  display: grid; place-items: center;
  font-family: var(--font-serif);
  font-size: 2.2rem; line-height: 0; cursor: pointer; z-index: 2;
  transition: .18s;
}
.fab:hover { background: var(--accent-2); border-color: var(--accent-2); color: var(--cream); }

/* ── Add-transaction sheet (cream, inverse of the home ground) ── */
.sheet-backdrop {
  position: fixed; inset: 0; background: rgba(26, 13, 16, 0.55);
  display: flex; align-items: flex-end; z-index: 3;
}
/* display:flex above would otherwise override the hidden attribute */
.sheet-backdrop[hidden] { display: none; }
.sheet {
  background: var(--cream); color: var(--plum);
  --bg: var(--cream); --fg: var(--plum);
  --fg-muted: color-mix(in srgb, var(--plum) 62%, var(--cream));
  --line: color-mix(in srgb, var(--plum) 24%, var(--cream));
  width: 100%;
  padding: 1.5rem 1.25rem calc(1.5rem + env(safe-area-inset-bottom));
  border-radius: var(--radius) var(--radius) 0 0;
  border-top: 1px solid var(--accent);
  display: flex; flex-direction: column; gap: 1.1rem;
}

/* ── Cards (login / register / settings) ── */
.card { max-width: 26rem; margin: 0 auto; padding: 2.5rem 1.25rem; }
.card h1 {
  font-family: var(--font-serif); font-weight: 400;
  letter-spacing: .04em; text-transform: uppercase;
  font-size: var(--step-4); line-height: 1.08;
  margin-bottom: 1.25rem;
}
.card form { display: flex; flex-direction: column; gap: 1.1rem; margin-bottom: 1.25rem; }

label {
  display: flex; flex-direction: column; gap: .4rem;
  font-size: var(--step--1); letter-spacing: .28em; text-transform: uppercase;
  color: var(--fg-muted);
}
input {
  font-family: var(--font-serif);
  font-size: var(--step-1); letter-spacing: normal;
  padding: .6rem .7rem;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--bg); color: var(--fg);
}
input:focus { border-color: var(--accent); outline: none; }
input:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }

button {
  font-family: var(--font-serif);
  font-size: var(--step--1); letter-spacing: .16em; text-transform: uppercase;
  padding: .8em 1.3em; border-radius: var(--radius);
  border: 1px solid var(--line);
  background: transparent; color: var(--fg); cursor: pointer;
  transition: .18s;
}
button:hover { border-color: var(--accent); color: var(--accent); }
button.primary { background: var(--accent); border-color: var(--accent); color: var(--plum); }
button.primary:hover { background: var(--accent-2); border-color: var(--accent-2); color: var(--cream); }
button.danger { color: var(--punch-red); border-color: var(--punch-red); background: transparent; }
button.danger:hover { background: var(--punch-red); color: var(--cream); }

.error { color: var(--punch-red); margin-bottom: .75rem; }
.ok { color: var(--rebecca-purple); margin-bottom: .75rem; }
.alt { color: var(--fg-muted); font-size: var(--step--1); }
hr { border: none; border-top: 1px solid var(--line); margin: 1.5rem 0; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }