/* Single source of Cellaring design tokens: values only, with no reset. The app (frontend/dashboard) uses
   tokens.css, which includes the reset; unbundled static pages (templates/landing.html) load only this
   file via <link>. */
:root {
  --ui-scale: 1.1;
  --bg: #ffffff;
  --bg-elev: #f6f6f7;
  --ink: #1a1a1d;
  --ink-2: #4a4a4a;
  --ink-3: #8b8b90;
  /* Lines carry a trace of the burgundy ink instead of neutral black, so rules sit with the palette, not on it. */
  --line: rgba(60, 26, 38, 0.075);
  --line-strong: rgba(60, 26, 38, 0.15);
  /* Cards: a close contact shadow plus a wide, faint lift in the line's ink tone, instead of one flat gray blur. */
  --card-shadow: 0 1px 2px rgba(60, 26, 38, 0.035), 0 8px 24px -12px rgba(60, 26, 38, 0.08);
  /* Controls (inputs, selects, secondary buttons, filters, searches, row actions) are white surfaces lifted by a
     faint ring and soft shadow instead of an outline; the accent border appears only on focus, and hover deepens
     the shadow. Dark mode (dark.css) swaps the shadow for a tinted fill. */
  --field-bg: var(--bg);
  --field-bg-hover: var(--bg);
  --field-shadow: 0 0 0 1px rgba(60, 26, 38, 0.06), 0 1px 2px rgba(60, 26, 38, 0.06), 0 3px 8px -3px rgba(60, 26, 38, 0.1);
  --field-shadow-hover: 0 0 0 1px rgba(60, 26, 38, 0.09), 0 2px 4px rgba(60, 26, 38, 0.08), 0 6px 14px -6px rgba(60, 26, 38, 0.16);
  /* Primary (burgundy) buttons lift with a shadow in their own wine tone, so every button reads as raised. */
  --btn-solid-shadow: 0 1px 2px rgba(99, 26, 52, 0.22), 0 4px 12px -4px rgba(129, 39, 68, 0.38);
  --btn-solid-shadow-hover: 0 2px 4px rgba(99, 26, 52, 0.24), 0 8px 18px -6px rgba(129, 39, 68, 0.45);
  /* Disabled controls: faint diagonal hatching in the line tone, so even an empty disabled field reads as locked. */
  --field-disabled-bg: repeating-linear-gradient(135deg, var(--line) 0 1px, transparent 1px 7px);
  --accent: #812744;
  --accent-dark: #631a34;
  --accent-tint: #d9a8ba;
  /* Three accents: burgundy (red wine, primary actions), straw (white wine, sparkling wine, amounts), and
     bottle green (storage, cellars). Keep them separate from status colors (--ok/--bad/--warn). */
  --straw: #b08b1e;
  --straw-dark: #866812;
  --straw-tint: #e6cf86;
  --bottle: #2f6350;
  --bottle-dark: #234c3e;
  --bottle-tint: #9dc3b3;
  /* Chart-only palette: keep button and status colors independent. */
  --chart-burgundy: #78344e;
  --chart-burgundy-end: #b87590;
  --chart-teal: #497c83;
  --chart-teal-end: #91b7bb;
  --chart-gold: #a38454;
  --chart-gold-end: #cdb387;
  --chart-violet: #776b91;
  --chart-violet-end: #aaa0be;
  --chart-slate: #7f8b9a;
  --chart-slate-end: #b4beca;
  --chart-bar-color: var(--chart-burgundy);
  /* Corner radii: the user app and admin share the same scale. */
  --r-sm: 6px;
  --r-md: 12px;
  /* Floating menus (filter dropdowns, selects, comboboxes, top-bar search). */
  --r-menu: 10px;
  --menu-bg: var(--bg);
  --menu-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 12px 32px -8px rgba(0, 0, 0, 0.16);
  --menu-hover: color-mix(in srgb, var(--ink) 5%, transparent);
  --menu-selected: color-mix(in srgb, var(--accent) 7%, transparent);
  --card-padding: 14px;
  --card-heading-gap: 8px;
  /* Sizes of parts both the web and the native app (app/ios) draw. The app generates its theme from
     this file and dark.css, so change these values here rather than in the rules that use them. */
  --font-body: 14px;
  --font-title: 24px;
  --font-detail-title: 19px;
  --font-crumb: 12.5px;
  --font-row: 13px;
  --font-field-label: 10.5px;
  --font-tab: 10.5px;
  /* One height for every regular control: text fields, selects, regular buttons, list searches and filter buttons.
     Phones (760px and under, and the native app) use the compact filter height. */
  --filter-height: 34px;
  --filter-height-mobile: 32px;
  --control-height: var(--filter-height);
  --control-height-mobile: var(--filter-height-mobile);
  --btn-height: var(--control-height);
  --btn-font: 13.5px;
  --btn-sm-height: 32px;
  --btn-sm-font: 12.5px;
  --row-btn-height: 24px;
  --row-btn-font: 11.5px;
  --row-qr-btn-height: 19px;
  --row-qr-btn-font: 11px;
  --filter-font-mobile: 12px;
  --search-height: var(--control-height);
  --search-font: 13.5px;
  --tabbar-height: 60px;
  --ok: #15803d;
  --bad: #b42318;
  --warn: #a16207;
  --sans: "Wanted Sans Variable", -apple-system, BlinkMacSystemFont, system-ui,
    "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

@media (max-width: 760px) {
  :root { --control-height: var(--control-height-mobile); }
}

/* Japanese: Wanted Sans has no kana or kanji. Falling back to Korean system fonts gives kanji Korean
   glyph forms, so retain Wanted Sans for Latin text and use LINE Seed JP (loaded by setLanguage), then
   Japanese system fonts, before Korean fonts. */
:root:lang(ja) {
  --sans: "Wanted Sans Variable", "LINE Seed JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Yu Gothic",
    Meiryo, "Noto Sans JP", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
}