/* =====================================================================
   AI-LIST — Global typography & text-color normalization
   Load this file LAST (after page CSS) so it wins the cascade.

   3 principles:
     1. Single font: Noto Sans JP for JP / Latin / numbers, with
        tabular-nums so digit columns line up.
     2. Limit weight to Regular 400 / Medium 500 / Semibold 600.
        Heavy weights (700+/bold) are capped at 600 — use size, not
        weight, to build hierarchy.
     3. Body / readable text must meet WCAG AA (>= 4.5:1). Light grays
        below gray-500 are reserved for placeholders and borders only.

   NOTE: This layer intentionally does NOT touch Font Awesome icons,
   monospace / code blocks, or the sender-font preview feature
   (var(--cq-sender-font)). The per-file system-font stacks were already
   normalized to Noto Sans JP via a controlled replacement.
   ===================================================================== */

:root {
    /* ---- Text color scale (contrast ratio on white) ---------------- */
    --text-strong:      #374151; /* gray-700 — body / important   11.7:1 */
    --text-secondary:   #4b5563; /* gray-600 — secondary           7.6:1 */
    --text-muted:       #6b7280; /* gray-500 — note / supporting (min AA) 4.8:1 */
    --text-placeholder: #9ca3af; /* gray-400 — placeholders ONLY          */
    --border-color:     #d1d5db; /* gray-300 — borders / dividers ONLY    */

    /* ---- Font stack ------------------------------------------------- */
    --font-jp: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, 'Segoe UI',
               'Hiragino Kaku Gothic ProN', 'Yu Gothic', Meiryo, sans-serif;
}

/* ---- 1. Font + tabular numbers (inherited by all text) ------------- */
html,
body {
    font-family: var(--font-jp);
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Inputs/buttons don't inherit font by default in some browsers */
button,
input,
select,
textarea {
    font-family: inherit;
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1;
}

/* Icons (Font Awesome / Material) are intentionally NOT touched here.
   Their own stylesheets set the correct icon font-family + weight per
   class (solid/regular/brands), and our html/body font rule does not
   override those element-level declarations. Do NOT add a font-family
   override for .fa* — it breaks the glyphs. */

/* Keep monospace / code and the sender-font preview as-is. */
code, pre, kbd, samp, .monospace, [class*="mono"] {
    font-variant-numeric: normal;
    font-feature-settings: normal;
}

/* ---- 2. Weight ladder: Regular 400 / Medium 500 / Semibold 600 ----- */
body {
    font-weight: 400;
}

/* Bold keyword + common "bold" utility classes are capped at Semibold. */
b, strong,
.fw-bold, .fw-bolder, .fw-semibold,
.font-bold, .font-extrabold, .font-black, .font-semibold,
.font-weight-bold, .font-weight-bolder,
.text-bold {
    font-weight: 600 !important;
}

/* Medium helper for the primary hierarchy level. */
.font-medium, .fw-medium, .font-weight-medium {
    font-weight: 500 !important;
}

/* ---- 3. Text-color tokens (WCAG AA) -------------------------------- */
.text-strong    { color: var(--text-strong)    !important; }
.text-secondary { color: var(--text-secondary) !important; }
.text-muted-aa  { color: var(--text-muted)     !important; } /* min readable */

/* gray-400 is acceptable for placeholders only. */
::placeholder {
    color: var(--text-placeholder) !important;
    opacity: 1; /* Firefox dims placeholders by default */
}

/* ---- Reusable KPI / unit pattern (size-based hierarchy) ------------ */
/* Opt-in helpers: big number, small label, smaller muted unit (件 / 社). */
.kpi-value {
    font-weight: 600;
    line-height: 1.1;
    color: var(--text-strong);
    font-variant-numeric: tabular-nums;
}
.kpi-label {
    font-weight: 500;
    color: var(--text-secondary);
}
.kpi-unit,
.unit {
    font-size: 0.78em;
    font-weight: 500;
    color: var(--text-muted);
    margin-left: 0.15em;
}

/* ---- Tailwind light-gray TEXT utilities -> AA minimum -------------- */
/* gray-400 (#9ca3af, 2.8:1) and lighter are too faint for readable text.
   Bump them to gray-500 (4.8:1). gray-500/600/700 are left untouched
   (already AA). Borders/backgrounds (bg-*, border-*) are NOT affected. */
.text-gray-400, .text-gray-300, .text-gray-200,
.text-slate-400, .text-slate-300,
.text-neutral-400, .text-neutral-300,
.text-zinc-400, .text-zinc-300,
.text-cool-gray-400 {
    color: var(--text-muted) !important;
}