/* Global semantic styles.
   Single source of truth for the visual styles an editor can pick per text
   (decoupled from the HTML tag). Defined once here and applied across every
   section/component, so choosing "h1" looks the same everywhere.

   Cascade layers (no !important):
     - Component base appearance lives in @layer base.
     - These global styles live in @layer semantic, declared AFTER base, so they
       win over base regardless of selector specificity.
     - A component that wants to customize a semantic style writes an UNLAYERED
       rule (e.g. .basic_section .aldaba-h1 { ... } outside any @layer); unlayered
       rules beat every layer, so the component's intent always wins.

   The "aldaba-" prefix avoids collisions with Bootstrap's .h1-.h6 utilities. */

@layer semantic {
    p {
        line-height: 1.25;
    }

    .aldaba-h1 {
        font-size: 60px;
        font-weight: 500;
    }

    .aldaba-h2 {
        font-size: 48px;
        font-weight: 500;
    }

    .aldaba-h3 {
        font-size: 36px;
        font-weight: 500;
    }

    .aldaba-h4 {
        font-size: 30px;
        font-weight: 500;
    }

    .aldaba-h5 {
        font-size: 24px;
        font-weight: 500;
    }

    .aldaba-h6 {
        font-size: 20px;
        font-weight: 500;
    }

    .aldaba-body {
        font-size: 18px;
        font-weight: 400;
    }
}