@import "./colors.css";

:root {
    --font-family-base: "Be Vietnam Pro", "Segoe UI", sans-serif;
    --font-family-heading: "Be Vietnam Pro", "Segoe UI", sans-serif;
    --font-family-mono: "Cascadia Mono", Consolas, monospace;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-size-100: 0.875rem;
    --font-size-200: 1rem;
    --font-size-250: 1.125rem;
    --font-size-300: 1.25rem;
    --font-size-400: 1.5rem;
    --font-size-500: 1.875rem;
    --font-size-600: 2.5rem;
    --font-size-700: 3.25rem;
    --line-height-tight: 1.1;
    --line-height-heading: 1.2;
    --line-height-body: 1.6;
    --line-height-loose: 1.8;
    --letter-spacing-caps: 0.08em;

    --space-0: 0rem;
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;

    --size-1: 0.0625rem;
    --size-2: 0.125rem;
    --size-4: 0.25rem;
    --size-6: 0.375rem;
    --size-8: 0.5rem;
    --size-10: 0.625rem;
    --size-12: 0.75rem;
    --size-14: 0.875rem;
    --size-16: 1rem;
    --size-18: 1.125rem;
    --size-20: 1.25rem;
    --size-24: 1.5rem;
    --size-28: 1.75rem;
    --size-32: 2rem;
    --size-36: 2.25rem;
    --size-40: 2.5rem;
    --size-44: 2.75rem;
    --size-48: 3rem;
    --size-56: 3.5rem;
    --size-64: 4rem;
    --size-72: 4.5rem;
    --size-80: 5rem;
    --size-96: 6rem;
    --size-120: 7.5rem;
    --size-160: 10rem;
    --size-200: 12.5rem;
    --size-240: 15rem;
    --size-280: 17.5rem;
    --size-320: 20rem;
    --size-400: 25rem;
    --size-640: 40rem;
    --size-720: 45rem;
    --size-900: 56.25rem;
    --size-1140: 71.25rem;
    --size-1280: 80rem;
    --size-1440: 90rem;

    --radius-sm: 0.5rem;
    --radius-md: 0.875rem;
    --radius-lg: 1.25rem;
    --radius-xl: 1.75rem;
    --radius-pill: 62.4375rem;

    --border-width-1: 0.0625rem;
    --border-width-2: 0.125rem;

    --shadow-card: 0 1rem 2.5rem 0 var(--color-shadow);
    --shadow-header: 0 0.5rem 2rem 0 var(--color-overlay);
    --shadow-focus: 0 0 0 0.25rem hsl(261 77% 61% / 0.2);

    --opacity-disabled: 0.45;

    --duration-fast: 120ms;
    --duration-base: 180ms;
    --duration-slow: 280ms;
    --timing-standard: ease;

    --z-base: 1;
    --z-sticky: 10;
    --z-header: 100;
    --z-overlay: 200;

    --layout-container-max: var(--size-1280);
    --layout-page-max: calc(var(--size-400) * 3);
    --layout-header-height: var(--size-80);
    --layout-main-min-height: var(--size-640);
    --layout-section-gap: var(--space-6);
    --layout-grid-gap: var(--space-6);
    --layout-card-gap: var(--space-6);
    --layout-nav-gap: var(--space-5);
    --layout-footer-logo-width: var(--size-240);
    --layout-table-min-width: var(--size-900);
    --layout-sticky-column-width: var(--size-48);
    --layout-calendar-cell-min-width: var(--size-32);
    --layout-calendar-day-height: var(--size-40);
    --layout-input-height: var(--size-48);
    --layout-button-height: var(--size-48);
    --hero-copy-width: var(--size-640);
    --hero-panel-width: var(--size-400);
    --swatch-preview-height: var(--size-64);
    --swatch-preview-radius: var(--radius-lg);
    --swatch-card-min: var(--size-160);
    --content-card-min: var(--size-320);
    --panel-min: var(--size-320);
    --pill-height: var(--size-32);
    --choice-control-size: var(--size-20);
    --data-table-min-width: var(--size-320);
    --measure-rail-height: var(--size-48);
    --measure-bar-height: var(--size-12);
    --preview-box-height: var(--size-64);
    --elevation-preview-height: var(--size-72);
}

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

html {
    min-height: 100%;
    overflow-x: clip;
    scroll-behavior: smooth;
}

body {
    min-height: 100%;
    margin: var(--space-0);
    overflow-x: clip;
    background:
        radial-gradient(circle at top, var(--color-brand-100), transparent 48%),
        radial-gradient(circle at right 20%, var(--color-sand-100), transparent 30%),
        linear-gradient(180deg, var(--color-surface-50), var(--color-surface-100));
    color: var(--color-text-700);
    font-family: var(--font-family-base);
    font-size: var(--font-size-200);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-body);
}

main {
    display: block;
    min-height: var(--layout-main-min-height);
    padding-top: calc(var(--layout-header-height) + var(--space-8));
    padding-bottom: var(--space-16);
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}

a {
    color: var(--color-brand-700);
    text-decoration-thickness: var(--border-width-1);
    text-underline-offset: var(--space-1);
    transition: color var(--duration-base) var(--timing-standard);
}

a:hover {
    color: var(--color-brand-500);
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    margin-top: var(--space-0);
    margin-bottom: var(--space-4);
    color: var(--color-text-900);
    font-family: var(--font-family-heading);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-heading);
}

h1,
.h1 {
    font-size: clamp(var(--font-size-500), 4vw, var(--font-size-700));
    line-height: var(--line-height-tight);
}

h2,
.h2 {
    font-size: clamp(var(--font-size-400), 3vw, var(--font-size-600));
}

h3,
.h3 {
    font-size: clamp(var(--font-size-300), 2vw, var(--font-size-500));
}

h4,
.h4,
h5,
.h5,
h6,
.h6 {
    font-size: var(--font-size-250);
}

p,
ol,
ul,
dl {
    margin-top: var(--space-0);
    margin-bottom: var(--space-6);
}

ul,
ol {
    padding-left: var(--space-6);
}

small,
.small {
    font-size: var(--font-size-100);
}

hr {
    margin: var(--space-8) var(--space-0);
    border: none;
    border-top: var(--border-width-1) solid var(--color-border-soft);
}

table {
    width: 100%;
    border-collapse: collapse;
}

th,
td {
    padding: var(--space-3);
    border: var(--border-width-1) solid var(--color-border-soft);
    vertical-align: top;
}

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

input,
select,
textarea {
    width: 100%;
    min-height: var(--layout-input-height);
    padding: var(--space-3) var(--space-4);
    border: var(--border-width-1) solid var(--color-border-strong);
    border-radius: var(--radius-md);
    background: var(--color-surface-0);
    color: var(--color-text-900);
}

input:focus,
select:focus,
textarea:focus,
button:focus-visible,
a:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus);
}

.site-header {
    position: fixed;
    inset-block-start: var(--space-0);
    inset-inline: var(--space-0);
    z-index: var(--z-header);
    min-height: var(--layout-header-height);
    border-bottom: var(--border-width-1) solid hsl(0 0% 100% / 0.14);
    background: linear-gradient(135deg, var(--color-brand-900), var(--color-brand-700) 65%, var(--color-accent-700));
    box-shadow: var(--shadow-header);
}

.site-header a,
.site-header a:visited {
    color: var(--color-surface-0);
    text-decoration: none;
}

.site-footer {
    margin-top: var(--space-16);
    padding-top: var(--space-12);
    color: hsl(210 25% 88%);
    background: linear-gradient(180deg, var(--color-brand-700), var(--color-accent-700) 42%, var(--color-surface-900));
}

.site-footer h2,
.site-footer h3,
.site-footer a,
.site-footer a:visited {
    color: hsl(210 25% 96%);
}

.container {
    width: min(calc(100% - var(--space-8)), var(--layout-container-max));
    margin-inline: auto;
}

.site-header__inner {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    min-height: var(--layout-header-height);
}

.brand-mark {
    display: grid;
    gap: var(--space-1);
    min-width: var(--space-0);
    padding-block: var(--space-4);
}

.brand-mark__title {
    display: inline-flex;
    align-items: center;
    min-height: var(--layout-header-height);
    font-size: var(--font-size-400);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-caps);
    line-height: var(--line-height-tight);
    text-transform: uppercase;
}

.brand-mark__tagline {
    display: inline-flex;
    align-items: center;
    color: var(--color-brand-100);
    font-size: var(--font-size-100);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-body);
}

.site-nav-toggle {
    position: absolute;
    inline-size: var(--size-1);
    block-size: var(--size-1);
    margin: calc(var(--size-1) * -1);
    padding: var(--space-0);
    overflow: hidden;
    clip: rect(0 0 0 0);
    border: 0;
}

.site-nav-toggle-label {
    margin-inline-start: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--size-48);
    min-height: var(--size-48);
    align-self: center;
    cursor: pointer;
}

.site-nav-toggle-label span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-500);
    color: var(--color-surface-0);
}

.site-nav {
    position: absolute;
    inset-block-start: 100%;
    inset-inline: var(--space-0);
    padding: var(--space-4) var(--space-4) var(--space-6);
    border-bottom-left-radius: var(--radius-lg);
    border-bottom-right-radius: var(--radius-lg);
    background: linear-gradient(180deg, var(--color-brand-700), hsl(213 52% 23%));
    box-shadow: var(--shadow-card);
    opacity: 0;
    pointer-events: none;
    transform: translateY(calc(var(--space-2) * -1));
    transition:
        opacity var(--duration-base) var(--timing-standard),
        transform var(--duration-base) var(--timing-standard);
}

    .site-nav__list {
    display: grid;
    gap: var(--layout-nav-gap);
    margin: var(--space-0);
    padding: var(--space-0);
    list-style: none;
}

.site-nav li {
    margin: var(--space-0);
}

.site-nav a,
.site-nav a:visited {
    display: inline-flex;
    align-items: center;
    min-height: var(--size-40);
    font-weight: var(--font-weight-semibold);
}

.site-nav-toggle:checked ~ .site-nav {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(var(--space-0));
}

.site-main {
    display: block;
    min-height: var(--layout-main-min-height);
    padding-top: calc(var(--layout-header-height) + var(--space-8));
    padding-bottom: var(--space-16);
}

.site-main__inner {
    display: grid;
    gap: var(--layout-section-gap);
    min-width: var(--space-0);
}

.site-footer__main {
    display: grid;
    gap: var(--space-8);
    padding-bottom: var(--space-8);
}

.site-footer__grid {
    display: grid;
    gap: var(--space-8);
}

.site-footer__column {
    display: grid;
    align-content: start;
    gap: var(--space-3);
}

.site-footer__column--brand {
    gap: var(--space-4);
}

.site-footer__store img {
    width: var(--layout-footer-logo-width);
}

.site-footer__store {
    margin-bottom: var(--space-6);
}

.site-footer__store label {
    display: inline-block;
    margin-top: var(--space-2);
    font-size: var(--font-size-100);
}

.site-footer__sub {
    padding-block: var(--space-6);
    color: hsl(214 20% 70%);
    background: hsl(214 33% 8%);
}

.site-footer__sub a,
.site-footer__sub a:visited {
    margin-inline-end: var(--space-4);
    color: inherit;
}
.cards {
    display: grid;
    gap: var(--layout-card-gap);
    grid-template-columns: 1fr;
}

.card {
    overflow: hidden;
    border: var(--border-width-1) solid var(--color-border-soft);
    border-radius: var(--radius-xl);
    background: var(--color-surface-0);
    box-shadow: var(--shadow-card);
}

.card__header {
    padding: var(--space-6);
    border-bottom: var(--border-width-1) solid var(--color-border-soft);
    background: linear-gradient(180deg, var(--color-brand-050), var(--color-sand-100) 70%, var(--color-surface-0));
}

.card__title {
    margin-bottom: var(--space-0);
}

.card__body,
.card__text {
    padding: var(--space-6);
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--layout-button-height);
    padding-inline: var(--space-6);
    border: var(--border-width-1) solid transparent;
    border-radius: var(--radius-pill);
    background: var(--color-brand-500);
    color: var(--color-surface-0);
    font-weight: var(--font-weight-semibold);
    text-decoration: none;
    cursor: pointer;
    transition:
        transform var(--duration-fast) var(--timing-standard),
        background var(--duration-base) var(--timing-standard),
        border-color var(--duration-base) var(--timing-standard);
}

.btn:hover {
    transform: translateY(calc(var(--size-1) * -1));
    color: var(--color-surface-0);
}

.btn-primary,
.btn-info {
    background: var(--color-brand-500);
}

.btn-secondary,
.btn-grey {
    color: var(--color-surface-0);
}

.btn-secondary {
    background: var(--color-accent-500);
}

.btn-grey {
    background: var(--color-surface-300);
    color: var(--color-text-900);
}

.btn-success {
    background: var(--color-success-500);
}

.btn-danger {
    background: var(--color-danger-500);
}

.btn-warning {
    background: var(--color-warning-500);
    color: var(--color-text-900);
}

.btn-black {
    background: var(--color-text-900);
}

.list-unstyled {
    padding-left: var(--space-0);
    list-style: none;
}

.horizontal-scroll-container {
    width: 100%;
    max-width: 100%;
    min-width: var(--space-0);
    overflow-x: auto;
    padding-bottom: var(--space-2);
}

.calendar {
    overflow: hidden;
    border: var(--border-width-1) solid var(--color-border-soft);
    border-radius: var(--radius-xl);
    background: var(--color-surface-0);
    box-shadow: var(--shadow-card);
}

.calendar__caption {
    padding: var(--space-6);
    border-bottom: var(--border-width-1) solid var(--color-border-soft);
    background: linear-gradient(180deg, var(--color-brand-050), var(--color-sand-100) 70%, var(--color-surface-0));
    color: var(--color-text-900);
    font-size: var(--font-size-400);
    font-weight: var(--font-weight-semibold);
    text-align: center;
}

.calendar thead {
    background: linear-gradient(180deg, var(--color-brand-050), var(--color-sand-100) 70%, var(--color-surface-0));
}

.calendar th,
.calendar td {
    min-width: var(--layout-calendar-cell-min-width);
    min-height: var(--layout-calendar-day-height);
    padding: var(--space-2);
    text-align: center;
}

.calendar tfoot td {
    padding: var(--space-4);
    text-align: left;
}

.calendar-wide {
    width: max-content;
    min-width: var(--layout-table-min-width);
}

.calendar-wide .sticky-column {
    position: sticky;
    inset-inline-start: var(--space-0);
    z-index: var(--z-sticky);
    min-width: var(--layout-sticky-column-width);
    background: var(--color-surface-0);
}

.calendar td.weekend,
.calendar th.weekend {
    background: var(--color-surface-100);
}

.calendar td.vacation {
    background: var(--color-warning-100);
}

.calendar td.holiday-half {
    background: linear-gradient(135deg, var(--color-danger-100), var(--color-surface-0));
}

.calendar td.holiday {
    background: var(--color-danger-100);
}

.table {
    width: 100%;
}

.table-bordered th,
.table-bordered td {
    border-width: var(--border-width-1);
}

.consent-container {
    position: fixed;
    inset-inline-end: var(--space-6);
    inset-block-end: var(--space-6);
    z-index: var(--z-overlay);
    max-width: var(--size-400);
}

.consent-card {
    box-shadow: var(--shadow-card);
}

.consent-btn--floating {
    position: fixed;
    inset-inline-end: var(--space-6);
    inset-block-end: var(--space-6);
    z-index: var(--z-overlay);
}

.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

.text-uppercase {
    letter-spacing: var(--letter-spacing-caps);
    text-transform: uppercase;
}

.text-nowrap {
    white-space: nowrap;
}

.align-middle {
    vertical-align: middle;
}

.mb-0 {
    margin-bottom: var(--space-0);
}

.disabled,
a.disabled {
    color: var(--color-text-500);
    opacity: var(--opacity-disabled);
    pointer-events: none;
    text-decoration: none;
}

@media (min-width: 1280px) {
    .site-nav-toggle-label {
        display: none;
    }

    .site-nav {
        position: static;
        display: flex;
        align-items: center;
        margin-inline-start: auto;
        padding: var(--space-0);
        border-radius: var(--space-0);
        background: transparent;
        box-shadow: none;
        opacity: 1;
        pointer-events: auto;
        transform: none;
    }

    .site-nav__list {
        display: flex;
        align-items: center;
    }

    .site-footer__grid {
        grid-template-columns: minmax(var(--space-0), 2fr) repeat(2, minmax(var(--size-160), 1fr));
    }
}

.page-stack {
    display: grid;
    gap: var(--space-8);
    width: min(100%, var(--layout-page-max));
    min-width: var(--space-0);
    margin-inline: auto;
}

.page-stack--xl {
    gap: var(--space-10);
}

.hero-grid {
    display: grid;
    gap: var(--space-6);
    align-items: start;
}

.hero-surface {
    padding: var(--space-8);
    border: var(--border-width-1) solid hsl(0 0% 100% / 0.5);
    border-radius: var(--radius-xl);
    background: linear-gradient(160deg, color-mix(in srgb, var(--color-surface-0) 84%, var(--color-sand-100)), color-mix(in srgb, var(--color-brand-050) 72%, var(--color-accent-100)) 72%, var(--color-surface-0));
    box-shadow: var(--shadow-card);
}

.panel-fill {
    height: 100%;
}

.section-stack {
    display: grid;
    gap: var(--space-6);
    min-width: var(--space-0);
}

.section-intro {
    max-width: var(--size-720);
}

.eyebrow {
    display: inline-block;
    margin-bottom: var(--space-3);
    color: var(--color-success-700);
    font-size: var(--font-size-100);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-caps);
    text-transform: uppercase;
}

.lead {
    max-width: var(--size-640);
    font-size: var(--font-size-250);
    color: var(--color-text-700);
}

.action-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.action-row--spaced {
    margin-block: var(--space-6);
}

.check-list {
    display: grid;
    gap: var(--space-4);
    margin-bottom: var(--space-0);
}

.check-list li {
    position: relative;
    padding-left: var(--space-6);
}

.check-list li::before {
    content: "";
    position: absolute;
    inset-block-start: var(--space-2);
    inset-inline-start: var(--space-0);
    inline-size: var(--size-8);
    block-size: var(--size-8);
    border-radius: var(--radius-pill);
    background: var(--color-leaf-500);
}

.auto-grid,
.swatch-grid,
.preview-grid {
    display: grid;
    gap: var(--space-6);
}

.auto-grid--cards {
    grid-template-columns: 1fr;
}

.auto-grid--panels,
.auto-grid--split {
    grid-template-columns: 1fr;
}

.swatch-grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
}

.swatch-card {
    display: grid;
    gap: var(--space-2);
}

.swatch-preview {
    display: block;
    min-height: var(--swatch-preview-height);
    border: var(--border-width-1) solid var(--color-border-soft);
    border-radius: var(--swatch-preview-radius);
    background: var(--swatch-color);
}

.token {
    color: var(--color-text-500);
    font-family: var(--font-family-mono);
    font-size: var(--font-size-100);
}

.muted {
    color: var(--color-text-500);
}

.stack {
    display: grid;
    gap: var(--space-3);
}

.stack--md {
    gap: var(--space-4);
}

.preview-grid {
    grid-template-columns: 1fr;
}

.token-row,
.preview-tile,
.elevation-card {
    display: grid;
    gap: var(--space-3);
}

.token-row {
    grid-template-columns: minmax(var(--space-0), var(--size-160)) 1fr;
    align-items: center;
}

.token-copy {
    display: grid;
    gap: var(--space-1);
}

.measure-rail {
    display: flex;
    align-items: center;
    min-height: var(--measure-rail-height);
    padding-inline: var(--space-4);
    border: var(--border-width-1) solid var(--color-border-soft);
    border-radius: var(--radius-lg);
    background: linear-gradient(180deg, var(--color-surface-50), var(--color-surface-0));
}

.measure-bar {
    display: block;
    width: var(--measure-size);
    min-width: var(--size-4);
    height: var(--measure-bar-height);
    border-radius: var(--radius-pill);
    background: linear-gradient(90deg, var(--color-brand-300), var(--color-accent-500));
}

.preview-tile {
    align-content: start;
}

.preview-box {
    display: block;
    min-height: var(--preview-box-height);
    border: var(--border-width-1) solid var(--color-border-soft);
    background: linear-gradient(135deg, var(--color-brand-100), var(--color-accent-100) 55%, var(--color-surface-0));
}

.preview-box--radius {
    border-radius: var(--preview-radius);
}

.elevation-card {
    padding: var(--space-4);
    border: var(--border-width-1) solid var(--color-border-soft);
    border-radius: var(--radius-lg);
    background: linear-gradient(180deg, var(--color-surface-50), var(--color-surface-0));
}

.elevation-preview {
    display: block;
    min-height: var(--elevation-preview-height);
    border-radius: var(--radius-lg);
    background: var(--color-surface-0);
    box-shadow: var(--elevation-shadow);
}

.form-stack,
.choice-list {
    display: grid;
    gap: var(--space-5);
}

.field {
    display: grid;
    gap: var(--space-2);
}

.field-label {
    color: var(--color-text-900);
    font-weight: var(--font-weight-semibold);
}

.field-help {
    margin-bottom: var(--space-0);
    color: var(--color-text-500);
    font-size: var(--font-size-100);
}

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

.calendar-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    align-items: center;
}

.calendar-picker {
    display: grid;
    gap: var(--space-3);
    max-width: 28rem;
}

.calendar-picker--inline {
    flex: 1 1 auto;
    gap: var(--space-0);
    max-width: none;
}

.calendar-picker--inline .field {
    min-width: 0;
}

.calendar-picker--year {
    flex-basis: 11rem;
}

.calendar-picker--state {
    flex-basis: 24rem;
}

.calendar-picker select {
    background: linear-gradient(180deg, var(--color-surface-0), var(--color-brand-050));
    border-color: var(--color-border-strong);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-card);
}

.calendar-picker__submit {
    justify-self: start;
}

.js .calendar-picker__submit {
    display: none;
}

@media (max-width: 767px) {
    .calendar-picker--year,
    .calendar-picker--state {
        flex-basis: 100%;
    }
}

input[type="checkbox"],
input[type="radio"] {
    width: var(--choice-control-size);
    min-width: var(--choice-control-size);
    min-height: var(--choice-control-size);
    height: var(--choice-control-size);
    margin: var(--space-0);
    accent-color: var(--color-brand-500);
}

.choice-card {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-3);
    align-items: start;
    padding: var(--space-4);
    border: var(--border-width-1) solid var(--color-border-soft);
    border-radius: var(--radius-lg);
    background: var(--color-surface-50);
}

.metric-display {
    margin-bottom: var(--space-4);
    color: var(--color-accent-700);
    font-size: var(--font-size-700);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
}

.pill {
    display: inline-flex;
    align-items: center;
    min-height: var(--pill-height);
    padding-inline: var(--space-4);
    border-radius: var(--radius-pill);
    font-size: var(--font-size-100);
    font-weight: var(--font-weight-semibold);
}

.pill--brand {
    background: var(--color-accent-100);
    color: var(--color-accent-700);
}

.pill--success {
    background: var(--color-leaf-100);
    color: var(--color-success-700);
}

.data-table {
    min-width: var(--data-table-min-width);
}

.data-table th {
    background: var(--color-surface-50);
    color: var(--color-text-900);
    font-weight: var(--font-weight-semibold);
}

.cards--dense {
    gap: var(--space-5);
}

.home-hero {
    align-items: stretch;
}

.hero-banner {
    display: grid;
    gap: var(--space-5);
}

.hero-banner__aside .card__body {
    display: grid;
    align-items: center;
}

.chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.pill--sun {
    background: var(--color-warning-100);
    color: var(--color-warning-700);
}

.metric-grid {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: 1fr;
}

.metric-card {
    display: grid;
    gap: var(--space-2);
    padding: var(--space-4);
    border: var(--border-width-1) solid var(--color-border-soft);
    border-radius: var(--radius-lg);
    background: linear-gradient(180deg, var(--color-surface-0), var(--color-brand-050));
}

.metric-card__value {
    color: var(--color-brand-700);
    font-size: var(--font-size-600);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
}

.metric-card__label {
    color: var(--color-text-500);
    font-size: var(--font-size-100);
}

.section-surface {
    min-width: var(--space-0);
    padding: var(--space-6);
    border: var(--border-width-1) solid var(--color-border-soft);
    border-radius: var(--radius-xl);
    background: linear-gradient(180deg, var(--color-surface-0), var(--color-surface-50));
    box-shadow: var(--shadow-card);
}

.page-hero,
.page-panel {
    min-width: var(--space-0);
    border: var(--border-width-1) solid var(--color-border-soft);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-card);
}

.page-hero {
    display: grid;
    gap: var(--space-3);
    padding: var(--space-6);
    background: linear-gradient(160deg, color-mix(in srgb, var(--color-surface-0) 84%, var(--color-sand-100)), color-mix(in srgb, var(--color-brand-050) 72%, var(--color-accent-100)) 72%, var(--color-surface-0));
}

.page-panel {
    display: grid;
    gap: var(--space-4);
    padding: var(--space-5);
    background: linear-gradient(180deg, var(--color-surface-0), var(--color-surface-50));
}

.page-panel--center {
    text-align: center;
}

.page-panel--info {
    background: linear-gradient(180deg, var(--color-info-200), var(--color-surface-0));
}

.prose-flow {
    display: grid;
    gap: var(--space-3);
}

.prose-flow > * {
    margin-bottom: var(--space-0);
}

.content-grid {
    display: grid;
    gap: var(--space-5);
}

.data-grid {
    display: grid;
    gap: var(--space-0);
    overflow: hidden;
    border: var(--border-width-1) solid var(--color-border-soft);
    border-radius: var(--radius-lg);
    background: var(--color-surface-0);
}

.data-grid__row {
    display: grid;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border-top: var(--border-width-1) solid var(--color-border-soft);
}

.data-grid__row:first-child {
    border-top: 0;
}

.data-grid__row > * {
    min-width: var(--space-0);
}

.panel-list {
    display: grid;
    gap: var(--space-0);
    margin-bottom: var(--space-0);
    padding-left: var(--space-0);
    list-style: none;
}

.panel-list li {
    padding-block: var(--space-3);
    border-top: var(--border-width-1) solid var(--color-border-soft);
}

.panel-list li:first-child {
    border-top: 0;
    padding-top: var(--space-0);
}

.panel-list li:last-child {
    padding-bottom: var(--space-0);
}

.media-frame {
    display: grid;
    gap: var(--space-3);
}

.preview-image {
    width: 100%;
    border: var(--border-width-1) solid var(--color-border-soft);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
}

.hidden {
    display: none;
}

.text-danger {
    color: var(--color-danger-500);
}

.link-grid,
.link-list {
    display: grid;
    gap: var(--space-3);
}

.link-grid {
    grid-template-columns: 1fr;
}

.link-tile {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    min-height: var(--size-48);
    padding: var(--space-3) var(--space-4);
    border: var(--border-width-1) solid var(--color-border-soft);
    border-radius: var(--radius-lg);
    background: linear-gradient(180deg, var(--color-surface-0), var(--color-brand-050));
    color: var(--color-text-900);
    font-weight: var(--font-weight-medium);
    text-decoration: none;
    transition:
        transform var(--duration-fast) var(--timing-standard),
        border-color var(--duration-base) var(--timing-standard),
        box-shadow var(--duration-base) var(--timing-standard),
        color var(--duration-base) var(--timing-standard);
}

.link-tile:hover {
    color: var(--color-brand-700);
    border-color: var(--color-brand-300);
    box-shadow: var(--shadow-card);
    transform: translateY(calc(var(--size-1) * -1));
}

.link-tile--disabled {
    justify-content: flex-start;
}

@media (min-width: 768px) {
    .page-hero {
        padding: var(--space-8);
    }

    .page-panel {
        padding: var(--space-6);
    }

    .content-grid--2 {
        grid-template-columns: repeat(2, minmax(var(--space-0), 1fr));
    }

    .data-grid__row--2 {
        grid-template-columns: minmax(var(--size-160), 1fr) minmax(var(--space-0), 1fr);
        align-items: start;
    }

    .data-grid__row--3 {
        grid-template-columns: minmax(var(--size-160), 1fr) minmax(var(--size-160), 1fr) minmax(var(--space-0), 2fr);
        align-items: start;
    }

    .preview-grid,
    .swatch-grid,
    .metric-grid,
    .link-grid {
        grid-template-columns: repeat(2, minmax(var(--space-0), 1fr));
    }
}

@media (min-width: 1024px) {
    .content-grid--3 {
        grid-template-columns: repeat(3, minmax(var(--space-0), 1fr));
    }

    .cards,
    .auto-grid--cards,
    .auto-grid--panels,
    .swatch-grid,
    .preview-grid,
    .link-grid {
        grid-template-columns: repeat(2, minmax(var(--space-0), 1fr));
    }

    .metric-grid {
        grid-template-columns: repeat(3, minmax(var(--space-0), 1fr));
    }
}

@media (min-width: 1280px) {
    .home-hero {
        grid-template-columns: minmax(var(--space-0), 2fr) minmax(var(--size-240), 1fr);
    }
}

@media (min-width: 1280px) {
    .hero-grid {
        grid-template-columns: minmax(var(--space-0), var(--hero-copy-width)) minmax(var(--space-0), var(--hero-panel-width));
        justify-content: space-between;
    }

    .cards,
    .auto-grid--cards,
    .auto-grid--panels,
    .swatch-grid,
    .preview-grid {
        grid-template-columns: repeat(3, minmax(var(--space-0), 1fr));
    }

    .link-grid {
        grid-template-columns: repeat(2, minmax(var(--space-0), 1fr));
    }

    .auto-grid--split {
        grid-template-columns: repeat(2, minmax(var(--space-0), 1fr));
    }
}

@media (max-width: 767px) {
    .token-row {
        grid-template-columns: 1fr;
    }
}