@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;700&display=swap');

html {
    font-size: 16px; /* Base font size for scaling */
}

:root {
    /* Fonts - Fira Code monospace throughout */
    --tFontDefaultFamily: 'Fira Code', monospace;
    --tFontMonoFamily: 'Fira Code', monospace;
    --tFontHeadingFamily: 'Fira Code', monospace;

    /* Brand colors - coral red header/menu */
    --tBrandColorContrast0: #E06968; /* Brand BG color (header) */
    --tBrandColorContrast1: #d55a57;
    --tBrandColorContrast20: #c44444;
    --tBrandColorContrast60: #f0a0a0; /* Brand muted text color */
    --tBrandColorContrast80: #f8d8d8;
    --tBrandColorContrast100: #fff;
    --tBrandText: var(--tBrandColorContrast100); /* White text on coral */

    /* Content area - white/light theme */
    --tColorContrast0: #fff;       /* background */
    --tColorContrast1: #f0f0f0;    /* focus background */
    --tColorContrast20: #cccccc;   /* borders */
    --tColorContrast60: #888888;   /* muted text */
    --tColorContrast80: #333333;   /* dark text */
    --tColorContrast100: #1a1a1a;  /* near black */

    /* Buttons */
    --tButtonPrimaryBgColor: #E06968;
    --tButtonPrimaryFgColor: #fff;
    --tButtonPrimaryHoverBgColor: #c44444;
    --tButtonPrimaryHoverFgColor: #fff;

    /* Links */
    --tLinkColor: #888888;
    --tLinkHoverColor: #1a1a1a;

    /* Media overlay - dark tinted coral */
    --tMediaOverlayColorContrast0: rgba(224, 105, 104, .64);
    --tMediaOverlayColorContrast1: #E06968;
    --tMediaOverlayColorContrast20: #d55a57;
    --tMediaOverlayColorContrast60: #f0a0a0;
    --tMediaOverlayColorContrast80: #f8d8d8;
    --tMediaOverlayColorContrast100: #fff;
}

/* Body: Fira Code optical corrections */
body {
    letter-spacing: -0.02em;
    word-spacing: -0.02em;
}

/* Heading and paragraph spacing */
h1, .h1 { margin-bottom: var(--tVspacingXLarge); }
h2, .h2 { margin-bottom: var(--tVspacingLarge); }
p, .paragraph { margin-bottom: var(--tVspacingLarge); }
.paragraph--tight { margin-bottom: var(--tHspacingSmall); }
.paragraph--xtight { margin-bottom: var(--tHspacingXSmall); }
.paragraph--no-margin { margin-bottom: 0; }

/* em: muted color, restored inside paragraphs */
em {
    color: var(--tColorContrast60);
}
p em {
    color: inherit;
}

/* HR: subtle light border */
hr,
html .horizontal-rule {
    border: 0;
    border-top: 1px solid var(--tColorContrast20);
    margin: 0 0 var(--tVspacingMedium);
}

/* Paragraph links: darker with reversed hover */
p a:not([class]),
p a:not([class]):visited {
    color: var(--tColorContrast80);
    text-decoration: underline;
}
p a:not([class]):hover {
    color: var(--tColorContrast60);
}

/* Circle image: centered within its column */
.columnimage--circle .columnimage__image {
    margin: 0 auto;
}

/* Breadcrumb separator: '->' consistent with bullet list */
html .breadcrumb-item-list__separator:before {
    content: '->';
    font-weight: normal;
    font-variant-ligatures: none;
}

/* Bullet list: '->' arrow markers */
html ul:not([class])>li:before, html ul.bullet-list>li:before {
    background-color: transparent;
    border-radius: 0;
    content: '->';
    height: auto;
    width: auto;
    color: var(--tColorContrast60);
    top: 0;
    font-variant-ligatures: none;
}

/* Appresso: page-section--brand uses white background like the original site */
.page-section.page-section--brand {
    background-color: #fff;
    color: #1a1a1a;
    --tColorContrast0: #fff;
    --tColorContrast1: #f0f0f0;
    --tColorContrast20: #cccccc;
    --tColorContrast60: #888888;
    --tColorContrast80: #333333;
    --tColorContrast100: #1a1a1a;
    --tLinkColor: #888888;
    --tLinkHoverColor: #1a1a1a;
    --tButtonPrimaryBgColor: #E06968;
    --tButtonPrimaryFgColor: #fff;
    --tButtonPrimaryHoverBgColor: #c44444;
    --tButtonPrimaryHoverFgColor: #fff;
}