/*
 * Lysons Digital design foundation
 *
 * Component styles belong below this foundation or in files imported after it.
 * Breakpoints, when components need them: 48rem, 64rem, and 80rem.
 */

:root {
    color-scheme: light;

    /* Typography */
    --font-body: "Avenir Next", Avenir, "Segoe UI", Helvetica, Arial, sans-serif;
    --font-mono: "SFMono-Regular", "Cascadia Code", "Roboto Mono", Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    --font-display: var(--font-mono);

    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lead: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
    --text-heading-4: clamp(1.25rem, 1.16rem + 0.35vw, 1.5rem);
    --text-heading-3: clamp(1.5rem, 1.28rem + 0.9vw, 2.125rem);
    --text-heading-2: clamp(2rem, 1.56rem + 1.75vw, 3.25rem);
    --text-heading-1: clamp(2.75rem, 1.95rem + 3.2vw, 5rem);

    --leading-tight: 1.05;
    --leading-heading: 1.15;
    --leading-body: 1.65;
    --tracking-tight: -0.035em;
    --tracking-wide: 0.08em;

    /* Spacing */
    --space-3xs: 0.25rem;
    --space-2xs: 0.5rem;
    --space-xs: 0.75rem;
    --space-small: 1rem;
    --space-medium: 1.5rem;
    --space-large: 2rem;
    --space-xl: clamp(3rem, 2rem + 4vw, 6rem);
    --space-2xl: clamp(4.5rem, 3rem + 6vw, 9rem);
    --space-3xl: clamp(6rem, 4rem + 8vw, 12rem);

    /* Layout */
    --width-copy: 68ch;
    --width-narrow: 48rem;
    --width-content: 76rem;
    --width-wide: 90rem;
    --page-gutter: clamp(1.25rem, 0.75rem + 2vw, 3rem);

    /* Core palette */
    --colour-canvas: #f7f5f2;
    --colour-surface: #ffffff;
    --colour-surface-muted: #eee8e2;
    --colour-surface-raised: #ffffff;

    --colour-ink: #211d1d;
    --colour-ink-muted: #625b59;
    --colour-ink-faint: #817976;
    --colour-ink-inverse: #fffaf7;

    --colour-accent: #6e1f28;
    --colour-accent-hover: #57171f;
    --colour-accent-active: #451118;
    --colour-accent-soft: #a04a55;
    --colour-accent-subtle: #ead8da;
    --colour-on-accent: #ffffff;

    --colour-border: #ddd6cf;
    --colour-border-strong: #bdb3ab;
    --colour-focus: #b14b58;

    --colour-success: #2e6b4b;
    --colour-warning: #9a641a;
    --colour-danger: #9b2c2c;

    /* Shape and depth */
    --radius-small: 0.375rem;
    --radius-medium: 0.75rem;
    --radius-large: 1.25rem;
    --radius-pill: 999px;

    --shadow-small: 0 1px 2px rgb(33 29 29 / 0.06);
    --shadow-medium: 0 0.5rem 2rem rgb(33 29 29 / 0.09);
    --shadow-large: 0 1.5rem 4rem rgb(33 29 29 / 0.13);

    /* Interaction */
    --duration-fast: 120ms;
    --duration-standard: 220ms;
    --duration-slow: 420ms;
    --ease-standard: cubic-bezier(0.2, 0.7, 0.2, 1);
    --focus-ring: 0 0 0 0.2rem color-mix(in srgb, var(--colour-focus) 35%, transparent);
}

/* Ignite exposes the active theme through data-bs-theme. */
[data-bs-theme="dark"] {
    color-scheme: dark;

    --colour-canvas: #181414;
    --colour-surface: #211b1c;
    --colour-surface-muted: #2b2324;
    --colour-surface-raised: #302627;

    --colour-ink: #f5eeee;
    --colour-ink-muted: #c8bcba;
    --colour-ink-faint: #a79895;
    --colour-ink-inverse: #211d1d;

    --colour-accent: #d8848e;
    --colour-accent-hover: #e5a2aa;
    --colour-accent-active: #efbbc1;
    --colour-accent-soft: #bd6671;
    --colour-accent-subtle: #422a2e;
    --colour-on-accent: #241315;

    --colour-border: #493d3e;
    --colour-border-strong: #675658;
    --colour-focus: #ed9aa4;

    --colour-success: #78bd98;
    --colour-warning: #e0ae61;
    --colour-danger: #ed8e8e;

    --shadow-small: 0 1px 2px rgb(0 0 0 / 0.22);
    --shadow-medium: 0 0.5rem 2rem rgb(0 0 0 / 0.28);
    --shadow-large: 0 1.5rem 4rem rgb(0 0 0 / 0.35);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    min-width: 20rem;
    scroll-behavior: smooth;
    text-size-adjust: 100%;
}

body {
    min-height: 100vh;
    margin: 0;
    background: var(--colour-canvas);
    color: var(--colour-ink);
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: var(--font-weight-regular);
    line-height: var(--leading-body);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

body.container {
    width: 100%;
    max-width: none;
    padding: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin-block: 0 0.6em;
    color: var(--colour-ink);
    font-family: var(--font-display);
    font-weight: var(--font-weight-semibold);
    line-height: var(--leading-heading);
    text-wrap: balance;
}

h1 {
    font-size: var(--text-heading-1);
    letter-spacing: var(--tracking-tight);
    line-height: var(--leading-tight);
}

h2 {
    font-size: var(--text-heading-2);
    letter-spacing: calc(var(--tracking-tight) * 0.7);
}

h3 {
    font-size: var(--text-heading-3);
}

h4,
h5,
h6 {
    font-size: var(--text-heading-4);
}

p,
ul,
ol,
blockquote,
figure {
    margin-block: 0 1em;
}

a {
    color: var(--colour-accent);
    text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.18em;
    transition:
        color var(--duration-fast) var(--ease-standard),
        text-decoration-color var(--duration-fast) var(--ease-standard);
}

a:hover {
    color: var(--colour-accent-hover);
    text-decoration-color: currentColor;
}

a:active {
    color: var(--colour-accent-active);
}

:where(a, button, input, select, textarea, summary):focus-visible {
    outline: 0.15rem solid var(--colour-focus);
    outline-offset: 0.2rem;
    box-shadow: var(--focus-ring);
}

button,
input,
select,
textarea {
    color: inherit;
    font: inherit;
}

button,
summary {
    cursor: pointer;
}

img,
picture,
svg,
video {
    display: block;
    max-width: 100%;
}

img,
video {
    height: auto;
}

hr {
    margin-block: var(--space-xl);
    border: 0;
    border-block-start: 1px solid var(--colour-border);
}

blockquote {
    padding-inline-start: var(--space-medium);
    border-inline-start: 0.2rem solid var(--colour-accent);
    color: var(--colour-ink-muted);
}

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

code:not(pre code) {
    padding: 0.1em 0.35em;
    border: 1px solid var(--colour-border);
    border-radius: var(--radius-small);
    background: var(--colour-surface-muted);
    font-size: 0.9em;
}

::selection {
    background: var(--colour-accent-subtle);
    color: var(--colour-ink);
}

/* Site header */
.site-header {
    width: 100%;
    border-block-end: 1px solid var(--colour-border);
    background: color-mix(in srgb, var(--colour-canvas) 92%, transparent);
}

.site-header-inner,
.ig-main-content {
    width: min(100%, var(--width-wide));
    margin-inline: auto;
    padding-inline: var(--page-gutter);
}

.site-header-inner {
    display: flex;
    align-items: center;
    min-height: 4.5rem;
    padding-block: var(--space-xs);
    gap: var(--space-large);
}

.site-header-title {
    flex: 0 0 auto;
    color: var(--colour-ink);
    font-family: var(--font-display);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--tracking-wide);
    line-height: 1;
    text-decoration: none;
    text-transform: uppercase;
}

.site-header-title:hover {
    color: var(--colour-accent);
}

.site-header-navigation {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-inline-start: auto;
    gap: var(--space-2xs);
}

.site-header-link {
    display: inline-flex;
    align-items: center;
    min-height: 2.5rem;
    padding-inline: var(--space-xs);
    border-radius: var(--radius-small);
    color: var(--colour-ink-muted);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);
    line-height: 1;
    text-decoration: none;
}

.site-header-link:hover {
    background: var(--colour-accent-subtle);
    color: var(--colour-accent-hover);
}

.site-page-heading {
	padding-block: var(--space-small);
}

/*
.ig-main-content {
    padding-block: var(--space-xl);
}
*/

@media (max-width: 36rem) {
    .site-header-inner {
        min-height: 4rem;
        gap: var(--space-small);
    }

    .site-header-navigation {
        gap: 0;
    }

    .site-header-link {
        min-height: 2.25rem;
        padding-inline: var(--space-2xs);
        font-size: var(--text-xs);
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}

@media (forced-colors: active) {
    :where(a, button, input, select, textarea, summary):focus-visible {
        outline: 0.2rem solid CanvasText;
        box-shadow: none;
    }
}