/* ==========================================================================
   AceBudget: design tokens & base layer
   Shared by the marketing site and the application shell.
   No external requests. System font stack for instant first paint.
   ========================================================================== */

:root {
  /* --- brand ------------------------------------------------------------ */
  --brand-50:  #eafaf3;
  --brand-100: #cdf2e2;
  --brand-200: #9ee5c8;
  --brand-300: #63d2a8;
  --brand-400: #2fba89;
  --brand-500: #129c70;
  --brand-600: #0a7d5b;
  --brand-700: #08624a;
  --brand-800: #094e3c;
  --brand-900: #073f32;

  --gold-300: #ffd98a;
  --gold-400: #f8c15c;
  --gold-500: #e9a530;
  --gold-700: #9c6a12;

  --coral-300: #ffb3a7;
  --coral-500: #e5533d;
  --coral-600: #c53d2a;
  --coral-700: #972c1d;

  --violet-400: #8b7ff0;
  --violet-500: #6b5ce0;

  /* --- neutral / surface ------------------------------------------------ */
  --ink:        #0b1a16;
  --ink-2:      #14312a;
  --text:       #16211e;
  --text-soft:  #4b5f59;
  --text-mute:  #71857e;
  --line:       #dde7e3;
  --line-soft:  #eaf1ee;
  --surface:    #ffffff;
  --surface-2:  #f6faf8;
  --surface-3:  #eef5f2;
  --canvas:     #f2f7f5;

  /* --- semantic --------------------------------------------------------- */
  --ok:      var(--brand-600);
  --ok-bg:   var(--brand-50);
  --warn:    var(--gold-700);
  --warn-bg: #fdf4e3;
  --bad:     var(--coral-600);
  --bad-bg:  #fdeeec;
  --info:    var(--violet-500);
  --info-bg: #f0eefc;

  /* --- type ------------------------------------------------------------- */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
          Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  --font-num: ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono", Menlo,
              Consolas, monospace;

  --fs-xs:   0.75rem;
  --fs-sm:   0.8125rem;
  --fs-base: 0.9375rem;
  --fs-md:   1.0625rem;
  --fs-lg:   1.25rem;
  --fs-xl:   1.5rem;
  --fs-2xl:  1.9rem;
  --fs-3xl:  2.5rem;
  --fs-4xl:  clamp(2.1rem, 5.2vw, 3.9rem);

  /* --- space / shape ---------------------------------------------------- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px;

  --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-xl: 24px; --r-full: 999px;

  --sh-1: 0 1px 2px rgba(11, 26, 22, .06), 0 1px 3px rgba(11, 26, 22, .04);
  --sh-2: 0 2px 6px rgba(11, 26, 22, .06), 0 8px 24px rgba(11, 26, 22, .06);
  --sh-3: 0 12px 40px rgba(11, 26, 22, .12), 0 2px 8px rgba(11, 26, 22, .06);
  --sh-focus: 0 0 0 3px var(--brand-200);

  --maxw: 1140px;
  --ease: cubic-bezier(.22, .8, .3, 1);
}

/* --- dark theme --------------------------------------------------------- */
:root[data-theme="dark"] {
  --ink:        #e6f2ed;
  --ink-2:      #cfe4dc;
  --text:       #e3efea;
  --text-soft:  #a3bab2;
  --text-mute:  #7e968e;
  --line:       #23372f;
  --line-soft:  #1b2d26;
  --surface:    #10201b;
  --surface-2:  #16281f;
  --surface-3:  #1c332a;
  --canvas:     #0a1611;

  --ok-bg:   #0e2c22;
  --warn-bg: #2d2410;
  --bad-bg:  #2f1713;
  --info-bg: #1d1a35;
  --ok:   var(--brand-300);
  --warn: var(--gold-400);
  --bad:  var(--coral-300);
  --info: var(--violet-400);

  --sh-1: 0 1px 2px rgba(0,0,0,.4);
  --sh-2: 0 2px 6px rgba(0,0,0,.35), 0 8px 24px rgba(0,0,0,.3);
  --sh-3: 0 12px 40px rgba(0,0,0,.5);
  --sh-focus: 0 0 0 3px var(--brand-800);
}

/* --- reset -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

body {
  font-family: var(--font);
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--text);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
}

img, svg, video, canvas { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }
a { color: var(--brand-600); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--brand-700); }
:root[data-theme="dark"] a { color: var(--brand-300); }

h1, h2, h3, h4 { line-height: 1.18; letter-spacing: -0.021em; color: var(--ink); font-weight: 700; }
h1 { font-size: var(--fs-4xl); letter-spacing: -0.031em; }
h2 { font-size: var(--fs-3xl); }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-md); }
p  { text-wrap: pretty; }
h1, h2, h3 { text-wrap: balance; }

:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 2px; border-radius: var(--r-sm); }

::selection { background: var(--brand-200); color: var(--brand-900); }

/* --- utilities ---------------------------------------------------------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--sp-5); }
.stack > * + * { margin-top: var(--sp-4); }
.row { display: flex; align-items: center; gap: var(--sp-3); }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.grow { flex: 1 1 auto; min-width: 0; }
.num { font-family: var(--font-num); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.muted { color: var(--text-mute); }
.soft { color: var(--text-soft); }
.center { text-align: center; }
.nowrap { white-space: nowrap; }
.hidden { display: none !important; }

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

.skip-link {
  position: absolute; left: var(--sp-3); top: -60px; z-index: 999;
  background: var(--brand-600); color: #fff; padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md); font-weight: 600; text-decoration: none;
  transition: top .18s var(--ease);
}
.skip-link:focus { top: var(--sp-3); color: #fff; }

/* --- buttons ------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  padding: 11px 18px; border-radius: var(--r-md); font-weight: 600;
  font-size: var(--fs-base); line-height: 1.2; text-decoration: none;
  border: 1px solid transparent; white-space: nowrap;
  transition: transform .14s var(--ease), box-shadow .18s var(--ease),
              background-color .18s var(--ease), border-color .18s var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }

.btn-primary { background: var(--brand-600); color: #fff; box-shadow: var(--sh-2); }
.btn-primary:hover { background: var(--brand-700); color: #fff; box-shadow: var(--sh-3); }

.btn-ghost { background: var(--surface); color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { background: var(--surface-2); border-color: var(--brand-300); color: var(--ink); }

.btn-quiet { background: transparent; color: var(--text-soft); padding: 7px 11px; }
.btn-quiet:hover { background: var(--surface-3); color: var(--ink); }

.btn-danger { background: var(--bad-bg); color: var(--bad); border-color: transparent; }
.btn-danger:hover { background: var(--coral-500); color: #fff; }

.btn-lg { padding: 15px 28px; font-size: var(--fs-md); border-radius: var(--r-lg); }
.btn-sm { padding: 7px 12px; font-size: var(--fs-sm); }
.btn-block { width: 100%; }

/* --- surfaces ----------------------------------------------------------- */
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: var(--sp-5); box-shadow: var(--sh-1);
}

.pill {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px;
  border-radius: var(--r-full); font-size: var(--fs-xs); font-weight: 650;
  letter-spacing: .01em; background: var(--surface-3); color: var(--text-soft);
}
.pill-ok   { background: var(--ok-bg);   color: var(--ok); }
.pill-warn { background: var(--warn-bg); color: var(--warn); }
.pill-bad  { background: var(--bad-bg);  color: var(--bad); }
.pill-info { background: var(--info-bg); color: var(--info); }

.dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; background: currentColor; }

/* --- forms -------------------------------------------------------------- */
.field { display: flex; flex-direction: column; gap: 6px; }
.field > label { font-size: var(--fs-sm); font-weight: 600; color: var(--text-soft); }
.field .hint { font-size: var(--fs-xs); color: var(--text-mute); }
.field[hidden] { display: none; }
/* Phone number: country code picker beside the number, stacked on narrow screens. */
.phone-row { display: grid; grid-template-columns: minmax(0, 13rem) minmax(0, 1fr); gap: var(--sp-2); }
@media (max-width: 420px) { .phone-row { grid-template-columns: 1fr; } }

input[type="text"], input[type="number"], input[type="date"], input[type="month"],
input[type="search"], input[type="email"], input[type="password"], input[type="tel"], select, textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--line);
  border-radius: var(--r-md); background: var(--surface); color: var(--text);
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--brand-400); box-shadow: var(--sh-focus);
}
input::placeholder, textarea::placeholder { color: var(--text-mute); }
select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%2371857e' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; padding-right: 34px;
}

/* --- password fields: the show/hide eye (ui/password.js) -----------------
   Colours come from the theme tokens, so the field, its text and the eye are
   readable in both light and dark without switching themes. */
.pw-field { position: relative; display: block; }
.pw-field input { padding-right: 46px; color-scheme: light; }
:root[data-theme="dark"] .pw-field input { color-scheme: dark; }
.pw-field input::placeholder { color: var(--text-soft); opacity: 1; }
/* The browser's own reveal button (Edge) would show a second, hard to see eye. */
.pw-field input::-ms-reveal, .pw-field input::-ms-clear { display: none; }
/* Keep browser autofill readable: it paints its own pale background otherwise. */
.pw-field input:-webkit-autofill,
.pw-field input:-webkit-autofill:hover,
.pw-field input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text); caret-color: var(--text);
  box-shadow: 0 0 0 1000px var(--surface) inset;
  transition: background-color 9999s ease-out 0s;
}
.pw-field input:-webkit-autofill:focus { box-shadow: 0 0 0 1000px var(--surface) inset, var(--sh-focus); }

.pw-toggle {
  position: absolute; top: 50%; right: 4px; transform: translateY(-50%);
  width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-sm); color: var(--text-soft);
  -webkit-tap-highlight-color: transparent;
  transition: background-color .15s var(--ease), color .15s var(--ease);
}
/* Hover only where a pointer can hover, so it never sticks after a tap on a phone. */
@media (hover: hover) { .pw-toggle:hover { background: var(--surface-3); color: var(--ink); } }
.pw-toggle:active { background: var(--surface-3); color: var(--ink); }
.pw-toggle:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 0; }
.pw-toggle.is-on { color: var(--brand-600); }
:root[data-theme="dark"] .pw-toggle.is-on { color: var(--brand-300); }
.pw-toggle svg { display: block; width: 20px; height: 20px; }
/* Bigger target on touch screens. */
@media (pointer: coarse) {
  .pw-field input { padding-right: 52px; }
  .pw-toggle { width: 44px; height: 44px; right: 1px; }
}

/* --- tables ------------------------------------------------------------- */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.data { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
table.data th, table.data td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--line-soft); }
table.data th {
  font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-mute); font-weight: 700; white-space: nowrap;
}
table.data td.r, table.data th.r { text-align: right; }
table.data tbody tr:hover { background: var(--surface-2); }

/* --- motion ------------------------------------------------------------- */
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.rise { animation: rise .5s var(--ease) both; }

@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.fade { animation: fade .3s var(--ease) both; }