/*
 * IntelliSee typography rhythm.
 *
 * Establishes a single, enforced type scale for headings, body, and
 * supporting text. Headings tighten their leading, lock to Montserrat 600/700,
 * and inherit a consistent vertical rhythm. Page-specific CSS can still
 * override locally — these defaults only fill the gaps that Bootstrap and
 * Halfmoon leave unstyled.
 */

@layer tokens {
    :root {
        /* Type scale (rem-based, modular ratio ~1.2). Pages should reference
           these instead of hard-coded font-size declarations. */
        --macc-text-display:  2.25rem;   /* 36px — hero / login headline */
        --macc-text-h1:       1.75rem;   /* 28px */
        --macc-text-h2:       1.5rem;    /* 24px */
        --macc-text-h3:       1.25rem;   /* 20px */
        --macc-text-h4:       1.0625rem; /* 17px */
        --macc-text-h5:       0.9375rem; /* 15px */
        --macc-text-h6:       0.8125rem; /* 13px — eyebrow / section label */
        --macc-text-body:     var(--macc-font-size-body);
        --macc-text-small:    var(--macc-font-size-small);
        --macc-text-caption:  var(--macc-font-size-caption);

        /* Heading-specific leading. Tighter than body so multi-line titles
           feel deliberate rather than loose. */
        --macc-line-height-display: 1.15;
        --macc-line-height-heading: 1.25;

        /* Locked weights — discourages ad-hoc 500/800 in views. */
        --macc-font-weight-body:    400;
        --macc-font-weight-medium:  500;
        --macc-font-weight-strong:  600;
        --macc-font-weight-display: 700;

        /* Letter-spacing: micro-tracking improves Montserrat at small sizes
           and adds polish to uppercase eyebrows/labels. */
        --macc-letter-spacing-tight:    -0.005em;
        --macc-letter-spacing-normal:    0;
        --macc-letter-spacing-eyebrow:   0.06em;
    }
}

@layer base {
    /* Body baseline — keeps everything else proportionate. */
    body {
        font-family: var(--macc-font-sans);
        font-size: var(--macc-text-body);
        line-height: var(--macc-line-height-body);
        font-weight: var(--macc-font-weight-body);
        letter-spacing: var(--macc-letter-spacing-tight);
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-rendering: optimizeLegibility;
    }

    /* Headings: shared baseline, then per-level size. Margin is reset to 0
       and pages opt into spacing via stack utilities or feature CSS — this
       prevents the jagged top-margin many headings inherit from Bootstrap. */
    h1, h2, h3, h4, h5, h6,
    .h1, .h2, .h3, .h4, .h5, .h6 {
        font-family: var(--macc-font-sans);
        line-height: var(--macc-line-height-heading);
        letter-spacing: var(--macc-letter-spacing-tight);
        font-weight: var(--macc-font-weight-strong);
        color: var(--macc-text);
        margin-top: 0;
        margin-bottom: 0.5rem;
    }

    h1, .h1 {
        font-size: var(--macc-text-h1);
        line-height: var(--macc-line-height-display);
        font-weight: var(--macc-font-weight-display);
    }

    h2, .h2 { font-size: var(--macc-text-h2); }
    h3, .h3 { font-size: var(--macc-text-h3); }
    h4, .h4 { font-size: var(--macc-text-h4); }
    h5, .h5 { font-size: var(--macc-text-h5); }

    /* h6 is reserved as the section eyebrow. Uppercase + tracked. */
    h6, .h6 {
        font-size: var(--macc-text-h6);
        text-transform: uppercase;
        letter-spacing: var(--macc-letter-spacing-eyebrow);
        color: var(--macc-text-muted);
        font-weight: var(--macc-font-weight-strong);
    }

    /* Paragraphs default to readable measure; pages can widen as needed. */
    p {
        margin-top: 0;
        margin-bottom: 0.75rem;
    }

    small,
    .small {
        font-size: var(--macc-text-small);
        line-height: var(--macc-line-height-ui);
    }
}

@layer components {
    /* ----- Display utility — used on hero/login titles ---------------- */
    .macc-text-display {
        font-size: var(--macc-text-display);
        line-height: var(--macc-line-height-display);
        font-weight: var(--macc-font-weight-display);
        letter-spacing: var(--macc-letter-spacing-tight);
    }

    /* ----- Eyebrow / section label ----------------------------------- */
    /* Drop-in label for "OVERVIEW", "RECENT ACTIVITY", etc. — pairs with
       sidebar section headings and card eyebrows. */
    .macc-eyebrow {
        font-size: var(--macc-text-h6);
        font-weight: var(--macc-font-weight-strong);
        text-transform: uppercase;
        letter-spacing: var(--macc-letter-spacing-eyebrow);
        color: var(--macc-text-muted);
        line-height: 1;
    }

    /* ----- Lead paragraph -------------------------------------------- */
    .macc-lead {
        font-size: 1.0625rem;
        line-height: 1.55;
        color: var(--macc-text-soft);
        font-weight: var(--macc-font-weight-body);
        max-width: 60ch;
    }

    /* ----- Numeric / metric value ------------------------------------ */
    /* For KPI tiles and big counters. Combines tabular numerals (already
       set in primitives) with display weight. */
    .macc-metric {
        font-size: var(--macc-text-h2);
        line-height: var(--macc-line-height-display);
        font-weight: var(--macc-font-weight-display);
        letter-spacing: -0.01em;
        color: var(--macc-text);
    }

    .macc-metric--lg {
        font-size: var(--macc-text-display);
    }

    .macc-metric__delta {
        display: inline-block;
        font-size: var(--macc-text-caption);
        font-weight: var(--macc-font-weight-strong);
        margin-left: 0.4rem;
        vertical-align: middle;
        color: var(--macc-text-muted);
    }
}