/*
 * MIMLAB mobile design tokens
 * Canonical values for public mobile interfaces.
 *
 * Rules:
 * - Consume these variables inside mobile selectors.
 * - Do not redefine them in page-specific stylesheets.
 * - Update DESIGN.md and /design-system with every token change.
 */

:root {
  /* Typography */
  --mobile-font-family: 'Pretendard', -apple-system, BlinkMacSystemFont,
    'Segoe UI', sans-serif;

  --mobile-type-brand-size: 1.35rem;
  --mobile-type-brand-weight: 750;
  --mobile-type-brand-line-height: 1;
  --mobile-type-brand-tracking: -0.035em;

  --mobile-type-display-size: clamp(2.35rem, 12vw, 3.25rem);
  --mobile-type-display-weight: 750;
  --mobile-type-display-line-height: 0.98;
  --mobile-type-display-tracking: -0.055em;

  --mobile-detail-title-size: 2rem;
  --mobile-detail-title-weight: 750;
  --mobile-detail-title-line-height: 1.08;
  --mobile-detail-title-tracking: -0.035em;

  --mobile-type-panel-title-size: 1.65rem;
  --mobile-type-panel-title-weight: 700;
  --mobile-type-panel-title-line-height: 1.1;
  --mobile-type-panel-title-tracking: -0.025em;

  --mobile-type-document-title-size: 1.3rem;
  --mobile-type-document-title-weight: 700;
  --mobile-type-document-title-line-height: 1.35;
  --mobile-type-document-title-tracking: -0.025em;

  --mobile-type-section-size: 1.25rem;
  --mobile-type-section-weight: 650;
  --mobile-type-section-line-height: 1.45;
  --mobile-type-section-tracking: -0.025em;

  --mobile-type-item-emphasis-size: 1.05rem;
  --mobile-type-item-emphasis-weight: 700;
  --mobile-type-item-emphasis-line-height: 1.4;
  --mobile-type-item-emphasis-tracking: -0.025em;

  --mobile-type-item-size: 1rem;
  --mobile-type-item-weight: 650;
  --mobile-type-item-line-height: 1.45;
  --mobile-type-item-tracking: -0.02em;
  --mobile-type-item-compact-line-height: 1.4;

  --mobile-type-body-size: 1rem;
  --mobile-type-body-weight: 400;
  --mobile-type-body-line-height: 1.65;

  --mobile-type-support-size: 0.9rem;
  --mobile-type-support-weight: 400;
  --mobile-type-support-line-height: 1.6;
  --mobile-type-list-line-height: 1.55;

  --mobile-type-secondary-size: 0.94rem;
  --mobile-type-secondary-weight: 500;
  --mobile-type-secondary-line-height: 1.6;

  --mobile-type-meta-size: 0.84rem;
  --mobile-type-meta-weight: 400;
  --mobile-type-meta-line-height: 1.5;

  --mobile-type-control-size: 0.82rem;
  --mobile-type-control-weight: 700;
  --mobile-type-control-line-height: 1.2;

  --mobile-type-label-size: 0.78rem;
  --mobile-type-label-weight: 700;
  --mobile-type-label-line-height: 1.2;

  --mobile-type-micro-size: 0.68rem;
  --mobile-type-micro-weight: 700;
  --mobile-type-micro-line-height: 1.2;

  /* Colour */
  --mobile-red: #dc2626;
  --mobile-ink: #272424;
  --mobile-muted: #6f6969;
  --mobile-line: rgba(84, 73, 73, 0.14);
  --mobile-surface: #fbfaf9;
  --mobile-red-tint: rgba(220, 38, 38, 0.08);
  --mobile-scrim: rgba(39, 36, 36, 0.35);

  /* Spacing: 4px base scale */
  --mobile-space-xs: 4px;
  --mobile-space-sm: 8px;
  --mobile-space-md: 12px;
  --mobile-space-lg: 16px;
  --mobile-space-xl: 24px;
  --mobile-space-2xl: 32px;
  --mobile-space-3xl: 48px;
  --mobile-space-4xl: 64px;
  --mobile-space-5xl: 96px;

  /* Layout and sizing */
  --mobile-header-height: calc(64px + env(safe-area-inset-top, 0px));
  --mobile-context-nav-height: 48px;
  --mobile-page-gutter: clamp(20px, 6vw, 28px);
  --mobile-content-measure: 30rem;
  --mobile-touch-target: 44px;
  --mobile-control-height: 48px;
  --mobile-menu-row-height: 56px;
  --mobile-menu-nested-row-height: 48px;

  /* Shape and structure */
  --mobile-border-width: 1px;
  --mobile-radius-sm: 4px;
  --mobile-radius-md: 8px;
  --mobile-radius-card: 10px;
  --mobile-radius-sheet: 20px;
  --mobile-radius-pill: 999px;

  /* Motion */
  --mobile-motion-fast: 160ms;
  --mobile-motion-page: 260ms;
  --mobile-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}