/*
 * theme.css — Talão's design-system values.
 * Warm-craft × monochrome-ink: one ink on warm cream stock, amounts picked
 * out in a single clay accent. Opens light; a dark carbon-copy set follows.
 */

:root {
  --canvas: #f6f1e7;
  --surface: #fbf9f4;
  --surface-2: #efe6d3;
  --border: #e3d7c0;
  --border-strong: #c9b89a;
  --ink: #2b2620;
  --muted: #69645f;
  --accent: #2b2620;
  --accent-hover: #423a30;
  --accent-ink: #f6f1e7;
  --accent-text: #995025;
  --accent-strong: #2b2620;
  --accent-soft: #f1e0d3;
  --accent-border: #d9b79f;
  --success: #4c6b3f;
  --success-ink: #ffffff;
  --success-soft: #e4ead9;
  --success-strong: #3c5631;
  --warning: #9c6b1f;
  --warning-ink: #ffffff;
  --warning-soft: #f2e6d2;
  --warning-strong: #7e5518;
  --danger: #a13f2e;
  --danger-ink: #ffffff;
  --danger-soft: #f3ddd6;
  --danger-strong: #82301f;
  --chart-1: #2b2620;
  --chart-2: #995025;
  --chart-3: #7a6a52;
  --chart-4: #b08968;
  --chart-5: #8c7b63;
  --chart-6: #c9b89a;

  /* Talão's own tokens: the one deliberately modern gradient, kept to the
     ink/clay palette rather than a fintech blue — the sign-in hero and every
     filled button read from it. */
  --x-hero-from: #211c17;
  --x-hero-via: #5c3420;
  --x-hero-to: #a85a2c;
  --x-hero-glow: #c47a3f;
  --x-btn-to: #4a3222;

  --font-display: "Fraunces", ui-serif, Georgia, serif;
  --font-body: "Public Sans", ui-sans-serif, system-ui, sans-serif;
  --font-sans: "Public Sans", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --display-weight: 600;
  --display-tracking: -0.01em;
  --eyebrow-tracking: 0.04em;

  --radius-btn: 10px;
  --radius-card: 14px;
  --radius-input: 10px;
  --border-w: 1px;
  --border-strong-w: 1.5px;
  --shadow-card: 0 2px 8px -2px rgba(43, 38, 32, 0.12), 0 1px 2px rgba(43, 38, 32, 0.07);
  --shadow-raised: 0 16px 36px -10px rgba(43, 38, 32, 0.32), 0 4px 12px rgba(43, 38, 32, 0.14);
  --shadow-btn: 0 1px 2px rgba(43, 38, 32, 0.16);
  --card-pad: 1.25rem;
  --caps: none;
  --btn-weight: 600;
  --measure: 62ch;
}

html[data-theme="dark"] {
  --canvas: #1c1712;
  --surface: #241e17;
  --surface-2: #2c251c;
  --border: #3a3025;
  --border-strong: #52432f;
  --ink: #f3ead9;
  --muted: #b3a48d;
  --accent: #f3ead9;
  --accent-hover: #e4d8bf;
  --accent-ink: #1c1712;
  --accent-text: #e0996a;
  --accent-strong: #f3ead9;
  --accent-soft: #3a2c1f;
  --accent-border: #5c4530;
  --success: #8fb579;
  --success-ink: #12210d;
  --success-soft: #22301b;
  --success-strong: #b7dba4;
  --warning: #dba75c;
  --warning-ink: #241705;
  --warning-soft: #3a2c14;
  --warning-strong: #f0c37e;
  --danger: #dd8871;
  --danger-ink: #250c07;
  --danger-soft: #3a1f18;
  --danger-strong: #f2ad9e;
  --chart-1: #f3ead9;
  --chart-2: #e0996a;
  --chart-3: #b3a48d;
  --chart-4: #93805f;
  --chart-5: #6f5f47;
  --chart-6: #52432f;

  --x-hero-from: #0f0c09;
  --x-hero-via: #3a2214;
  --x-hero-to: #e0996a;
  --x-hero-glow: #f0b077;
  --x-btn-to: #3a2c1f;
}

/*
 * app.css — Talão's own screen: the receipt-pad ledger, its ink-dark summary
 * band and the camera tile in the add-expense sheet. Everything here reads
 * tokens only. No entrance motion — the brief calls for none; only the one
 * orchestrated sheet rise (declared on .sheet in components.css) moves.
 */

/* ---- The ledger list ------------------------------------------------------
   Rows read like a tear-off receipt stub: a dashed perforation between each
   one, never a table grid. */
.ledger-list {
  @apply flex flex-col;
}
.ledger-row {
  @apply flex items-center gap-3 py-4;
  border-bottom: 1px dashed var(--border-strong);
}
.ledger-row:last-child {
  border-bottom: none;
}
.ledger-row-date {
  @apply flex w-11 shrink-0 flex-col items-start leading-tight;
}
.ledger-row-day {
  @apply font-mono text-sm font-medium text-ink;
}
.ledger-row-weekday {
  @apply text-[0.65rem] uppercase text-muted;
  letter-spacing: 0.04em;
}
.ledger-row-main {
  @apply flex min-w-0 flex-1 flex-col items-start gap-1;
}
.ledger-row-merchant {
  @apply w-full truncate text-sm font-medium text-ink;
}
.ledger-row-main .stamp {
  @apply max-w-full truncate;
}
.ledger-row-note {
  @apply text-xs text-muted;
}
.ledger-thumb {
  @apply flex size-9 shrink-0 items-center justify-center overflow-hidden border border-border bg-surface-2 text-muted;
  border-radius: 8px;
}
.ledger-thumb img {
  @apply size-full object-cover;
}
.ledger-thumb-empty .icon {
  @apply size-4;
}
.ledger-row-side {
  @apply flex shrink-0 items-center gap-1;
}
.ledger-row-amount {
  @apply font-mono text-base font-semibold tabular-nums text-ink;
}
.ledger-row-delete {
  @apply opacity-0 transition-opacity duration-150;
}
.ledger-row:hover .ledger-row-delete,
.ledger-row:focus-within .ledger-row-delete {
  @apply opacity-100;
}
@media (hover: none) {
  .ledger-row-delete {
    @apply opacity-100;
  }
}

/* ---- Monthly summary band --------------------------------------------------
   The one dark statement band on the page: ink ground, cream figures, the
   ranking read as proportional bars — never equal-width tiles. */
.ledger-band {
  @apply bg-ink px-6 py-8 text-canvas;
  border-radius: var(--radius-card);
}
.ledger-band-label {
  @apply text-xs font-medium uppercase text-canvas/60;
  letter-spacing: 0.04em;
}
.ledger-band-total {
  @apply mt-1 font-mono text-5xl font-semibold tabular-nums tracking-tight md:text-6xl;
}
.ledger-band-empty {
  @apply mt-4 max-w-[38ch] text-sm text-canvas/70;
}
.ledger-band-ranking {
  @apply mt-7 flex flex-col gap-5;
}
.ledger-band-rank-row {
  @apply flex flex-col gap-2;
}
.ledger-band-rank-head {
  @apply flex items-center justify-between gap-3;
}
.ledger-band-rank-amount {
  @apply font-mono text-sm tabular-nums text-canvas/85;
}
.ledger-band-bar-track {
  @apply h-2 w-full overflow-hidden rounded-full bg-canvas/15;
}
.ledger-band-bar-fill {
  @apply h-full rounded-full bg-canvas/70;
}
.stamp-on-dark {
  @apply border-canvas/70 text-canvas;
}

/* ---- Category ledger screen ------------------------------------------------ */
.cat-list {
  @apply flex flex-col gap-5;
}
.cat-row-head {
  @apply flex flex-wrap items-center gap-x-3 gap-y-1;
}
.cat-row-meta {
  @apply text-xs text-muted;
}
.cat-row-amount {
  @apply ml-auto font-mono text-base font-semibold tabular-nums text-ink;
}
.cat-row-track {
  @apply mt-2 bg-surface-2;
}
.cat-row-bar-fill {
  @apply h-full rounded-full bg-accent-text;
}

/* ---- Receipt capture tile, inside the add-expense sheet -------------------- */
.receipt-tile {
  @apply relative flex aspect-[16/9] w-full cursor-pointer items-center justify-center overflow-hidden border-2 border-dashed border-border-strong bg-surface-2;
  border-radius: var(--radius-card);
}
.receipt-tile:hover {
  @apply border-ink;
}
/* The real tap target: sized to the whole tile, invisible but not 1px — a
   visitor's browser (and any accessibility check) sees a proper control. */
.receipt-input-hit {
  @apply absolute inset-0 size-full cursor-pointer opacity-0;
}
.receipt-tile:has(.receipt-input-hit:focus-visible) {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}
.receipt-tile img[data-receipt-preview] {
  @apply size-full object-cover;
}
.receipt-tile-empty {
  @apply flex flex-col items-center gap-2 px-4 text-center text-sm text-muted;
}
[data-mode="scan"] .receipt-tile {
  @apply border-accent-text;
}

/* Reduced motion: the sheet still opens, it just doesn't rise to get there. */
html.reduced-motion .ledger-band-bar-fill,
html.reduced-motion .cat-row-bar-fill {
  transition: none;
}

/* ---- Auth screens (sign in / sign up) --------------------------------------
   The one deliberately modern moment in Talão: a gradient hero panel beside a
   plain paper-white card. Built from the app's own ink/clay tokens — never a
   fintech blue — so it still reads as the same ledger, just dressed for the
   door. Every other screen stays flat ink-on-cream, by the brief. */
.auth-shell {
  @apply grid min-h-screen md:grid-cols-2;
}
.auth-hero {
  @apply relative flex items-center justify-center overflow-hidden px-8 py-16 text-canvas md:px-14;
  background: linear-gradient(155deg, var(--x-hero-from) 0%, var(--x-hero-via) 55%, var(--x-hero-to) 125%);
}
.auth-hero::before {
  content: "";
  @apply pointer-events-none absolute inset-0;
  background: radial-gradient(48% 42% at 12% 8%, color-mix(in srgb, var(--x-hero-glow) 55%, transparent), transparent 70%);
}
.auth-hero-inner {
  @apply relative z-[1] flex max-w-md flex-col gap-5;
}
.auth-wordmark {
  @apply flex items-center gap-2 text-lg font-semibold text-canvas;
}
.auth-hero-heading {
  @apply font-display text-4xl font-semibold leading-[1.05] tracking-tight md:text-5xl;
}
.auth-hero-sub {
  @apply max-w-[38ch] text-canvas/80;
}
.auth-hero-quote {
  @apply mt-4 font-display text-xl italic text-canvas/90;
}
.auth-panel {
  @apply flex flex-col items-center justify-center gap-6 px-6 py-16;
}
.auth-card {
  @apply w-full max-w-md border border-border bg-surface p-8;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-raised);
}
.auth-card-title {
  @apply text-2xl font-semibold tracking-tight;
}
.auth-card-sub {
  @apply mt-1 text-sm text-muted;
}
.auth-footnote {
  @apply text-sm text-muted;
}