/*
 * theme.css — FuelMate: a premium dark forest-green fuel & mileage tracker.
 * Deep pine and emerald, warm off-white text; amber/gold used sparingly for
 * warnings, muted red only for errors and unusually high expenses.
 * The app OPENS dark, so :root carries the dark values and the light block
 * is the alternate mode a visitor can still switch to.
 */

:root {
  color-scheme: dark;
  --canvas: #0b1712;
  --surface: #163326;
  --surface-2: #1b3d2d;
  --border: #2a4938;
  --border-strong: #385c46;
  --ink: #f1f5f1;
  --muted: #a8bbaf;
  --accent: #2f8f5b;
  --accent-hover: #37a367;
  --accent-ink: #000000;
  --accent-text: #6fc98d;
  --accent-strong: #8fba9e;
  --accent-soft: #1b3d2d;
  --accent-border: #35624a;
  --success: #2f8f5b;
  --success-ink: #ffffff;
  --success-soft: #17301f;
  --success-strong: #6fc98d;
  --warning: #c9a24b;
  --warning-ink: #211a06;
  --warning-soft: #2c250f;
  --warning-strong: #e0c26a;
  --danger: #b85c4a;
  --danger-ink: #ffffff;
  --danger-soft: #331c17;
  --danger-strong: #e08a76;
  --chart-1: #4ead72;
  --chart-2: #8fba9e;
  --chart-3: #c9a24b;
  --chart-4: #6a9bc9;
  --chart-5: #b85c4a;
  --chart-6: #7f8fba;

  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --display-weight: 600;
  --display-tracking: -0.01em;
  --eyebrow-tracking: 0.08em;

  --radius-card: 16px;
  --radius-btn: 10px;
  --radius-input: 10px;
  --shadow-card: 0 14px 32px -16px rgba(0, 0, 0, 0.6);
  --shadow-raised: 0 20px 48px -18px rgba(0, 0, 0, 0.65);

  --x-sidebar: #10231a;
  --x-hover: #24533b;
  --x-band: linear-gradient(160deg, #10231a 0%, #0b1712 70%);
}

html[data-theme="light"] {
  color-scheme: light;
  --canvas: #f4f7f4;
  --surface: #ffffff;
  --surface-2: #eaf1ec;
  --border: #d3e0d7;
  --border-strong: #a9c1b1;
  --ink: #12211a;
  --muted: #4c6157;
  --accent: #2f8f5b;
  --accent-hover: #267b4c;
  --accent-ink: #000000;
  --accent-text: #21714a;
  --accent-strong: #1c6b46;
  --accent-soft: #dcefe2;
  --accent-border: #a9d3b8;
  --success: #2f8f5b;
  --success-ink: #ffffff;
  --success-soft: #dcefe2;
  --success-strong: #1c6b46;
  --warning: #9a7523;
  --warning-ink: #ffffff;
  --warning-soft: #f6ecd2;
  --warning-strong: #7a5c17;
  --danger: #a1503f;
  --danger-ink: #ffffff;
  --danger-soft: #f7e2dd;
  --danger-strong: #7e3b2d;
  --chart-1: #2f8f5b;
  --chart-2: #4c6157;
  --chart-3: #9a7523;
  --chart-4: #3b6f96;
  --chart-5: #a1503f;
  --chart-6: #5a5f96;

  --x-sidebar: #10231a;
  --x-hover: #d3e6da;
  --x-band: linear-gradient(160deg, #eef4ef 0%, #dcefe2 70%);
}

/*
 * app.css — THIS APP'S OWN CSS, for what no primitive and no utility covers:
 * the one screen that makes this app itself — a timer's dial, a kanban
 * board's columns, a seating plan, a game grid. Write those here, named for
 * what they are, in tokens only (var(--accent), var(--radius-card),
 * var(--font-display)). It loads last, after design.css and theme.css, and
 * wins. Ships empty.
 *
 * Not for restyling a primitive: those live in tailwind/components.css and
 * are yours to edit there. Not for colours: those live in theme.css.
 */

.fm-sidebar {
  background: var(--x-sidebar);
  border-right: 1px solid var(--border);
}

.fm-nav-link {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.6rem 0.9rem;
  border-radius: var(--radius-btn);
  color: var(--muted);
  font-size: 0.875rem;
  font-weight: 500;
  transition: background-color 150ms, color 150ms;
}
.fm-nav-link:hover {
  background: var(--x-hover);
  color: var(--ink);
  text-decoration: none;
}
.fm-nav-link.is-active {
  background: var(--accent-soft);
  color: var(--accent-text);
}

.fm-stat-card {
  background: linear-gradient(160deg, var(--surface) 0%, var(--surface-2) 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

.fm-band {
  background: var(--x-band);
}

.fm-chart-wrap {
  position: relative;
  width: 100%;
}

.fm-auth-card {
  background: linear-gradient(165deg, var(--surface) 0%, var(--surface-2) 100%);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-raised);
}

@media (max-width: 1023px) {
  .fm-sidebar { transform: translateX(-100%); transition: transform 200ms ease; }
  .fm-sidebar.is-open { transform: translateX(0); }
}