@import url("design-tokens.css");

html { min-width: 320px; min-height: 100%; background: var(--nimue-cream); scroll-behavior: smooth; }
body { min-height: 100vh; margin: 0; overflow-x: hidden; color: var(--body-color); background: var(--color-page-bg); font-family: var(--font-body); font-size: var(--font-size-body); font-weight: 300; -webkit-font-smoothing: antialiased; }
*, *::before, *::after { box-sizing: border-box; }
h1, h2, h3, h4, h5, h6 { color: var(--heading-color); font-family: var(--font-display); font-weight: 400; }
h1 { font-size: var(--font-size-h1); line-height: var(--line-height-heading-tight); }
h2 { font-size: var(--font-size-h2); line-height: var(--line-height-heading); }
h3 { font-size: var(--font-size-h3); line-height: var(--line-height-heading); }
h4 { font-size: var(--font-size-h4); line-height: var(--line-height-heading); }
blockquote { font-family: var(--font-display); font-size: var(--font-size-h3); font-weight: 400; line-height: var(--line-height-heading); }
p, li, label, input, textarea, select, button { font-family: var(--font-body); }
button, input, textarea, select { font-size: inherit; }
strong, b { font-weight: 600; }
h1:focus { outline: none; }
a { color: inherit; }
.booking-anchor { scroll-margin-top: 7rem; }

.section-light { color: var(--section-text-default); background: var(--section-light-background); }
.section-soft { color: var(--section-text-default); background: var(--section-soft-background); }
.section-cream { color: var(--section-text-default); background: var(--section-bg-cream); }
.section-white { color: var(--section-text-default); background: var(--section-bg-white); }
.section-sage-soft { color: var(--section-text-default); background: var(--section-bg-sage-soft); }
.section-sage-pale { color: var(--section-text-default); background: var(--section-bg-sage-pale); }
.section-soft-gradient { color: var(--body-color); background: linear-gradient(135deg, var(--section-bg-cream), var(--section-bg-sage-pale)); }
.section-sage { color: var(--section-sage-text); background: var(--section-sage-background); }
.section-olive { color: var(--body-on-dark); background: var(--color-brand-olive); }
.section-dark { color: var(--body-on-dark); background: var(--section-dark-background); }
.section-transparent { color: var(--body-color); background: transparent; }
.section-sage h1, .section-sage h2, .section-sage h3 { color: var(--section-sage-heading); }
.section-olive h1, .section-olive h2, .section-olive h3, .section-dark h1, .section-dark h2, .section-dark h3 { color: var(--heading-on-dark); }
.section-sage .eyebrow, .section-sage .section-heading__eyebrow { color: var(--section-sage-eyebrow); }
.section-olive .eyebrow, .section-olive .section-heading__eyebrow, .section-dark .eyebrow, .section-dark .section-heading__eyebrow { color: var(--eyebrow-on-dark); }

.nimue-card { color: var(--card-text); background: var(--card-background); border: 1px solid var(--card-border); border-radius: var(--card-radius); box-shadow: var(--card-shadow); }
.nimue-card h2, .nimue-card h3, .nimue-card h4 { color: var(--card-heading); }
.nimue-card--image { overflow: hidden; }
.nimue-card--elevated { box-shadow: var(--shadow-elevated); }

#blazor-error-ui { color-scheme: light only; background: var(--status-warning-background); bottom: 0; box-shadow: var(--shadow-subtle); box-sizing: border-box; display: none; left: 0; padding: .6rem 1.25rem .7rem; position: fixed; width: 100%; z-index: 2000; }
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: .75rem; top: .5rem; }
.blazor-error-boundary { padding: 1rem; color: var(--status-error-text); background: var(--status-error-background); }
.blazor-error-boundary::after { content: "An error has occurred."; }

.loading-progress { position: absolute; display: block; width: 8rem; height: 8rem; inset: 20vh 0 auto; margin: 0 auto; }
.loading-progress circle { fill: none; stroke: var(--loading-track); stroke-width: .6rem; transform-origin: 50% 50%; transform: rotate(-90deg); }
.loading-progress circle:last-child { stroke: var(--nimue-sage-dark); stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * .8), 500%; transition: stroke-dasharray .05s ease-in-out; }
.loading-progress-text { position: absolute; text-align: center; font-weight: 600; inset: calc(20vh + 3.25rem) 0 auto .2rem; }
.loading-progress-text::after { content: var(--blazor-load-percentage-text, "Loading"); }

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