﻿/* =========================================================
   LIFTRIX Shared Typography
   全画面共通フォント・文字サイズ・行間
========================================================= */

:root{
  /* Font Family */
  --liftrix-font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  /* Text Sizes */
  --liftrix-text-xxs: 10px;
  --liftrix-text-xs: 11px;
  --liftrix-text-sm: 12px;
  --liftrix-text-md: 13px;
  --liftrix-text-base: 14px;
  --liftrix-text-lg: 16px;
  --liftrix-text-xl: 18px;

  /* Title Sizes */
  --liftrix-title-xs: 15px;
  --liftrix-title-sm: 18px;
  --liftrix-title-md: 22px;
  --liftrix-title-lg: 26px;
  --liftrix-title-xl: 32px;

  /* Font Weights */
  --liftrix-weight-normal: 500;
  --liftrix-weight-medium: 650;
  --liftrix-weight-bold: 800;
  --liftrix-weight-heavy: 950;

  /* Line Heights */
  --liftrix-line-tight: 1.1;
  --liftrix-line-title: 1.2;
  --liftrix-line-body: 1.5;
  --liftrix-line-relaxed: 1.7;

  /* Letter Spacing */
  --liftrix-letter-tight: -0.04em;
  --liftrix-letter-title: -0.02em;
  --liftrix-letter-normal: 0;
}

/* =========================================================
   Base Typography
========================================================= */

body{
  font-family: var(--liftrix-font-family);
  font-size: var(--liftrix-text-base);
  line-height: var(--liftrix-line-body);
}

/* =========================================================
   Shared Title Classes
   新規画面ではこのクラスを使う
========================================================= */

.liftrixPageTitle{
  margin: 0;
  color: #F7FBFF;
  font-size: var(--liftrix-title-lg);
  font-weight: var(--liftrix-weight-heavy);
  line-height: var(--liftrix-line-tight);
  letter-spacing: var(--liftrix-letter-tight);
}

.liftrixSectionTitle{
  margin: 0;
  color: #F7FBFF;
  font-size: var(--liftrix-title-xs);
  font-weight: var(--liftrix-weight-heavy);
  line-height: var(--liftrix-line-title);
  letter-spacing: var(--liftrix-letter-title);
}

.liftrixCardTitle{
  margin: 0;
  color: #F7FBFF;
  font-size: var(--liftrix-title-xs);
  font-weight: var(--liftrix-weight-heavy);
  line-height: var(--liftrix-line-title);
  letter-spacing: var(--liftrix-letter-title);
}

.liftrixLeadText{
  margin: 6px 0 0;
  color: rgba(221,233,255,0.64);
  font-size: var(--liftrix-text-sm);
  font-weight: var(--liftrix-weight-bold);
  line-height: var(--liftrix-line-body);
}

.liftrixMutedText{
  color: rgba(221,233,255,0.50);
  font-size: var(--liftrix-text-xs);
  font-weight: var(--liftrix-weight-bold);
  line-height: var(--liftrix-line-body);
}

/* =========================================================
   Existing Title Compatibility
   既存画面の見出しを安全に少しだけ統一
========================================================= */

.planCreateTitle,
.adminPageTitle,
.dashboardTitle,
.clientPageTitle,
.pageTitle,
.goalPageTitle,
.reportPageTitle{
  font-family: var(--liftrix-font-family);
  font-weight: var(--liftrix-weight-heavy);
  letter-spacing: var(--liftrix-letter-tight);
}

.planCreateLead,
.adminPageLead,
.dashboardLead,
.clientPageLead,
.pageLead,
.goalPageLead,
.reportPageLead{
  font-family: var(--liftrix-font-family);
  font-weight: var(--liftrix-weight-bold);
  line-height: var(--liftrix-line-body);
}

.stepTitle,
.previewTitle,
.cardTitle,
.sectionTitle,
.metricTitle,
.summaryTitle,
.goalTitle,
.reportSectionTitle{
  font-family: var(--liftrix-font-family);
  font-weight: var(--liftrix-weight-heavy);
  letter-spacing: var(--liftrix-letter-title);
}

.fieldLabel,
.summaryLabel,
.saveTargetLabel,
.miniStat,
.clientRow__id,
.previewSub,
.previewExerciseMeta,
.uploadHint{
  font-family: var(--liftrix-font-family);
  font-weight: var(--liftrix-weight-bold);
}

/* =========================================================
   Form Text
========================================================= */

input,
select,
textarea,
button{
  font-family: var(--liftrix-font-family);
}

/* =========================================================
   Mobile Typography Safety
========================================================= */

@media (max-width: 760px){
  .liftrixPageTitle{
    font-size: var(--liftrix-title-md);
  }

  .liftrixSectionTitle,
  .liftrixCardTitle{
    font-size: var(--liftrix-title-xs);
  }
}

/* =========================================================
   Legacy Typography Compatibility
   app_ui.css から移管
========================================================= */

.h1{
  font-size:22px;
  font-weight:var(--font-weight-title);
  line-height:1.2;
  color:var(--text-main);
}

.h2{
  font-size:18px;
  font-weight:700;
  line-height:1.3;
  color:var(--text-main);
}

.h3{
  font-size:15px;
  font-weight:700;
  line-height:1.35;
  color:var(--text-main);
}

.bodyText{
  font-size:13px;
  line-height:1.55;
  color:var(--text-soft);
}

.captionText{
  font-size:12px;
  line-height:1.45;
  color:var(--muted);
}

.muted{
  color:var(--muted);
}

.emptyNote{
  color:var(--muted);
  font-size:13px;
  line-height:1.5;
}
