/* ═════════════════════════════════════════════════════════════════════════════
   NEAT WHEELS — the design system. One file, two products: the public website
   (`/`) and the billing floor (`/app`). They share these tokens so the site a
   customer sees and the invoice they are handed look like the same business.

   THE THESIS (taken from KARCOMFORT's "Lights On", which is right for exactly
   the same reason): detailing is the craft of making light behave on a surface.
   So the studio is LIT, not a dark bay. A dark UI also loses on a phone held
   up in a daylit workshop — which is where this app is actually used.

   FOUR COLOURS, NOT EIGHT
     paper + ink  ·  gold (the brand)  ·  rose (money owed + destructive)
   Everything else is a tone of those. WhatsApp green is FUNCTIONAL only — it
   appears on WhatsApp actions and nowhere else, never as decoration.

   THE GOLD RULE (learned on KARCOMFORT's yellow): --gold-fill never carries
   text on paper — it fails contrast. It is a FILL, with ink on top. When gold
   must BE the text, it is --gold-ink, which is darkened to pass AA.

   TYPE: Bricolage Grotesque has real character at display sizes and carries
   every heading and the wordmark. Inter Tight runs the interface with tabular
   figures so rupee columns align down the page. Both self-hosted — no CDN call
   at runtime, so the app loads the same on the workshop's wifi.
   ═════════════════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 400 800;
  font-display: swap; src: url('/fonts/bricolage.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter Tight'; font-style: normal; font-weight: 400 700;
  font-display: swap; src: url('/fonts/intertight.woff2') format('woff2');
}

:root {
  /* ── ground ──
     Warm, not the cold near-white it was. A neutral grey page reads as
     "unstyled default"; one hue in two tones reads as chosen. The hue here is
     warm stone, which is what gold needs underneath it to look like gold
     rather than mustard. */
  --paper:     #EFEBE3;   /* the lit studio floor */
  --panel:     #FBF9F5;   /* cards, sheets, anything raised */
  --panel-2:   #F5F1E9;   /* a faint fill inside a panel */
  --panel-3:   #E6E0D3;   /* pressed / selected surface */

  /* ── ink ──
     Warm graphite. The old #0E1417 was blue-cold and fought the paper. */
  --ink:       #14181A;   /* the same ink as the printed invoice */
  --ink-2:     #3E4548;
  --muted:     #6E7276;
  --faint:     #9B9A93;
  --line:      #DED8CB;
  --line-2:    #C8C0AE;

  /* ── gold: the brand ── */
  --gold-fill: #E0B252;   /* FILL only. Ink goes on top, never gold text here */
  --gold-deep: #C79733;   /* the pressed / hover state of a gold fill */
  --gold-ink:  #8A6216;   /* gold as TEXT — darkened until it passes AA on paper */
  --gold-wash: #F6EDD9;   /* the quietest gold surface */
  --gold-lift: #F2CF86;   /* gold as text ON INK, where it can be bright */
  /* Gold that behaves like metal rather than paint: the light rakes across it.
     This is the whole thesis of the brand in one value. */
  --gold-leaf: linear-gradient(107deg, #B8842A 0%, #E0B252 26%, #FBEBC0 46%,
                               #E0B252 62%, #C08D22 100%);

  /* ── rose: money owed, and destructive actions. Never decoration. ── */
  --rose:      #B93B33;
  --rose-ink:  #96271F;
  --rose-wash: #FBEDEB;

  /* ── functional only ── */
  --wa:        #1FB855;   /* WhatsApp, and nothing else */
  --wa-deep:   #17994A;
  --good:      #2C7A55;

  /* ── form ── */
  --r-sm: 8px; --r: 12px; --r-lg: 18px; --r-xl: 26px;
  --shadow-1: 0 1px 2px rgba(14,20,23,.05), 0 8px 24px -16px rgba(14,20,23,.28);
  --shadow-2: 0 18px 44px -22px rgba(14,20,23,.30);
  --shadow-3: 0 40px 90px -40px rgba(14,20,23,.42);
  --maxw: 1160px;

  --display: 'Bricolage Grotesque', 'Inter Tight', system-ui, sans-serif;
  --ui: 'Inter Tight', system-ui, -apple-system, sans-serif;

  /* One easing everywhere. Motion that shares a curve reads as one system. */
  --ease: cubic-bezier(.2,.7,.3,1);
  --ease-out: cubic-bezier(.16,1,.3,1);

  /* The phone's notch and home indicator. Every fixed edge respects these. */
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);

  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--paper); color: var(--ink);
  font-family: var(--ui); font-size: 15px; line-height: 1.55;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  font-variant-numeric: tabular-nums;
  overscroll-behavior-y: none;
}

h1, h2, h3, h4, .display {
  font-family: var(--display); font-weight: 700; letter-spacing: -0.028em;
  margin: 0; text-wrap: balance; line-height: 1.08;
}
p { margin: 0; text-wrap: pretty; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

/* A visible focus ring is a release requirement, not a nicety. */
:focus-visible { outline: 2.5px solid var(--gold-deep); outline-offset: 2px; border-radius: 4px; }

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 18px; }
@media (min-width: 760px) { .wrap { padding-inline: 28px; } }

.eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold-ink);
}
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.tnum { font-variant-numeric: tabular-nums; }

/* ── buttons ─────────────────────────────────────────────────────────────── */
/* 46px minimum height. This is used one-handed, with a wet thumb, in a bay. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 46px; padding: 0 20px; border-radius: 999px;
  border: 1.5px solid transparent; background: transparent;
  font-family: var(--ui); font-size: 15px; font-weight: 600; letter-spacing: -.01em;
  white-space: nowrap; -webkit-tap-highlight-color: transparent;
  transition: transform .2s var(--ease), box-shadow .24s var(--ease),
              background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.btn:active { transform: scale(.97); }

/* Gold is a fill with ink on top — never gold text on paper. */
.btn-gold { background: var(--gold-fill); color: var(--ink); box-shadow: var(--shadow-1); }
.btn-gold:hover { background: var(--gold-deep); box-shadow: var(--shadow-2); }
.btn-ink { background: var(--ink); color: #fff; }
.btn-ink:hover { background: #1D262B; box-shadow: var(--shadow-2); }
.btn-ghost { border-color: var(--line-2); color: var(--ink); background: var(--panel); }
.btn-ghost:hover { border-color: var(--ink); }
.btn-quiet { color: var(--ink-2); background: var(--panel-3); }
.btn-quiet:hover { background: var(--line); }
.btn-wa { background: var(--wa); color: #fff; }
.btn-wa:hover { background: var(--wa-deep); box-shadow: var(--shadow-2); }
.btn-rose { background: var(--rose); color: #fff; }
.btn-rose:hover { background: var(--rose-ink); }
.btn-sm { min-height: 38px; padding: 0 14px; font-size: 14px; }
.btn-lg { min-height: 54px; padding: 0 26px; font-size: 16.5px; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .45; pointer-events: none; }

.ico { width: 1em; height: 1em; flex: none; fill: currentColor; }

/* ── surfaces ────────────────────────────────────────────────────────────── */
.card {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-1);
}
.tag {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 600;
  background: var(--panel-3); color: var(--ink-2);
}
.tag-gold { background: var(--gold-wash); color: var(--gold-ink); }
.tag-rose { background: var(--rose-wash); color: var(--rose-ink); }
.tag-good { background: #E7F3EC; color: var(--good); }

/* ── motion ──────────────────────────────────────────────────────────────── */
/* Reveal-on-scroll. The transform lives on the SECTION, never on a wrapper
   that contains a fixed element — an animated transform makes its element the
   containing block for position:fixed, which silently pins modals and sticky
   bars inside the column instead of the viewport. Learned the hard way.

   The hiding is ARMED BY JAVASCRIPT (`html.js-reveal`) and released by a timed
   backstop as well as by the observer. CSS must never hide something that only
   JavaScript can bring back — if the script fails to load, the observer never
   fires, or a crawler renders without scrolling, the page would be blank
   sections all the way down and nothing would report an error. */
.js-reveal .reveal { opacity: 0; transform: translateY(18px); }
.js-reveal .reveal.in { opacity: 1; transform: none; transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .reveal.in { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}