/* Wrapped in @layer overrides — 2026-08-18, CSS @layer restructuring (Basecamp "Fra Fizzy-gjennomgang: CSS-arkitektur"). See sand_ui/__sand_ui.css for the layer order. */
@layer overrides {
:root {
    --font-serif: "PT Serif", Georgia, serif;
    --font-sans: Verdana, Helvetica, sans-serif;
    --font-mono: monospace;

    --font-size-xs: 0.625rem;
    --font-size-sm: 0.6875rem;
    --font-size-base: 0.8125rem;
    --font-size-md: 0.875rem;
    --font-size-lg: 1rem;
    --font-size-xl: 1.25rem;
    --font-size-xxl: 1.5rem;
    --font-size-3xl: 1.75rem;
    --font-size-4xl: 2rem;
    --font-size-5xl: 2.625rem;

    --line-height-base: 1em;
    --line-height-xs: 0.7em;
    --line-height-sm: 0.85em;
    --line-height-md: 1.1em;
    --line-height-lg: 1.3em;
    --line-height-xl: 1.5em;
    --line-height-xxl: 1.8em;

    --letter-spacing-xs: 0.03em;
    --letter-spacing-sm: 0.05em;
    --letter-spacing: 0.07em;
    --letter-spacing-md: 0.09em;
    --letter-spacing-lg: 0.1em;
}


} /* @layer overrides */

@layer utilities {
    .font-serif { font-family: var(--font-serif), serif; letter-spacing: 0.02em; }
    .font-sans { font-family: var(--font-sans), sans-serif; }
    .font-mono { font-family: var(--font-mono), monospace; }

    .font-bold { font-weight: bold; }

    .uppercase { text-transform: uppercase; }
    .capitalize { text-transform: capitalize; }
    .lowercase { text-transform: lowercase; }

    .text-dense {color: var(--text-300);}
    .text-denser {color: #ADADAD;}
    .text-densest {color: #CCCCCC;}

    .text-xs   { font-size: var(--font-size-xs) }
    .text-sm   { font-size: var(--font-size-sm) }
    .text-base { font-size: var(--font-size-base)}
    .text-md   { font-size: var(--font-size-md) }
    .text-lg   { font-size: var(--font-size-lg) }
    .text-xl   { font-size: var(--font-size-xl) }
    .text-xxl  { font-size: var(--font-size-xxl) }
    .text-2xl  { font-size: var(--font-size-3xl) }
    .text-3xl  { font-size: var(--font-size-3xl) }
    .text-4xl  { font-size: var(--font-size-4xl) }
    .text-5xl  { font-size: var(--font-size-5xl) }


    .text-left { text-align: left; }
    .text-center { text-align: center; }
    .text-right { text-align: right; }
    .text-justify { text-align: justify; }
    .text-balanced { text-wrap: balance }


    .line-height-xs  { line-height: var(--line-height-xs)}
    .line-height-sm  { line-height: var(--line-height-sm)}
    .line-height     { line-height: var(--line-height-base)}
    .line-height-md  { line-height: var(--line-height-md)}
    .line-height-lg  { line-height: var(--line-height-lg)}
    .line-height-xl  { line-height: var(--line-height-xl)}
    .line-height-xxl { line-height: var(--line-height-xxl)}

    .letter-spacing-xs { letter-spacing: var(--letter-spacing-xs); }
    .letter-spacing-sm { letter-spacing: var(--letter-spacing-sm); }
    .letter-spacing { letter-spacing: var(--letter-spacing); }
    .letter-spacing-md { letter-spacing: var(--letter-spacing-md); }
    .letter-spacing-lg { letter-spacing: var(--letter-spacing-lg); }


    .h1 { font-size: 1.625rem; line-height: 1.2em; margin: 0; padding:0; font-family: var(--font-serif), serif; }
    .h2 { font-size: 1.375rem; line-height: 1.2em; margin: 0; padding:0; font-family: var(--font-serif), serif; }
    .h3 { font-size: 1.125rem; line-height: 1.2em; margin: 0; padding:0; font-family: var(--font-serif), serif; }
    
    @media (max-width: 600px) {
        .h1 { font-size: 1.375rem; }
        .h2 { font-size: 1.125rem; }
        .h3 { font-size: 1rem; }
    }

    .underline { text-decoration: underline; }
    .strike-through { text-decoration: line-through; }

    .single-line {
        display: inline-block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .ui-link, a.ui-link, a.ui-link:visited {
        color: inherit;
        text-decoration: underline;
        text-decoration-color:  inherit;
        text-underline-offset: 2px;
    }
}