/* ============================================================
 * IcanspendToday — Colors & Type
 * ------------------------------------------------------------
 * Quiet, typewriter-coded, warm. The opposite of a finance-app
 * dashboard. Content is held by whitespace; carried by one
 * monospaced family; punctuated by a small indigo + terracotta
 * palette. Lowercase by brand.
 * ============================================================ */

/* JetBrains Mono — locally hosted brand files (user-uploaded). */
@font-face {
  font-family: 'JetBrains Mono';
  src: url('fonts/JetBrainsMono-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('fonts/JetBrainsMono-Italic.ttf') format('truetype');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('fonts/JetBrainsMono-Medium.ttf') format('truetype');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('fonts/JetBrainsMono-MediumItalic.ttf') format('truetype');
  font-weight: 500; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('fonts/JetBrainsMono-SemiBold.ttf') format('truetype');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('fonts/JetBrainsMono-Bold.ttf') format('truetype');
  font-weight: 700; font-style: normal; font-display: swap;
}

/* Caveat — locally hosted brand files (user-uploaded). */
@font-face {
  font-family: 'Caveat';
  src: url('fonts/Caveat-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Caveat';
  src: url('fonts/Caveat-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Caveat';
  src: url('fonts/Caveat-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Caveat';
  src: url('fonts/Caveat-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- Base colors (from src/styles/tokens.css) ---- */
  --canvas: #e8e6e1;           /* warm off-white page bg */
  --ink: #1a1a1a;              /* primary text */
  --ink-muted: #6b6b6b;        /* captions, meta */
  --indigo: #2a1bd1;           /* brand; under / saved state */
  --indigo-ink: #ffffff;       /* text on indigo fill */
  --terracotta: #c6543c;       /* mild over (≤ 2× allowance) */
  --terracotta-strong: #a5371f; /* strong over (> 2× allowance) */
  --grid-dot: rgba(42, 27, 209, 0.2); /* signature dot grid */

  /* ---- Semantic fg / bg aliases ---- */
  --fg-1: var(--ink);
  --fg-2: var(--ink-muted);
  --fg-brand: var(--indigo);
  --fg-under: var(--indigo);
  --fg-over: var(--terracotta);
  --fg-over-strong: var(--terracotta-strong);
  --bg-canvas: var(--canvas);
  --bg-indigo: var(--indigo);

  /* ---- Border opacities ---- */
  --border-subtle: rgba(26, 26, 26, 0.10);
  --border-strong: rgba(26, 26, 26, 0.20);

  /* ---- Banner surface tints ---- */
  --bg-warn-tint: rgba(165, 55, 31, 0.12);
  --bg-info-tint: rgba(42, 27, 209, 0.08);

  /* ---- Type families ---- */
  --font-mono: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace,
    SFMono-Regular, Menlo, monospace;
  --font-hand: 'Caveat', 'Shadows Into Light', cursive;

  /* ---- Type scale (mobile / desktop pair) ---- */
  --fs-headline: 56px;
  --fs-headline-lg: 72px;
  --fs-display: 28px;
  --fs-display-lg: 36px;
  --fs-body: 16px;
  --fs-body-lg: 18px;
  --fs-caption: 13px;
  --fs-caption-lg: 14px;
  --fs-btn: 16px;
  --fs-btn-lg: 18px;

  /* ---- Spacing scale (px) ---- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-12: 48px;
  --sp-18: 72px;
  --sp-24: 96px;

  /* ---- Radii ---- */
  --radius: 12px;     /* buttons, inputs, hero panel, modals */
  --radius-sm: 10px;  /* category picker buttons only */
  --radius-hover: 4px; /* interactive tile hover hit area */

  /* ---- Motion ---- */
  --ease-brand: cubic-bezier(0.2, 0.0, 0.0, 1.0);
  --dur-press: 120ms;
  --dur-state: 180ms;
  --dur-recalc: 200ms;
}

/* ============================================================
 * Base
 * ============================================================ */

html,
body {
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-mono);
  font-feature-settings: 'tnum' 1, 'cv11' 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ============================================================
 * Semantic type styles
 * ------------------------------------------------------------
 * Mobile values by default; _lg variants bump for desktop.
 * Everything lowercase by brand (non-UI body copy can override).
 * ============================================================ */

.t-headline {
  font-family: var(--font-mono);
  font-size: var(--fs-headline);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
}
.t-headline-lg { font-size: var(--fs-headline-lg); }

.t-display {
  font-family: var(--font-mono);
  font-size: var(--fs-display);
  font-weight: 500;
  line-height: 1.2;
  text-transform: lowercase;
}
.t-display-lg { font-size: var(--fs-display-lg); }

.t-body {
  font-family: var(--font-mono);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.5;
}
.t-body-lg { font-size: var(--fs-body-lg); }

.t-caption {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.02em;
  color: var(--ink-muted);
  text-transform: lowercase;
}
.t-caption-lg { font-size: var(--fs-caption-lg); }

.t-btn {
  font-family: var(--font-mono);
  font-size: var(--fs-btn);
  font-weight: 500;
  line-height: 1.2;
  text-transform: lowercase;
}
.t-btn-lg { font-size: var(--fs-btn-lg); }

.t-hand {
  font-family: var(--font-hand);
  font-weight: 400;
  color: var(--indigo);
}

/* Tufte-style inline emphasis: one critical word in indigo. */
.t-emph { color: var(--indigo); font-weight: 500; }
.t-emph-over { color: var(--terracotta-strong); font-weight: 500; }

/* ============================================================
 * Signature dot-grid (behind hero + calendar + empty states)
 * ============================================================ */
.dot-grid {
  background-image: radial-gradient(circle, var(--grid-dot) 1px, transparent 1px);
  background-size: 16px 16px;
  background-position: 0 0;
}

/* ============================================================
 * Reduced motion
 * ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0ms !important;
    transition-duration: 0ms !important;
  }
}