/* ==========================================================================
   CinderTek - Global
   Base elements, type scale, surfaces and layout primitives.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

html {
    scroll-padding-top: var(--header-height);
    color-scheme: dark;
    background-color: var(--color-bg);
    overflow-x: clip;
}

html.theme-dark,
html[data-theme="dark"] {
    color-scheme: dark;
}

body {
    position: relative;
    font-family: var(--font-body);
    font-size: var(--fs-base);
    font-weight: var(--fw-regular);
    line-height: var(--lh-relaxed);
    color: var(--color-text-body);
    background-color: var(--color-bg);
    font-feature-settings: "kern", "liga", "calt";
    font-optical-sizing: auto;
}

.theme-dark,
.theme-light,
[data-theme] {
    color: var(--color-text-body);
    background-color: transparent;
}

/* A short colour cross-fade while the theme changes (js/theme.js). */
html.is-theme-switching,
html.is-theme-switching *,
html.is-theme-switching *::before,
html.is-theme-switching *::after {
    transition:
        background-color 0.35s var(--ease-standard),
        color 0.35s var(--ease-standard),
        border-color 0.35s var(--ease-standard),
        fill 0.35s var(--ease-standard),
        stroke 0.35s var(--ease-standard) !important;
}

::selection {
    background-color: var(--color-selection-bg);
    color: var(--color-selection-text);
}

:focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-offset);
}

:focus:not(:focus-visible) {
    outline: none;
}

/* --------------------------------------------------------------------------
   Typography - elements
   -------------------------------------------------------------------------- */

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-display);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-snug);
    letter-spacing: var(--ls-tight);
    color: var(--color-text);
}

h1 { font-size: var(--fs-4xl); line-height: var(--lh-tight); letter-spacing: var(--ls-tighter); }
h2 { font-size: var(--fs-3xl); line-height: var(--lh-tight); }
h3 { font-size: var(--fs-2xl); }
h4 { font-size: var(--fs-xl); }
h5 { font-size: var(--fs-lg); }
h6 { font-size: var(--fs-md); }

strong,
b {
    font-weight: var(--fw-semibold);
    color: var(--color-text);
}

small {
    font-size: var(--fs-sm);
}

code,
kbd,
samp,
pre {
    font-family: var(--font-mono);
    font-size: 0.9em;
}

hr {
    border: 0;
    border-top: var(--border-default);
}

/* --------------------------------------------------------------------------
   Typography - utility classes
   Decouple visual size from heading level.
   -------------------------------------------------------------------------- */

.t-display,
.t-h1,
.t-h2,
.t-h3,
.t-h4,
.t-h5 {
    font-family: var(--font-display);
    font-weight: var(--fw-semibold);
    color: var(--color-text);
}

.t-display {
    font-size: var(--fs-5xl);
    font-weight: var(--fw-extrabold);
    line-height: var(--lh-none);
    letter-spacing: var(--ls-tighter);
}

.t-h1 { font-size: var(--fs-4xl); line-height: 0.98; letter-spacing: -0.045em; }
.t-h2 { font-size: var(--fs-3xl); line-height: 1.02; letter-spacing: -0.04em; }
.t-h3 { font-size: var(--fs-2xl); line-height: var(--lh-snug); letter-spacing: var(--ls-tight); }
.t-h4 { font-size: var(--fs-xl); line-height: var(--lh-snug); letter-spacing: var(--ls-tight); }
.t-h5 { font-size: var(--fs-lg); line-height: var(--lh-snug); letter-spacing: var(--ls-tight); }

.t-lead {
    font-size: var(--fs-lg);
    line-height: var(--lh-normal);
    color: var(--color-text-body);
}

.t-body { font-size: var(--fs-base); line-height: var(--lh-relaxed); }
.t-small { font-size: var(--fs-sm); line-height: var(--lh-normal); }

.t-caption {
    font-size: var(--fs-xs);
    line-height: var(--lh-normal);
    color: var(--color-text-muted);
}

.t-label {
    font-family: var(--font-body);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-none);
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
}

.t-numeric {
    font-variant-numeric: tabular-nums lining-nums;
}

.t-muted { color: var(--color-text-muted); }
.t-strong { color: var(--color-text); }
.t-accent { color: var(--color-link); }

.measure-narrow { max-width: var(--measure-narrow); }
.measure { max-width: var(--measure); }
.measure-wide { max-width: var(--measure-wide); }

/* --------------------------------------------------------------------------
   Layout primitives
   -------------------------------------------------------------------------- */

.container {
    width: 100%;
    max-width: calc(var(--container-default) + var(--gutter) * 2);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.container--sm { max-width: calc(var(--container-sm) + var(--gutter) * 2); }
.container--md { max-width: calc(var(--container-md) + var(--gutter) * 2); }
.container--xl { max-width: calc(var(--container-xl) + var(--gutter) * 2); }
.container--full { max-width: none; }

.section { padding-block: var(--space-section); }
.section--sm { padding-block: var(--space-section-sm); }
.section--lg { padding-block: var(--space-section-lg); }

.grid {
    display: grid;
    grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
    gap: var(--grid-gap);
}

.span-1 { grid-column: span 1; }
.span-2 { grid-column: span 2; }
.span-3 { grid-column: span 3; }
.span-4 { grid-column: span 4; }
.span-5 { grid-column: span 5; }
.span-6 { grid-column: span 6; }
.span-7 { grid-column: span 7; }
.span-8 { grid-column: span 8; }
.span-9 { grid-column: span 9; }
.span-10 { grid-column: span 10; }
.span-11 { grid-column: span 11; }
.span-12 { grid-column: 1 / -1; }

.stack {
    display: flex;
    flex-direction: column;
    gap: var(--stack-gap, var(--space-4));
}

.stack--sm { --stack-gap: var(--space-2); }
.stack--lg { --stack-gap: var(--space-8); }
.stack--xl { --stack-gap: var(--space-16); }

.cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--cluster-gap, var(--space-4));
}

.cluster--sm { --cluster-gap: var(--space-2); }
.cluster--lg { --cluster-gap: var(--space-8); }
.cluster--between { justify-content: space-between; }

/* --------------------------------------------------------------------------
   Site shell
   -------------------------------------------------------------------------- */

.site-main {
    padding-top: var(--header-height);
}

.site-main:focus {
    outline: none;
}

html.is-nav-locked {
    overflow: hidden;
}

/* --------------------------------------------------------------------------
   Accessibility helpers
   -------------------------------------------------------------------------- */

.skip-link {
    position: absolute;
    top: var(--space-4);
    left: var(--space-4);
    z-index: var(--z-max);
    padding: var(--space-3) var(--space-4);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    color: var(--color-inverse-text);
    background-color: var(--color-inverse-bg);
    transform: translateY(calc(-100% - var(--space-8)));
    transition: transform var(--duration-fast) var(--ease-standard);
}

.skip-link:focus {
    transform: none;
}

.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}