/*
 * RePlastic design tokens
 * Portable copy of frontend/index.css on the colorV2 branch.
 * If this file and frontend/index.css disagree, index.css wins for the
 * analytics dashboard. Other apps import this file as-is.
 *
 * Lime is a mark (tab underline, focus, bars, dots).
 * The header is navy in the light theme and deep forest in the dark theme.
 * Warn and bad appear only when a value needs attention.
 */

@import url("https://fonts.googleapis.com/css2?family=Geist:wght@300..700&family=Geist+Mono:wght@400;500&display=swap");

:root {
  --font-sans: "Geist", system-ui, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --fs-card-title: 19px;
  --fs-inner-title: 15px;
  --fs-inner-sub: 13px;
  --fs-body: 15px;
  --fs-small: 14px;
  --fs-label: 12.5px;
  --fs-header: 13.5px;
  --fs-control: 12.5px;
  --fs-metric: 26px;
  --fs-metric-sm: 20px;
  --fs-hero: 44px;
  --fs-impact: 52px;

  --radius-container: 14px;
  --radius-panel: 10px;
  --radius-control: 8px;
  --radius-menu: 10px;
  --radius-item: 6px;
  --radius-mark: 3px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --header-h: 68px;
  --control-h: 32px;
  --field-h: 36px;
  --page-max: 1536px;

  --color-text-primary: #0e1a12;
  --color-text-strong: #0e1a12;
  --color-text-body: #2e3a31;
  --color-text-secondary: #56625a;
  --color-text-muted: #6a756d;
  --color-text-faint: #8b958d;

  --color-brand-lime: #85d027;
  --color-brand-green: #3d7a12;
  --color-brand-green-dark: #2f6410;
  --color-accent-soft: color-mix(in srgb, #85d027 16%, #ffffff);
  --color-warn: #a85d08;
  --color-bad: #c0362c;

  --color-neutral-strong: #7d867f;
  --color-neutral-soft: #c3c9c4;

  --class-pet: #eb6834;
  --class-hdpe: #2a78d6;
  --class-pp: #1baf7a;
  --class-others: #7d867f;
  --class-garbage: #c3c9c4;

  --color-surface-page: #f4f5f2;
  --color-surface-card: #ffffff;
  --color-surface-inner: #f6f7f4;
  --color-surface-raised: #ffffff;

  --color-border-light: #e5e8e3;
  --color-border-medium: #d3d8d2;

  --shadow-card: 0 1px 2px rgba(8, 37, 23, 0.04), 0 1px 1px rgba(8, 37, 23, 0.02);
  --shadow-pop: 0 12px 32px -8px rgba(8, 37, 23, 0.18), 0 2px 6px rgba(8, 37, 23, 0.06);
  --page-glow: radial-gradient(1200px 420px at 50% -120px, rgba(133, 208, 39, 0.10), transparent 70%);

  --color-header-bg: #12203e;
  --color-header-fg: #ffffff;
  --color-header-muted: rgba(255, 255, 255, 0.72);
  --color-header-border: rgba(255, 255, 255, 0.16);
  --color-header-surface: rgba(255, 255, 255, 0.08);
  --color-header-menu: #ffffff;
  --color-header-accent: #85d027;
  --color-header-danger: #c0362c;
  --color-header-signout: #fca5a5;
  --color-header-signout-hover: #fecaca;
  --color-header-signout-fill: rgba(239, 68, 68, 0.08);
  --color-header-signout-fill-hover: rgba(239, 68, 68, 0.18);
  --color-header-signout-border: rgba(248, 113, 113, 0.35);
  --color-header-signout-border-hover: rgba(248, 113, 113, 0.65);

  --color-chart-tick: #6a756d;
  --color-chart-grid: #eef0ec;
  --color-chart-axis: #d3d8d2;
  --color-chart-cursor: rgba(8, 37, 23, 0.04);
  --color-tooltip-bg: #ffffff;
  --color-tooltip-border: #e5e8e3;
  --color-tooltip-shadow: 0 12px 32px -8px rgba(8, 37, 23, 0.18), 0 2px 6px rgba(8, 37, 23, 0.06);
  --color-tooltip-text: #0e1a12;
  --color-tooltip-muted: #56625a;
  --color-chart-band: rgba(61, 122, 18, 0.06);
  --color-chart-band-stroke: rgba(61, 122, 18, 0.28);
}

[data-theme="dark"] {
  --color-text-primary: #eef1ec;
  --color-text-strong: #eef1ec;
  --color-text-body: #c4c9c3;
  --color-text-secondary: #9aa299;
  --color-text-muted: #7f877e;
  --color-text-faint: #5c645b;

  --color-brand-lime: #85d027;
  --color-brand-green: #85d027;
  --color-brand-green-dark: #6fb31b;
  --color-accent-soft: rgba(133, 208, 39, 0.12);
  --color-warn: #e8a33d;
  --color-bad: #f07872;

  --color-neutral-strong: #8a928b;
  --color-neutral-soft: #475048;

  --class-pet: #d95926;
  --class-hdpe: #3987e5;
  --class-pp: #199e70;
  --class-others: #8a928b;
  --class-garbage: #475048;

  --color-surface-page: #082517;
  --color-surface-card: #0e2c1c;
  --color-surface-inner: #143524;
  --color-surface-raised: #1a3d2c;

  --color-border-light: rgba(214, 235, 220, 0.12);
  --color-border-medium: rgba(214, 235, 220, 0.20);

  --shadow-card: inset 0 1px 0 rgba(255, 255, 255, 0.025);
  --shadow-pop: 0 16px 40px -8px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(214, 235, 220, 0.06);
  --page-glow: radial-gradient(1200px 420px at 50% -140px, rgba(133, 208, 39, 0.07), transparent 70%);

  --color-header-bg: #03160c;
  --color-header-fg: #ffffff;
  --color-header-muted: rgba(255, 255, 255, 0.72);
  --color-header-border: rgba(255, 255, 255, 0.16);
  --color-header-surface: rgba(255, 255, 255, 0.08);
  --color-header-menu: #1a3d2c;
  --color-header-accent: #85d027;
  --color-header-danger: #f07872;
  --color-header-signout: #fca5a5;
  --color-header-signout-hover: #fecaca;
  --color-header-signout-fill: rgba(239, 68, 68, 0.08);
  --color-header-signout-fill-hover: rgba(239, 68, 68, 0.18);
  --color-header-signout-border: rgba(248, 113, 113, 0.35);
  --color-header-signout-border-hover: rgba(248, 113, 113, 0.65);

  --color-chart-tick: #7f877e;
  --color-chart-grid: rgba(214, 235, 220, 0.08);
  --color-chart-axis: rgba(214, 235, 220, 0.14);
  --color-chart-cursor: rgba(214, 235, 220, 0.04);
  --color-tooltip-bg: #1a3d2c;
  --color-tooltip-border: rgba(214, 235, 220, 0.1);
  --color-tooltip-shadow: 0 16px 40px -8px rgba(0, 0, 0, 0.6);
  --color-tooltip-text: #eef1ec;
  --color-tooltip-muted: #9aa299;
  --color-chart-band: rgba(133, 208, 39, 0.05);
  --color-chart-band-stroke: rgba(133, 208, 39, 0.22);
}

html {
  font-family: var(--font-sans);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Type sizes are drawn for about 125% browser zoom on a large monitor.
   Phones and tablets stay at 1. From 1280px, 1.1. From 1680px, 1.4375
   (1.25 × 1.15), which still leaves about 1170px of layout width. */
@media (min-width: 1280px) {
  html { zoom: 1.1; }
}
@media (min-width: 1680px) {
  html { zoom: 1.4375; }
}

body {
  background-color: var(--color-surface-page);
  background-image: var(--page-glow);
  background-repeat: no-repeat;
  color: var(--color-text-body);
  font-size: var(--fs-body);
  line-height: 1.45;
}

:focus-visible {
  outline: 2px solid var(--color-brand-lime);
  outline-offset: 2px;
  border-radius: 4px;
}

::selection {
  background: color-mix(in srgb, var(--color-brand-green) 28%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media print {
  html { zoom: 1; }
}