/* Shared design tokens, self-hosted fonts and base styles for every page.
   The site is light and warm on purpose (an evening desk under a brass lamp). It does not follow the
   visitor's dark-mode setting: a deliberate dark theme can come later, as a separate change.
   Every colour used on the site comes from the tokens below; contrast of text is at least 4.5:1. */

@font-face {
    font-family: 'Lora';
    src: url('/fonts/lora-latin-400-normal.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Lora';
    src: url('/fonts/lora-latin-400-italic.woff2') format('woff2');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Lora';
    src: url('/fonts/lora-latin-700-normal.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Nunito';
    src: url('/fonts/nunito-latin-400-normal.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Nunito';
    src: url('/fonts/nunito-latin-600-normal.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Nunito';
    src: url('/fonts/nunito-latin-700-normal.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Caveat';
    src: url('/fonts/caveat-latin-600-normal.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

:root {
    /* Paper and ink */
    --paper: #fbf8f3;
    --card: #fffdf9;
    --letter: #fffbf2;
    --ink: #2b211c;
    --ink-soft: #5b4a40;
    --hairline: #e6dccd;

    /* Accents: terracotta for actions, deep teal for links and focus, gold for light touches only (never text) */
    --terracotta: #b5532f;
    --terracotta-deep: #9a4524;
    --teal: #1f5f63;
    --teal-deep: #184c4f;
    --gold: #c9973f;
    --focus: #1f5f63;
    --on-accent: #ffffff;

    /* Soft tints for placeholders and chips */
    --tint-warm: #f3e5d3;
    --tint-cool: #dde9e5;

    /* Shape and depth: generous radius, warm shadows (never black) */
    --radius: 14px;
    --radius-lg: 20px;
    --shadow-soft: 0 1px 2px rgba(91, 60, 30, 0.08), 0 18px 40px -26px rgba(91, 60, 30, 0.45);

    /* Type: Lora for headings and reading text, Nunito for interface and body copy, Caveat for one accent */
    --font-serif: 'Lora', Georgia, 'Times New Roman', serif;
    --font-sans: 'Nunito', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    --font-hand: 'Caveat', 'Segoe Print', 'Bradley Hand', cursive;
}

html {
    -webkit-text-size-adjust: 100%;
    color-scheme: light;
}

body {
    margin: 0;
    min-height: 100vh;
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: 17px;
    line-height: 1.6;
    overflow-wrap: break-word;
    -webkit-font-smoothing: antialiased;
    background-color: var(--paper);
    /* A faint lamp glow from the top right and a paper warmth from the top; no texture images. */
    background-image:
        radial-gradient(60rem 30rem at 92% -8%, rgba(201, 151, 63, 0.16), rgba(201, 151, 63, 0) 70%),
        linear-gradient(180deg, var(--card) 0, var(--paper) 480px);
    background-repeat: no-repeat;
    background-attachment: scroll;
}

h1,
h2,
h3 {
    color: var(--ink);
    font-family: var(--font-serif);
    line-height: 1.2;
    text-wrap: balance;
}

a {
    color: var(--teal);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
}

a:hover {
    color: var(--teal-deep);
}

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

:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 3px;
}

/* The first link on every page: hidden until a keyboard user tabs to it. */
.skip-link {
    position: absolute;
    top: -100px;
    left: 12px;
    z-index: 1100;
    padding: 10px 16px;
    border-radius: 999px;
    background: var(--card);
    color: var(--ink);
    font-weight: 700;
    text-decoration: none;
    box-shadow: var(--shadow-soft);
}

.skip-link:focus {
    top: 12px;
}

/* Error headings (Error.cshtml) */
.text-danger {
    color: #9a2b1f;
}

/* Buttons: terracotta, slightly raised like a wax seal, with a clear focus ring. */
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    padding: 0 24px;
    border: 1px solid var(--terracotta);
    border-radius: 12px;
    background: var(--terracotta);
    color: var(--on-accent);
    font-family: var(--font-sans);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 3px 0 var(--terracotta-deep), 0 12px 22px -14px rgba(154, 69, 36, 0.8);
    transition: background-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.button:hover {
    border-color: var(--terracotta-deep);
    background: var(--terracotta-deep);
    color: var(--on-accent);
}

.button:active {
    transform: translateY(2px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 0 var(--terracotta-deep);
}

.button--secondary {
    border-color: var(--teal);
    background: var(--card);
    color: var(--teal);
    box-shadow: none;
}

.button--secondary:hover {
    border-color: var(--teal-deep);
    background: var(--tint-cool);
    color: var(--teal-deep);
}

.button--secondary:active {
    transform: none;
    box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
    .button {
        transition: none;
    }
}

/* A sunlit room behind every page: warm walls that get a little deeper towards the sides, a soft window light from the top
   right, slow light bands, and (ambient.js) tiny dust motes drifting in the light. It is fixed, sits behind the content
   and never takes clicks. Without scripts you simply get the warm walls. */
.ambient {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
    background:
        radial-gradient(76rem 42rem at 96% -10%, rgba(255, 238, 190, 0.9), rgba(255, 238, 190, 0) 70%),
        radial-gradient(ellipse 72% 85% at 50% 36%, #f9f0df 0%, #f0e0c4 58%, #e4cda8 100%);
}

.ambient__beam {
    position: absolute;
    inset: -20% -10%;
    background: linear-gradient(108deg,
        rgba(255, 244, 208, 0) 36%,
        rgba(255, 244, 208, 0.34) 45%,
        rgba(255, 244, 208, 0) 53%,
        rgba(255, 244, 208, 0.22) 63%,
        rgba(255, 244, 208, 0) 72%);
    filter: blur(14px);
    transform-origin: 80% 0;
    animation: ambient-beam 52s ease-in-out infinite alternate;
}

.ambient__canvas {
    position: absolute;
    inset: 0;
}

@keyframes ambient-beam {
    from {
        transform: translateX(-3%) rotate(-1deg);
        opacity: 0.7;
    }

    to {
        transform: translateX(4%) rotate(1.4deg);
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ambient__beam {
        animation: none;
    }
}

@media print {
    .ambient {
        display: none;
    }
}