/* Grind Labs packaged-surface contract.
 * This is the sole package-owned safe-area and cross-surface colour bridge.
 * Component styles consume semantic tokens; raw colour primitives live here
 * with the rest of the Design Engine layer, never in component overrides. */
:root {
  --grind-safe-area-top: env(safe-area-inset-top, 0px);
  --grind-safe-area-right: env(safe-area-inset-right, 0px);
  --grind-safe-area-bottom: env(safe-area-inset-bottom, 0px);
  --grind-safe-area-left: env(safe-area-inset-left, 0px);
  --viewport-inset-top: var(--grind-safe-area-top);
  --viewport-inset-right: var(--grind-safe-area-right);
  --viewport-inset-bottom: var(--grind-safe-area-bottom);
  --viewport-inset-left: var(--grind-safe-area-left);

  --grind-shell-light-canvas: #f4f0eb;
  --grind-shell-light-surface: #fffefa;
  --grind-shell-light-raised: #ffffff;
  --grind-shell-light-soft: #eee7e1;
  --grind-shell-light-ink: #30221c;
  --grind-shell-light-ink-soft: #69584f;
  --grind-shell-light-ink-muted: #71695d;
  --grind-shell-light-line: #ddd1c9;
  --grind-shell-light-line-strong: #b39e92;
  --grind-shell-dark-canvas: #171512;
  --grind-shell-dark-surface: #201e1a;
  --grind-shell-dark-raised: #28251f;
  --grind-shell-dark-soft: #312d26;
  --grind-shell-dark-ink: #f5f1e7;
  --grind-shell-dark-ink-soft: #cbc4b7;
  --grind-shell-dark-ink-muted: #a39b8e;
  --grind-shell-dark-line: #5b5448;
  --grind-shell-dark-line-strong: #817768;
  --grind-shell-logo-plate: #fffefa;
  --grind-shell-danger-light: #a13a2a;
  --grind-shell-danger-dark: #f2927f;
  --grind-shell-success-light: #3d6c4c;
  --grind-shell-success-dark: #86be93;
}

html[data-grind-app-surface="packaged"] {
  --grind-shell-canvas: var(--grind-shell-light-canvas);
  --grind-shell-surface: var(--grind-shell-light-surface);
  --grind-shell-raised: var(--grind-shell-light-raised);
  --grind-shell-soft: var(--grind-shell-light-soft);
  --grind-shell-ink: var(--grind-shell-light-ink);
  --grind-shell-ink-soft: var(--grind-shell-light-ink-soft);
  --grind-shell-ink-muted: var(--grind-shell-light-ink-muted);
  --grind-shell-line: var(--grind-shell-light-line);
  --grind-shell-line-strong: var(--grind-shell-light-line-strong);
  --grind-shell-danger: var(--grind-shell-danger-light);
  --grind-shell-success: var(--grind-shell-success-light);
  color-scheme: light;
  background: var(--grind-shell-canvas);
}

html[data-grind-app-surface="packaged"][data-theme="dark"] {
  --grind-shell-canvas: var(--grind-shell-dark-canvas);
  --grind-shell-surface: var(--grind-shell-dark-surface);
  --grind-shell-raised: var(--grind-shell-dark-raised);
  --grind-shell-soft: var(--grind-shell-dark-soft);
  --grind-shell-ink: var(--grind-shell-dark-ink);
  --grind-shell-ink-soft: var(--grind-shell-dark-ink-soft);
  --grind-shell-ink-muted: var(--grind-shell-dark-ink-muted);
  --grind-shell-line: var(--grind-shell-dark-line);
  --grind-shell-line-strong: var(--grind-shell-dark-line-strong);
  --grind-shell-danger: var(--grind-shell-danger-dark);
  --grind-shell-success: var(--grind-shell-success-dark);
  color-scheme: dark;
}

/* Bridge the established surface token dialects onto one Design Engine
 * decision. The shared sheet is injected last, so a packaged route cannot
 * silently retain a stale per-page dark palette. */
html[data-grind-app-surface="packaged"] {
  --bg: var(--grind-shell-canvas);
  --canvas: var(--grind-shell-canvas);
  --paper: var(--grind-shell-surface);
  --card: var(--grind-shell-surface);
  --surface: var(--grind-shell-surface);
  --surface-raised: var(--grind-shell-raised);
  --surface-soft: var(--grind-shell-soft);
  --stage: var(--grind-shell-canvas);
  --stage2: var(--grind-shell-surface);
  --panel: var(--grind-shell-raised);
  --chip: var(--grind-shell-soft);
  --hook: var(--grind-shell-soft);
  --ink: var(--grind-shell-ink);
  --ink-soft: var(--grind-shell-ink-soft);
  --ink-faint: var(--grind-shell-ink-muted);
  --ink-muted: var(--grind-shell-ink-muted);
  --line: var(--grind-shell-line);
  --line-soft: var(--grind-shell-line);
  --line-strong: var(--grind-shell-line-strong);
  --hair: var(--grind-shell-line);
  --hair2: var(--grind-shell-line-strong);
  --logo-plate: var(--grind-shell-logo-plate);
  --danger: var(--grind-shell-danger);
  --red: var(--grind-shell-danger);
  --success: var(--grind-shell-success);
}

html[data-grind-app-surface="packaged"] body {
  box-sizing: border-box;
  min-width: 0;
  min-height: 100dvh;
  margin: 0;
  padding:
    var(--viewport-inset-top)
    var(--viewport-inset-right)
    var(--viewport-inset-bottom)
    var(--viewport-inset-left);
  background: var(--grind-shell-canvas);
  color: var(--grind-shell-ink);
}

/* The body is the sole page-layout consumer. Existing components keep their
 * ordinary spacing and cannot accidentally apply the device inset twice. */
html[data-grind-app-surface="packaged"] body > * {
  --viewport-inset-top: 0px;
  --viewport-inset-right: 0px;
  --viewport-inset-bottom: 0px;
  --viewport-inset-left: 0px;
}

html[data-grind-app-surface="packaged"] [data-grind-safe-fixed~="top"] {
  --viewport-inset-top: var(--grind-safe-area-top);
}

html[data-grind-app-surface="packaged"] [data-grind-safe-fixed~="right"] {
  --viewport-inset-right: var(--grind-safe-area-right);
}

html[data-grind-app-surface="packaged"] [data-grind-safe-fixed~="bottom"] {
  --viewport-inset-bottom: var(--grind-safe-area-bottom);
}

html[data-grind-app-surface="packaged"] [data-grind-safe-fixed~="left"] {
  --viewport-inset-left: var(--grind-safe-area-left);
}

/* Primary chrome is shared even where older product pages still carry a
 * literal boot colour. These token-only rules are intentionally late in the
 * cascade so light and dark cannot disagree about header ink and paint. */
html[data-grind-app-surface="packaged"] :is(header.site, .review-bar, .topbar) {
  border-color: var(--grind-shell-line);
  background: var(--grind-shell-surface);
  color: var(--grind-shell-ink);
}

html[data-grind-app-surface="packaged"] :is(header.site, .review-bar, .topbar) :is(a, button, span, strong) {
  color: inherit;
}

html[data-grind-app-surface="packaged"][data-theme="dark"] :is(a.brand, .brand-button, .brandline, .fbrand):has(img[data-grind-brand-resolved="true"]) {
  background: none;
}