/* Browser adapter: native CSS values copied from globals.css; no Tailwind runtime. */
:root {
  /* ------------------------------------------------------------- surfaces */

  /* Toss's signature: the page is grey, the cards are white. Inverting it (white page,
     grey cards) is what makes a screen read as a web page rather than an app. */
  --color-canvas: #f2f4f6;
  --color-surface: #ffffff;
  --color-surface-sunken: #edf0f3;

  /* Satellite tiles are dark and photography does not theme, so anything sitting on the
     map is chosen against this, not against canvas. */
  --color-imagery: #1b1f24;

  /* ----------------------------------------------------------------- text */

  --color-ink: #191f28; /* 16.56 on white · 15.02 on canvas */
  --color-ink-soft: #4e5968; /* 7.11 on white — secondary copy, still AA */
  --color-ink-faint: #8b95a1; /* 3.04 on white — LARGE TEXT AND ICONS ONLY */

  /* ---------------------------------------------------------------- brand */

  /*
   * Two blues, and the split is not decorative.
   *
   * `brand` is Toss's blue. White text on it is 3.71 — under AA at normal sizes. It is
   * the colour of icons, of tints, of a 24px+ number. It is NOT a button fill.
   *
   * `brand-deep` is the same hue darkened until white text passes: 5.41. Every filled
   * button uses this, which is why `--primary` below points here and not at `brand`.
   * Getting it wrong type-checks, lints, and looks fine on a good monitor.
   */
  --color-brand: #3182f6;
  --color-brand-deep: #1b64da;
  --color-brand-soft: #e8f1fe;

  /* Text on a brand fill. Never themes — the surface under it is always brand. Using
     `text-surface` here would invert the moment a dark theme exists. */
  --color-on-brand: #ffffff;

  /* ------------------------------------- report status (the domain's spine) */

  /*
   * Five statuses matching the backend enum exactly, so a developer maps state to visual
   * 1:1. Each is a PAIR — soft fill, deep ink — never a saturated fill with white text:
   * the amber lands at 2.35 against white and the green at 2.55, decorative only.
   */
  --color-status-new: #edf0f3;
  --color-status-new-ink: #4e5968; /* 6.22 on its fill */

  --color-status-verifying: #fff3e0;
  --color-status-verifying-ink: #8a5200; /* 5.82 */

  --color-status-progress: #f0ebff;
  --color-status-progress-ink: #4b2fbf; /* 7.34 */

  --color-status-resolved: #e4f8f0;
  --color-status-resolved-ink: #06725a; /* 5.33 */

  --color-status-cancelled: #f1f3f5;
  --color-status-cancelled-ink: #5f6873; /* 5.08 */

  /* Overdue is not a status — it is derived from the deadline, so it is a separate
     signal that can sit on top of any of the five. */
  --color-overdue: #ffebec;
  --color-overdue-ink: #c7303c; /* 4.68 */

  /* ------------------------------------------- confidence, on the map only */

  /* Single-surface colours: 2.3–3.7 against white, 4.4–7.0 against imagery. The colour
     chooses the surface, not the other way round. Never on a dashboard. */
  --color-conf-high: #f04452; /* 4.46 on imagery */
  --color-conf-med: #e8973b; /* 7.04 on imagery */
  --color-conf-low: #12b886; /* 6.49 on imagery */

  /* ------------------------------------------------------ data visualisation */

  /*
   * Categorical hues in fixed order, assigned by position and never cycled — a seventh
   * series folds into "Khác" rather than repeating hue 1. Validated as a set on the light
   * surface; tritan ΔE is 6.4, inside the 6–8 floor band, which is legal ONLY with a
   * secondary encoding — so every chart here carries direct labels or gaps, never colour
   * alone.
   */
  --color-cat-1: #2563eb;
  --color-cat-2: #0d9488;
  --color-cat-3: #d97706;
  --color-cat-4: #7c3aed;
  --color-cat-5: #65a30d;
  --color-cat-6: #be185d;

  /* Sequential, one hue light to dark, for magnitude and ordered levels. Never a
     rainbow. */
  --color-seq-1: #dbeafe;
  --color-seq-2: #93c5fd;
  --color-seq-3: #3b82f6;
  --color-seq-4: #1d4ed8;

  /* Grid and axis recede. They orient the eye; they are not data. */
  --color-grid: #e6e9ed;

  /* ---------------------------------------------------------------- shape */

  /* Three steps is enough — a fourth invites inconsistency. */
  --radius-control: 14px;
  --radius-card: 20px;
  --radius-tile: 24px;
  --radius-pill: 999px;

  /* Almost absent. Separation comes from white-on-grey, not from elevation; a heavy
     shadow here reads as Material rather than Toss. */
  --shadow-card: 0 1px 2px rgb(25 31 40 / 0.04), 0 4px 12px rgb(25 31 40 / 0.04);
  --shadow-lift: 0 2px 4px rgb(25 31 40 / 0.06), 0 12px 28px rgb(25 31 40 / 0.10);
}
:root {
  /*
   * shadcn's slots, pointed at the lab's values. The right-hand side is the only place a
   * colour is decided; nothing below invents one.
   *
   * `--radius: 0.875rem` is picked so shadcn's derived scale lands on the lab's shapes:
   * `rounded-lg` (the Button) = 14px = control, `rounded-xl` (the Card) = 19.6px ≈ card,
   * `rounded-2xl` = 25.2px ≈ tile. One number instead of rewriting every component.
   */
  --background: var(--color-canvas);
  --foreground: var(--color-ink);
  --card: var(--color-surface);
  --card-foreground: var(--color-ink);
  --popover: var(--color-surface);
  --popover-foreground: var(--color-ink);

  /* brand-deep, not brand. See the note above it. */
  --primary: var(--color-brand-deep);
  --primary-foreground: var(--color-on-brand);

  --secondary: var(--color-surface-sunken);
  --secondary-foreground: var(--color-ink);
  --muted: var(--color-surface-sunken);
  --muted-foreground: var(--color-ink-soft);

  /* The tinted row/hover state, which is the icon tile's fill at rest. */
  --accent: var(--color-brand-soft);
  --accent-foreground: var(--color-brand-deep);

  --destructive: var(--color-overdue-ink);
  --border: var(--color-grid);
  --input: var(--color-grid);
  --ring: var(--color-brand);

  --chart-1: var(--color-cat-1);
  --chart-2: var(--color-cat-2);
  --chart-3: var(--color-cat-3);
  --chart-4: var(--color-cat-4);
  --chart-5: var(--color-cat-5);

  --radius: 0.875rem;

  --sidebar: var(--color-surface);
  --sidebar-foreground: var(--color-ink);
  --sidebar-primary: var(--color-brand-deep);
  --sidebar-primary-foreground: var(--color-on-brand);
  --sidebar-accent: var(--color-brand-soft);
  --sidebar-accent-foreground: var(--color-brand-deep);
  --sidebar-border: var(--color-grid);
  --sidebar-ring: var(--color-brand);
}
:root {
  --font-sans: "Be Vietnam Pro", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --font-heading: var(--font-sans);
  --spacing-1: 4px;
  --spacing-1-5: 6px;
  --spacing-2: 8px;
  --spacing-3: 12px;
  --spacing-4: 16px;
  --spacing-5: 20px;
  --spacing-6: 24px;
  --spacing-8: 32px;
  --spacing-16: 64px;
  --size-control: 32px;
  --size-iconTileMd: 56px;
  --size-iconTileLg: 64px;
  --size-pageMaxCitizen: 448px;
  --size-assistantPanel: 380px;
  --breakpoint-sm: 640px;
  --breakpoint-lg: 1024px;
}
.type-display {
  font-family: var(--font-sans);
  font-size: 30px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.type-title {
  font-family: var(--font-sans);
  font-size: 21px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.type-heading {
  font-family: var(--font-sans);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.4;
}
.type-body {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.55;
}
.type-label {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
}
.type-caption {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.45;
}
.type-code {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.02em;
}
@font-face{font-family:"Be Vietnam Pro";src:url("fonts/BeVietnamPro-Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Be Vietnam Pro";src:url("fonts/BeVietnamPro-Medium.ttf") format("truetype");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Be Vietnam Pro";src:url("fonts/BeVietnamPro-SemiBold.ttf") format("truetype");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Be Vietnam Pro";src:url("fonts/BeVietnamPro-Bold.ttf") format("truetype");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Be Vietnam Pro";src:url("fonts/BeVietnamPro-ExtraBold.ttf") format("truetype");font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("fonts/JetBrainsMono-Variable.ttf") format("truetype");font-weight:100 800;font-style:normal;font-display:swap}