@layer km-base, km-priority;

@layer km-base {
  :root {
    --km-color-page: #F4F6F8;
    --km-color-card: #FFFFFF;
    --km-color-on-strong: #FFFFFF;
    --km-color-card-translucent: rgba(255,255,255,.80);
    --km-color-overlay-soft: rgba(0,0,0,.28);
    --km-color-overlay-strong: rgba(0,0,0,.38);
    --km-color-focus-outline: rgba(53,80,95,.18);
    --km-color-focus-outline-strong: rgba(53,80,95,.28);
    --km-color-bg-soft: #F7F9FA;
    --km-color-bg-blue-soft: #F4F8FA;
    --km-color-primary: #C7DCE5;
    --km-color-primary-hover: #B8D1DC;
    --km-color-accent: #35505F;
    --km-color-title: #2F3A40;
    --km-color-body: #3E484D;
    --km-color-muted: #66737A;
    --km-color-border: #DCE4E9;
    --km-color-state-green: #4CAF50;
    --km-color-state-yellow: #F4C430;
    --km-color-state-red: #E53935;
    --km-color-danger: #A84545;
    --km-color-success-text: #356044;
    --km-color-warning-text: #806600;
    --km-color-danger-soft: #FFF5F4;
    --km-color-state-green-soft: #F3FAF4;
    --km-color-state-green-border: #A9D8AE;
    --km-color-state-yellow-soft: #FFFBEA;
    --km-color-state-yellow-border: #E7D27A;
    --km-color-state-red-soft: #FFF4F3;
    --km-color-state-red-border: #E9AAA7;
    --km-color-value-track: #EEF4F6;
    --km-color-chart-accent: #8FAFBE;
    --km-color-chart-sub: #9AA8AE;
    --state-green: var(--km-color-state-green);
    --state-green-soft: var(--km-color-state-green-soft);
    --state-green-border: var(--km-color-state-green-border);
    --state-yellow: var(--km-color-state-yellow);
    --state-yellow-soft: var(--km-color-state-yellow-soft);
    --state-yellow-border: var(--km-color-state-yellow-border);
    --state-orange: var(--km-color-state-red);
    --state-orange-soft: var(--km-color-state-red-soft);
    --state-orange-border: var(--km-color-state-red-border);
    --km-value-bar: var(--km-color-primary);
    --km-value-track: var(--km-color-value-track);
    --km-bg: var(--km-color-page);
    --km-card: var(--km-color-card);
    --km-soft: var(--km-color-bg-soft);
    --km-blue-soft: var(--km-color-bg-blue-soft);
    --km-blue-soft-strong: var(--km-color-bg-blue-soft);
    --km-chart: var(--km-color-body);
    /* Core typography: one token per semantic role. */
    --km-font-meta: 12px;
    --km-font-body: 16px;
    --km-font-section: 18px;
    --km-font-page: 22px;

    /* Typography weight scale: only these three weights are used in the UI. */
    --km-weight-regular: 400;
    --km-weight-medium: 500;
    --km-weight-semibold: 600;

    /* Core spacing: all ordinary layout spacing uses these four values. */
    --km-space-xs: 4px;
    --km-space-sm: 8px;
    --km-space-md: 12px;
    --km-space-lg: 24px;

    /* Recent-condition history layout: single source shared by Web and PDF. */
    --km-history-date-width: 92px;
    --km-history-date-width-mobile: 86px;
    --km-history-date-to-content-gap: var(--km-space-xs);
    --km-history-score-width: 18px;
    --km-history-face-size: var(--km-face-sm);
    --km-history-percent-width: 40px;
    --km-history-separator-width: 10px;
    --km-history-metric-gap: var(--km-space-xs);
    --km-history-grid-gap: var(--km-space-sm);

    --km-page-title-top: var(--km-space-md);
    --km-page-title-side: var(--km-space-xs);
    --km-page-title-bottom: 0;
    --km-app-max-width: 900px;
    --km-bottom-nav-height: 64px;
    --km-layout-bottom-content-gap: var(--km-space-md);
    --km-layout-bottom-nav-reserve: calc(var(--km-bottom-nav-height) + env(safe-area-inset-bottom,0px) + var(--km-layout-bottom-content-gap));
    --km-layout-password-action-reserve: 66px;
    --km-layout-inquiry-action-reserve: 44px;
    --km-control-height: 44px;
    --km-control-min-height: var(--km-control-height);
    --km-action-padding-y: var(--km-space-sm);
    --km-action-padding-x: var(--km-space-md);
    --km-control-compact-height: 36px;
    --km-control-date-height: var(--km-control-height);
    --km-icon-control-size: 40px;
    --km-action-side-width: 56px;
    --km-calendar-cell-min-height: 58px;
    --km-calendar-cell-mobile-min-height: 52px;
    --km-textarea-min-height: 80px;
    --km-inquiry-message-height: 150px;
    --km-control-inline-action-min-width: 46px;
    --km-date-input-width: 156px;
    --km-date-input-width-mobile: 148px;
    --km-record-nav-size: 36px;
    --km-dialog-width-medium: 520px;
    --km-dialog-width-large: 760px;
    --km-dialog-width-wide: 840px;
    --km-radius-control: 10px;
    --km-radius-card: 16px;
    --km-radius-pill: 999px;
    --km-radius-circle: 50%;
    --km-face-lg: 92px;
    --km-face-md: 36px;
    --km-face-sm: 28px;
    --km-face-history-mobile: 24px;
    --km-focus-ring: 0 0 0 2px rgba(199,220,229,.46);
    --km-shadow-card: 0 2px 8px rgba(50,70,85,.035);
    --km-shadow-dialog: 0 18px 55px rgba(0,0,0,.20);
    --km-shadow-popover: 0 16px 44px rgba(0,0,0,.18);
    --km-shadow-float: 0 8px 30px rgba(0,0,0,.08);
    --km-shadow-soft: 0 5px 18px rgba(0,0,0,.10);
    --km-shadow-nav: 0 -2px 12px rgba(55,70,82,.04);
    --km-shadow-elevated: 0 12px 34px rgba(33,50,62,.14);
    --km-shadow-medium: 0 8px 22px rgba(47,58,64,.10);
  }
}