/* H5 shared visual contract. Use these tokens for all new H5 pages and menus. */
:root {
  color-scheme: light;

  /* Color roles */
  --h5-color-page: #f7f6f1;
  --h5-color-surface: #fffefa;
  --h5-color-surface-soft: #f4f4ed;
  --h5-color-surface-muted: #e8ebe2;
  --h5-color-border: #e8e7df;
  --h5-color-border-strong: #bec6bc;
  --h5-color-text: #24302b;
  --h5-color-text-muted: #7e8982;
  --h5-color-text-soft: #929b92;
  --h5-color-text-inverse: #ffffff;
  --h5-color-brand: #285b49;
  --h5-color-brand-strong: #1c4235;
  --h5-color-brand-soft: #dfe9dc;
  --h5-color-accent: #b9794d;
  --h5-color-danger: #be694e;
  --h5-color-success-soft: #e2eee1;
  --h5-color-white: #ffffff;
  --h5-color-black: #000000;
  --h5-color-brand-rgb: 40, 91, 73;

  /* Spacing scale, 4px base */
  --h5-space-1: 4px;
  --h5-space-2: 8px;
  --h5-space-3: 12px;
  --h5-space-4: 16px;
  --h5-space-5: 20px;
  --h5-space-6: 24px;
  --h5-space-8: 32px;
  --h5-space-10: 40px;
  --h5-space-12: 48px;

  /* Shape and elevation */
  --h5-radius-xs: 2px;
  --h5-radius-sm: 4px;
  --h5-radius-md: 6px;
  --h5-radius-lg: 12px;
  --h5-radius-pill: 999px;
  --h5-shadow-card: 0 16px 45px rgba(35, 48, 42, .10);
  --h5-shadow-modal: 0 25px 90px rgba(16, 28, 21, .28);
  --h5-shadow-drawer: -18px 0 50px rgba(20, 32, 25, .14);

  /* Typography and controls */
  --h5-font-family: 'DM Sans', 'Noto Serif SC', sans-serif;
  --h5-font-family-display: 'Noto Serif SC', serif;
  --h5-font-size-xs: 9px;
  --h5-font-size-sm: 11px;
  --h5-font-size-md: 13px;
  --h5-font-size-lg: 17px;
  --h5-control-height: 42px;
  --h5-icon-button-size: 44px;
  --h5-control-height-compact: 36px;

  font-family: var(--h5-font-family);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

/* Shared primitives for future H5 pages and menus. */
.h5-surface { background: var(--h5-color-surface); border: 1px solid var(--h5-color-border); border-radius: var(--h5-radius-sm); }
.h5-control { min-height: var(--h5-control-height); color: var(--h5-color-text); background: var(--h5-color-surface); border: 1px solid var(--h5-color-border); border-radius: var(--h5-radius-sm); font: inherit; }
.h5-button { min-height: var(--h5-control-height); padding: 0 var(--h5-space-4); border: 0; border-radius: var(--h5-radius-sm); font: inherit; cursor: pointer; }
.h5-button--primary { color: var(--h5-color-text-inverse); background: var(--h5-color-brand); }
.h5-button--primary:hover { background: var(--h5-color-brand-strong); }