/* Fonts are served from this site (no third-party requests). SIL Open Font License, see fonts/OFL-*.txt */
@font-face { font-family: "Petrona"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(fonts/petrona-latin.woff2) format("woff2"); }
@font-face { font-family: "Schibsted Grotesk"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(fonts/schibsted-grotesk-latin.woff2) format("woff2"); }

/* Strawberry Matcha Money — shared tokens + liquid glass
   App = Matcha Latte, Web = Uji Garden. Strawberry is only for actions, alerts and the current selection. */
:root {
  /* primitives */
  --matcha-50: #F1F7E4; --matcha-100: #E3EFCB; --matcha-200: #CFE3A6; --matcha-300: #B6D480;
  --matcha-500: #8DB84D; --matcha-600: #6E9A33; --matcha-700: #4E7A22; --matcha-900: #2F4516;
  --sage-300: #B7C99A; --sage-500: #8FA968;
  --oat-50: #FAF7F1; --oat-100: #F6F0E6; --oat-200: #EFE6D6; --oat-300: #EADFCB; --oat-500: #CDBB98; --blush: #F3E1DC; --ice: #EEF6F3;
  --berry-100: #FCE6E8; --berry-200: #F4C9CD; --berry-300: #EE9AA5; --berry-500: #D3283E; --berry-550: #C72338; --berry-600: #B91F33; --berry-700: #A01A2C;
  --ink: #22311A;

  /* semantic (app) */
  --bg: var(--oat-50);
  --text: var(--matcha-900);
  --text-2: #3E5524;
  --money-bills: var(--oat-200);
  --money-bills-edge: var(--oat-500);
  --money-free: var(--matcha-600);
  --money-short: var(--berry-500);
  --action: var(--ink);
  --action-soft: var(--berry-100);
  --accent-text: var(--berry-700);

  /* glass */
  --glass: rgba(255, 255, 255, 0.5);
  --glass-thin: rgba(255, 255, 255, 0.4);
  --glass-edge: rgba(255, 255, 255, 0.9);
  --glass-shadow: 0 18px 40px -22px rgba(90, 60, 50, 0.32);
  --glass-hi: inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 -1px 2px rgba(255, 255, 255, 0.28);

  /* type */
  --display: "Petrona", "Iowan Old Style", Georgia, serif;
  --ui: "Schibsted Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  /* motion (Emil / Apple): strong ease-out, iOS drawer curve */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);

  --r-sm: 14px; --r-md: 20px; --r-lg: 28px; --r-xl: 36px;
}

.glass {
  position: relative;
  background:
    linear-gradient(140deg, rgba(255,255,255,.5) 0%, rgba(255,255,255,.06) 34%, rgba(255,255,255,0) 70%, rgba(255,255,255,.22) 100%),
    var(--glass);
  -webkit-backdrop-filter: blur(26px) saturate(180%);
  backdrop-filter: blur(26px) saturate(180%);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--glass-hi), var(--glass-shadow);
}
.glass.thin { background: linear-gradient(140deg, rgba(255,255,255,.45), rgba(255,255,255,0) 60%), var(--glass-thin); -webkit-backdrop-filter: blur(14px) saturate(170%); backdrop-filter: blur(14px) saturate(170%); box-shadow: var(--glass-hi), 0 8px 20px -14px rgba(48,66,22,.35); }
.glass.thick { -webkit-backdrop-filter: blur(40px) saturate(190%); backdrop-filter: blur(40px) saturate(190%); box-shadow: var(--glass-hi), 0 28px 60px -26px rgba(48,66,22,.5); }

/* tinted glass for money segments and actions */
.tint { position: relative; border: 1px solid rgba(255,255,255,.55); box-shadow: inset 0 1px 0 rgba(255,255,255,.7); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.tint::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(140deg, rgba(255,255,255,.45), rgba(255,255,255,0) 40%, rgba(255,255,255,0) 75%, rgba(255,255,255,.18)); }
.tint.bills { background: rgba(234, 223, 203, .82); border-color: rgba(205,187,152,.7); }
.tint.free { background: rgba(78, 122, 34, .97); }
[hidden] { display: none !important; }
.tint.short { background: rgba(211, 40, 62, .95); }

.btn {
  font: 600 15px/1 var(--ui); border: 0; border-radius: 999px; padding: 14px 22px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px;
  transition: transform 140ms var(--ease-out), box-shadow 200ms var(--ease-out), background-color 200ms ease;
  color: var(--text); text-decoration: none; -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: scale(0.97); }
.btn.primary { color: #fff; background: var(--ink); box-shadow: 0 10px 20px -14px rgba(34, 49, 26, .7); }
.btn.glassy { background: linear-gradient(140deg, rgba(255,255,255,.5), rgba(255,255,255,0) 60%), var(--glass-thin); border: 1px solid var(--glass-edge); -webkit-backdrop-filter: blur(14px) saturate(170%); backdrop-filter: blur(14px) saturate(170%); box-shadow: var(--glass-hi); }
.btn.small { font-size: 13.5px; padding: 11px 16px; min-height: 44px; }
@media (hover: hover) and (pointer: fine) {
  .btn.primary:hover { background: #2F4516; }
  .btn.glassy:hover { background-color: rgba(255,255,255,.5); }
  .btn:hover:active { transform: scale(0.97); }
}
:focus-visible { outline: 2px solid var(--matcha-700); outline-offset: 3px; }
::selection { background: var(--berry-200); color: var(--ink); }

.num { font-variant-numeric: lining-nums tabular-nums; }
.emoji { width: 1em; height: 1em; object-fit: contain; display: inline-block; vertical-align: -0.15em; }

@media (prefers-reduced-transparency: reduce) {
  .glass, .glass.thin, .glass.thick, .btn.glassy { background: var(--oat-100); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  /* gentler, not zero: keep short fades, drop movement */
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
  .btn:active { transform: none; }
}