/* cm-type: ONE typography system for every non-landing page of colorme.vn (+ the base surface colours for dark mode).
   Docs: docs/redesign/TYPOGRAPHY.md. Tokens: public/css/cm-tokens.css (loaded first).
   Active only under body.cm-type, which the layout sets on every page except landing pages (<x-eduto::layout :landing="true">).

   Specificity: element rules are written as ":where(.cm-type main) h1", i.e. the weight of a bare "h1".
   They replace Bootstrap/normalize defaults but lose to ANY class rule, so a component that styles itself keeps its look.
   Not touched by the element rules:
     - .cm-ui pages (the redesign system owns its subtree, it consumes the same tokens)
     - landing sections at the top of tool pages (.tl-landing, *-hero ...)
     - anything inside .cm-type-skip (opt-out hook)
     - the header and footer (outside <main>) */

/* ---------- 1. Page defaults (inherited) ---------- */
body.cm-type {
    font-family: var(--cm-font);
    font-size: var(--cm-fs-body);
    font-weight: var(--cm-fw-regular);
    line-height: var(--cm-lh-body);
    color: var(--cm-text);
    background-color: var(--cm-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
/* Form controls do not inherit the font by default */
:where(.cm-type) :where(button, input, select, textarea, optgroup) { font-family: inherit; }

/* ---------- 2. Headings ---------- */
:where(.cm-type main) :is(h1, h2, h3, h4, h5, h6):not(:where(.cm-ui, .cm-type-skip, .tl-landing, .rb-landing, .pc-landing, .pb-landing, .ly-landing, .afl-hero, .lp-hero, .pc-hero, .pb-hero, .sr-hero, .dgl, .sl) *) {
    font-family: var(--cm-font);
    font-weight: var(--cm-fw-heading);
    line-height: var(--cm-lh-heading);
    color: inherit;
    letter-spacing: 0;
    text-transform: none;
    margin-bottom: .5em;
}
:where(.cm-type main) h1:not(:where(.cm-ui, .cm-type-skip, .tl-landing, .rb-landing, .pc-landing, .pb-landing, .ly-landing, .afl-hero, .lp-hero, .pc-hero, .pb-hero, .sr-hero, .dgl, .sl) *),
:where(.cm-type main) .h1:not(:where(.cm-ui, .cm-type-skip) *) { font-size: var(--cm-fs-h1); letter-spacing: var(--cm-ls-tight); }
:where(.cm-type main) h2:not(:where(.cm-ui, .cm-type-skip, .tl-landing, .rb-landing, .pc-landing, .pb-landing, .ly-landing, .afl-hero, .lp-hero, .pc-hero, .pb-hero, .sr-hero, .dgl, .sl) *),
:where(.cm-type main) .h2:not(:where(.cm-ui, .cm-type-skip) *) { font-size: var(--cm-fs-h2); letter-spacing: var(--cm-ls-tight); }
:where(.cm-type main) h3:not(:where(.cm-ui, .cm-type-skip, .tl-landing, .rb-landing, .pc-landing, .pb-landing, .ly-landing, .afl-hero, .lp-hero, .pc-hero, .pb-hero, .sr-hero, .dgl, .sl) *),
:where(.cm-type main) .h3:not(:where(.cm-ui, .cm-type-skip) *) { font-size: var(--cm-fs-h3); }
:where(.cm-type main) :is(h4, h5, h6):not(:where(.cm-ui, .cm-type-skip, .tl-landing, .rb-landing, .pc-landing, .pb-landing, .ly-landing, .afl-hero, .lp-hero, .pc-hero, .pb-hero, .sr-hero, .dgl, .sl) *),
:where(.cm-type main) :is(.h4, .h5, .h6):not(:where(.cm-ui, .cm-type-skip) *) { font-size: var(--cm-fs-h4); }

/* Bootstrap display / lead / fs-* utilities mapped onto the scale (Bootstrap uses !important on .fs-*) */
:where(.cm-type main) :is(.display-1, .display-2, .display-3, .display-4, .display-5, .display-6):not(:where(.cm-ui, .cm-type-skip) *) {
    font-size: var(--cm-fs-display); font-weight: var(--cm-fw-heading); line-height: var(--cm-lh-heading); letter-spacing: var(--cm-ls-tight);
}
:where(.cm-type main) .lead:not(:where(.cm-ui, .cm-type-skip) *) { font-size: var(--cm-fs-body); font-weight: var(--cm-fw-regular); color: var(--cm-text-2); }
:where(.cm-type main) .fs-1:not(:where(.cm-ui, .cm-type-skip) *) { font-size: var(--cm-fs-h1) !important; }
:where(.cm-type main) .fs-2:not(:where(.cm-ui, .cm-type-skip) *) { font-size: var(--cm-fs-h2) !important; }
:where(.cm-type main) .fs-3:not(:where(.cm-ui, .cm-type-skip) *) { font-size: var(--cm-fs-h3) !important; }
:where(.cm-type main) .fs-4:not(:where(.cm-ui, .cm-type-skip) *) { font-size: var(--cm-fs-h4) !important; }
:where(.cm-type main) .fs-5:not(:where(.cm-ui, .cm-type-skip) *) { font-size: var(--cm-fs-body) !important; }
:where(.cm-type main) .fs-6:not(:where(.cm-ui, .cm-type-skip) *) { font-size: var(--cm-fs-body-sm) !important; }

/* ---------- 3. Text ---------- */
/* p inherits size/colour from its container (no size here, so .small / card text keep working) */
:where(.cm-type main) p { margin-bottom: 1em; }
:where(.cm-type main) :is(small, .small):not(:where(.cm-ui, .cm-type-skip, .tl-landing, .rb-landing, .pc-landing, .pb-landing, .ly-landing, .afl-hero, .lp-hero, .pc-hero, .pb-hero, .sr-hero, .dgl, .sl) *) {
    font-size: var(--cm-fs-body-sm); line-height: var(--cm-lh-ui);
}
:where(.cm-type main) :is(b, strong) { font-weight: var(--cm-fw-semibold); }
:where(.cm-type main) :is(code, kbd, pre, samp) { font-family: var(--cm-font-mono); font-size: .9em; }
/* Links inherit their colour (app.css); links inside running text are underlined, never coloured by default */
:where(.cm-type main) a { color: inherit; }

/* Weight utilities: the system has 400 / 500 / 600 only */
:where(.cm-type main) :is(.fw-bold, .fw-bolder):not(:where(.cm-ui, .cm-type-skip, .tl-landing, .rb-landing, .pc-landing, .pb-landing, .ly-landing, .afl-hero, .lp-hero, .pc-hero, .pb-hero, .sr-hero, .dgl, .sl) *) { font-weight: var(--cm-fw-semibold) !important; }
:where(.cm-type main) .fw-light:not(:where(.cm-ui, .cm-type-skip) *) { font-weight: var(--cm-fw-regular) !important; }
/* No uppercase micro-labels on non-landing pages */
:where(.cm-type main) .text-uppercase:not(:where(.cm-ui, .cm-type-skip, .tl-landing, .rb-landing, .pc-landing, .pb-landing, .ly-landing, .afl-hero, .lp-hero, .pc-hero, .pb-hero, .sr-hero, .dgl, .sl) *) { text-transform: none !important; letter-spacing: 0 !important; }

/* Text colour utilities -> tokens (also what makes them work in dark mode) */
:where(.cm-type main, .cm-type .modal) :is(.text-dark, .text-body, .text-black) { color: var(--cm-text) !important; }
:where(.cm-type main, .cm-type .modal) :is(.text-muted, .text-secondary) { color: var(--cm-muted) !important; }
:where(.cm-type main, .cm-type .modal) .text-danger { color: var(--cm-danger) !important; }
:where(.cm-type main, .cm-type .modal) .text-success { color: var(--cm-success) !important; }
:where(.cm-type main, .cm-type .modal) .text-warning { color: var(--cm-warning) !important; }

/* ---------- 4. UI text: buttons, forms, labels ---------- */
:where(.cm-type main) .btn:not(:where(.cm-ui, .cm-type-skip) *) {
    font-family: var(--cm-font);
    font-size: var(--cm-fs-body-sm);
    font-weight: var(--cm-fw-medium);
    line-height: var(--cm-lh-ui);
    letter-spacing: 0;
    text-transform: none;
}
:where(.cm-type main) :is(.btn-lg):not(:where(.cm-ui, .cm-type-skip) *) { font-size: var(--cm-fs-body); }
:where(.cm-type main) :is(.btn-sm):not(:where(.cm-ui, .cm-type-skip) *) { font-size: var(--cm-fs-caption); }
:where(.cm-type main) button:not(:where(.cm-ui, .cm-type-skip) *) { font-weight: var(--cm-fw-medium); }

:where(.cm-type main) :is(input, select, textarea, .form-control, .form-select):not(:where(.cm-ui, .cm-type-skip) *) {
    font-family: var(--cm-font);
    font-weight: var(--cm-fw-regular);
}
/* 16px in fields on phones: iOS zooms into anything smaller */
:where(.cm-type main) :is(.form-control, .form-select):not(:where(.cm-ui, .cm-type-skip) *) { font-size: var(--cm-fs-body); line-height: var(--cm-lh-ui); }
@media (min-width: 768px) {
    :where(.cm-type main) :is(.form-control, .form-select):not(:where(.cm-ui, .cm-type-skip) *) { font-size: var(--cm-fs-body-sm); }
}
:where(.cm-type main) :is(.form-control-lg):not(:where(.cm-ui, .cm-type-skip) *) { font-size: var(--cm-fs-body); }
:where(.cm-type main) :is(label, .form-label, legend):not(:where(.cm-ui, .cm-type-skip, .tl-landing, .rb-landing, .pc-landing, .pb-landing, .ly-landing, .afl-hero, .lp-hero, .pc-hero, .pb-hero, .sr-hero, .dgl, .sl) *) {
    font-weight: var(--cm-fw-medium);
    line-height: var(--cm-lh-ui);
}
:where(.cm-type main) .form-label:not(:where(.cm-ui, .cm-type-skip) *) { font-size: var(--cm-fs-body-sm); color: var(--cm-text-2); }
:where(.cm-type main) .form-text:not(:where(.cm-ui, .cm-type-skip) *) { font-size: var(--cm-fs-caption); color: var(--cm-muted); }
:where(.cm-type main) ::placeholder { color: var(--cm-faint); opacity: 1; }

/* ---------- 5. Tables, badges ---------- */
:where(.cm-type main) table:not(:where(.cm-ui, .cm-type-skip) *) { font-size: var(--cm-fs-body-sm); line-height: var(--cm-lh-ui); }
:where(.cm-type main) th:not(:where(.cm-ui, .cm-type-skip) *) { font-weight: var(--cm-fw-semibold); color: var(--cm-text-2); text-transform: none; letter-spacing: 0; }
:where(.cm-type main) .badge:not(:where(.cm-ui, .cm-type-skip) *) {
    font-size: var(--cm-fs-caption);
    font-weight: var(--cm-fw-medium);
    line-height: var(--cm-lh-ui);
    letter-spacing: 0;
    text-transform: none;
}

/* ---------- 6. Bootstrap surfaces -> tokens (light values ~unchanged; makes them follow dark mode).
   Also applies inside Bootstrap modals, which sit outside <main> (login modal, upload modal, popups). ---------- */
:where(.cm-type main, .cm-type .modal) .bg-white { background-color: var(--cm-surface) !important; }
:where(.cm-type main, .cm-type .modal) .bg-light { background-color: var(--cm-surface-2) !important; }
:where(.cm-type main, .cm-type .modal) :is(.border, .border-top, .border-bottom, .border-start, .border-end) { border-color: var(--cm-line) !important; }
:where(.cm-type main, .cm-type .modal) :is(.card, .list-group-item, .accordion-item, .toast) { background-color: var(--cm-surface); border-color: var(--cm-line); color: inherit; }
:where(.cm-type main, .cm-type .modal) :is(.modal-content, .dropdown-menu, .popover, .offcanvas) { background-color: var(--cm-elevated); color: var(--cm-text); border-color: var(--cm-line); }
:where(.cm-type main, .cm-type .modal) .dropdown-item { color: var(--cm-text); }
:where(.cm-type main, .cm-type .modal) :is(.dropdown-item:hover, .dropdown-item:focus) { background-color: var(--cm-surface-2); color: var(--cm-text); }
:where(.cm-type main, .cm-type .modal) :is(.modal-header, .modal-footer) { border-color: var(--cm-line); }
:where(.cm-type main, .cm-type .modal) :is(.form-control, .form-select) { background-color: var(--cm-surface); color: var(--cm-text); border-color: var(--cm-line-2); }
:where(.cm-type main, .cm-type .modal) :is(.form-control, .form-select):focus { border-color: var(--cm-focus-color); box-shadow: var(--cm-focus); }
:where(.cm-type main, .cm-type .modal) :is(.form-control:disabled, .form-control[readonly]) { background-color: var(--cm-surface-2); }
:where(.cm-type main, .cm-type .modal) .table { --bs-table-bg: transparent; --bs-table-striped-bg: var(--cm-bg-subtle); --bs-table-hover-bg: var(--cm-surface-2); color: var(--cm-text); border-color: var(--cm-line); }
:where(.cm-type main, .cm-type .modal) .modal-backdrop.show { background-color: var(--cm-overlay); opacity: 1; }
:where(.cm-type main, .cm-type .modal) hr { border-color: var(--cm-line); opacity: 1; }
:where(.cm-type main, .cm-type .modal) :is(.placeholder, .skeleton) { background-color: var(--cm-skeleton); }
/* Images and video are never inverted or dimmed in dark mode; the logo stays the original red square */
:root[data-theme="dark"] :where(.cm-type main, .cm-type .modal) .btn-close { filter: invert(1) grayscale(1) brightness(2); }
/* Dark mode is opt-in only (data-theme="dark"); no OS-following twin */

/* ---------- 7. Helpers ---------- */
/* One display title per page (hero of a non-landing page) */
:where(.cm-type main) .cm-display { font-size: var(--cm-fs-display); font-weight: var(--cm-fw-heading); line-height: var(--cm-lh-heading); letter-spacing: var(--cm-ls-tight); }
/* Legacy font override classes: the site has one font */
:where(.cm-type main) :is(.f-roboto, .font-roboto, .f-arial) { font-family: var(--cm-font); }

/* ---------- 8. Page height ---------- */
/* Owner rule: the first screen of a non-landing page is all page, never the footer.
   main fills at least the viewport under the sticky header (64px desktop, 56px mobile). */
body.cm-type > main, body.cm-type main:first-of-type { min-height: calc(100vh - 64px); min-height: calc(100svh - 64px); }
@media (max-width: 991.98px) { body.cm-type > main, body.cm-type main:first-of-type { min-height: calc(100svh - 56px); } }