/* ==========================================================================
   Special Tools — theme tokens (proposed replacement for frontend/theme.css)
   --------------------------------------------------------------------------
   Same structure and intent as the current file: brand-surface tokens are
   override-able per shop, semantic tokens are fixed. Every existing variable
   name is preserved so no page breaks; new variables are added below them.

   Values come from the approved index-page design (option 4a).
   ========================================================================== */

:root {
  /* ---- Brand surface — override-able via shop branding settings ---------- */
  --color-brand-primary: #c62828;
  --color-brand-primary-hover: #a82121;
  --color-on-brand-primary: #f3f2f2;  /* text/icon color for anything sitting on brand-primary - theme-loader.js recomputes this from the actual color's luminance so a shop can't pick an accent that makes its own buttons unreadable */
  --color-surface: #ffffff;
  --color-surface-alt: #eae9e9;   /* was #f5f5f5 — now the pressed/thumb tone */
  --color-header-bg: #e8e4dd;     /* banner default: warm light */

  /* Banner: set by theme-loader.js from the shop's saved settings.
     --color-header-ink and --color-header-ink-muted are COMPUTED from the
     banner's luminance, never stored, so a shop cannot pick an unreadable
     combination. See banner-contrast.js. */
  --color-header-ink: #201e1d;
  --color-header-ink-muted: rgba(32, 30, 29, 0.55);
  --color-header-edge: rgba(32, 30, 29, 0.18);  /* hairline under light banners */
  --logo-plate-bg: transparent;                  /* none | #ffffff | #201e1d */
  --logo-plate-pad: 0px;                         /* 0 when plate is none */

  /* ---- Semantic — fixed, never overridden ------------------------------- */
  --color-danger: #c62828;
  --color-success: #0f6b4f;
  --color-info: #1976d2;
  --color-warning: #8a6d1f;
  --color-owner: #6a1b9a;

  /* ---- Page ground and neutrals ---------------------------------------- */
  --color-bg: #f3f2f2;
  --color-text-primary: #201e1d;
  --color-text-secondary: #6b6867;
  --color-text-tertiary: #8d8a89;
  --color-border: #d9d7d6;
  --color-border-strong: rgba(32, 30, 29, 0.4);
  --color-neutral: #555555;
  --color-neutral-dark: #201e1d;

  /* ---- Shape ----------------------------------------------------------- */
  --radius-card: 12px;
  --radius-button: 12px;
  --radius-input: 12px;
  --radius-thumb: 9px;
  --radius-pill: 20px;

  /* ---- Shadow ---------------------------------------------------------- */
  --shadow-card: 0 1px 2px rgba(45, 43, 43, 0.14);
  --shadow-raised: 0 3px 10px rgba(45, 43, 43, 0.16);

  /* ---- Type ------------------------------------------------------------ */
  --font-family: Archivo, system-ui, -apple-system, "Segoe UI", sans-serif;

  --text-banner: 800 27px/0.95 var(--font-family);
  --text-search: 800 16px/1.2 var(--font-family);
  --text-card-title: 800 16px/1.2 var(--font-family);
  --text-row-title: 800 14.5px/1.25 var(--font-family);
  --text-body: 400 12.5px/1.6 var(--font-family);
  --text-meta: 400 11.5px/1.45 var(--font-family);
  --text-status: 600 11px/1.3 var(--font-family);
  --text-label: 800 10px/1 var(--font-family);   /* + .09em, uppercase */
  --text-micro: 400 10.5px/1 var(--font-family);
  --text-mono-id: 800 10px/1.4 ui-monospace, Menlo, monospace;

  /* ---- Space ----------------------------------------------------------- */
  --space-xs: 6px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-gutter: 14px;   /* the page's left/right gutter */
  --space-lg: 16px;
  --space-xl: 24px;

  /* ---- Touch ----------------------------------------------------------- */
  --touch-min: 44px;      /* absolute floor for any tappable thing */
  --row-min: 68px;        /* list rows */
  --control-h: 52px;      /* search field, primary button, alert strip */

  /* ---- Motion ---------------------------------------------------------- */
  --press-transition: background 90ms ease;
}

/* Density is a shop setting. Compact reduces the paddings only — never the
   44px touch floor. Applied by theme-loader.js as data-density on <html>. */
:root[data-density="compact"] {
  --space-md: 9px;
  --space-gutter: 12px;
  --space-lg: 12px;
  --row-min: 60px;
  --control-h: 48px;
}