@charset "utf-8";

/* Shared mobile layout primitives. Components consume these through scoped aliases. */
:root {
  --mobile-ui-brand: var(--sys-color-brand, #0095de);
  --mobile-ui-brand-text: var(--sys-color-brand-text, #0077b8);
  --mobile-ui-action-primary: var(--sys-color-action, #0077b8);
  --mobile-ui-action-pressed: var(--sys-color-pressed, #043b8b);
  --mobile-ui-on-action: var(--sys-color-on-action, #fff);
  --mobile-ui-space-xs: 0.25rem;
  --mobile-ui-space-sm: 0.5rem;
  --mobile-ui-space-md: 0.75rem;
  --mobile-ui-space-lg: 1rem;
  --mobile-ui-space-xl: 1.25rem;
  --mobile-ui-space-2xl: 1.5rem;
  --mobile-ui-page-gutter: 1rem;
  --mobile-ui-page-gutter-compact: 1rem;
  --mobile-ui-layout-gutter: var(--mobile-ui-page-gutter);
  --mobile-ui-section-gap: var(--mobile-ui-space-lg);
  --mobile-ui-surface-gap: var(--mobile-ui-space-md);
  --mobile-ui-card-padding: var(--mobile-ui-space-md);
  --mobile-ui-feature-padding: var(--mobile-ui-space-lg);
  --mobile-ui-item-gap: var(--mobile-ui-space-sm);
  --mobile-ui-dense-gap: var(--mobile-ui-space-xs);
  --mobile-ui-major-gap: var(--mobile-ui-space-2xl);
  --mobile-ui-control-md: 2.75rem;
  --mobile-ui-control-lg: 3rem;
  --mobile-ui-radius-sm: 0.5rem;
  --mobile-ui-radius-md: 0.75rem;
  --mobile-ui-radius-lg: 1rem;
  /* Semantic mobile type roles. rem follows the root scale; em is reserved for
     glyphs and spacing that must grow with their owning text role. */
  --mobile-ui-type-feature-title-size: 1.5rem;
  --mobile-ui-type-page-title-size: 1.25rem;
  --mobile-ui-type-list-page-title-size: 1.125rem;
  --mobile-ui-type-detail-title-size: 1.25rem;
  --mobile-ui-type-section-title-size: 1.125rem;
  --mobile-ui-type-component-title-size: 1rem;
  --mobile-ui-type-card-title-size: 0.9375rem;
  --mobile-ui-type-label-size: 0.875rem;
  --mobile-ui-type-support-size: 0.8125rem;
  --mobile-ui-type-primary-action-size: 1rem;
  --mobile-ui-type-secondary-action-size: 0.875rem;
  --mobile-ui-type-price-size: 1.375rem;
  --mobile-ui-type-numeric-display-size: 1.875rem;
  --mobile-ui-type-weight-regular: 400;
  --mobile-ui-type-weight-medium: 500;
  --mobile-ui-type-weight-semibold: 600;
  --mobile-ui-type-weight-bold: 700;
  --mobile-ui-type-weight-emphasis: 800;
  --mobile-ui-type-page-title-weight: 700;
  --mobile-ui-type-list-title-size: 0.875rem;
  --mobile-ui-type-list-title-weight: 600;
  --mobile-ui-type-body-size: 0.9375rem;
  --mobile-ui-type-body-weight: 400;
  --mobile-ui-type-description-size: 0.875rem;
  --mobile-ui-type-meta-size: 0.75rem;
  --mobile-ui-type-meta-weight: var(--mobile-ui-type-weight-medium);
  --mobile-ui-type-action-size: 0.8125rem;
  --mobile-ui-type-action-weight: var(--mobile-ui-type-weight-semibold);
  --mobile-ui-type-line-tight: 1.2;
  --mobile-ui-type-line-control: 1.25;
  --mobile-ui-type-line-card: 1.35;
  --mobile-ui-type-line-compact: 1.4;
  --mobile-ui-type-line-body: 1.6;
  --mobile-ui-type-line-reading: 1.7;
  --mobile-ui-type-title-line: var(--mobile-ui-type-line-compact);
  --mobile-ui-type-list-line: 1.5;
  --mobile-ui-type-body-line: 1.7;
  --mobile-ui-type-description-line: var(--mobile-ui-type-line-body);
  --mobile-ui-type-meta-line: var(--mobile-ui-type-line-compact);

  /* board.php?bo_table=... semantic roles.
     Keep these aliases aligned with docs/legacy-www/references/board-typography-spacing-system.md. */
  --board-ui-layout-gutter: var(--mobile-ui-layout-gutter);
  --board-ui-section-gap: var(--mobile-ui-section-gap);
  --board-ui-surface-gap: var(--mobile-ui-surface-gap);
  --board-ui-card-padding: var(--mobile-ui-card-padding);
  --board-ui-feature-padding: var(--mobile-ui-feature-padding);
  --board-ui-item-gap: var(--mobile-ui-item-gap);
  --board-ui-dense-gap: var(--mobile-ui-dense-gap);
  --board-ui-major-gap: var(--mobile-ui-major-gap);
  --board-ui-page-end-space: 2rem;
  --board-ui-type-list-page-title-size: var(--mobile-ui-type-list-page-title-size);
  --board-ui-type-detail-title-size: var(--mobile-ui-type-detail-title-size);
  --board-ui-type-page-title-weight: var(--mobile-ui-type-page-title-weight);
  --board-ui-type-list-title-size: var(--mobile-ui-type-list-title-size);
  --board-ui-type-list-title-weight: var(--mobile-ui-type-list-title-weight);
  --board-ui-type-card-title-size: var(--mobile-ui-type-list-title-size);
  --board-ui-type-card-title-weight: var(--mobile-ui-type-list-title-weight);
  --board-ui-type-body-size: var(--mobile-ui-type-body-size);
  --board-ui-type-body-weight: var(--mobile-ui-type-body-weight);
  --board-ui-type-description-size: var(--mobile-ui-type-description-size);
  --board-ui-type-meta-size: var(--mobile-ui-type-meta-size);
  --board-ui-type-meta-weight: var(--mobile-ui-type-meta-weight);
  --board-ui-type-action-size: var(--mobile-ui-type-action-size);
  --board-ui-type-action-weight: var(--mobile-ui-type-action-weight);
  --board-ui-type-title-line: var(--mobile-ui-type-title-line);
  --board-ui-type-list-line: var(--mobile-ui-type-list-line);
  --board-ui-type-body-line: var(--mobile-ui-type-body-line);
  --board-ui-type-description-line: var(--mobile-ui-type-description-line);
  --board-ui-type-meta-line: var(--mobile-ui-type-meta-line);
}