/*
 * ITNC theme: plum banner, yellow-gold titles, antique-gold rules on cream paper.
 *
 * Every colour is an RGB channel triplet so Tailwind's opacity modifiers keep working
 * (bg-brand-700/60 → rgb(var(--tnc-brand-700) / 0.6)). index.html maps the Tailwind
 * palettes brand, gold, slate, paper, crimson and navy onto these variables, so a
 * palette change here re-themes every page without touching the .razor files.
 */
:root {
    /* Plum: banners, primary buttons, active navigation */
    --tnc-brand-50: 251 245 248;
    --tnc-brand-100: 245 232 239;
    --tnc-brand-200: 235 208 222;
    --tnc-brand-300: 219 170 195;
    --tnc-brand-400: 196 124 161;
    --tnc-brand-500: 169 88 131;
    --tnc-brand-600: 139 63 107;
    --tnc-brand-700: 116 51 88;
    --tnc-brand-800: 95 43 73;
    --tnc-brand-900: 79 38 62;
    --tnc-brand-950: 46 18 34;

    /* Gold: bright yellow titles (300-500) deepening to antique gold rules (600-950) */
    --tnc-gold-50: 253 251 232;
    --tnc-gold-100: 250 245 196;
    --tnc-gold-200: 244 235 140;
    --tnc-gold-300: 237 224 82;
    --tnc-gold-400: 230 211 28;
    --tnc-gold-500: 205 181 26;
    --tnc-gold-600: 184 150 79;
    --tnc-gold-700: 150 119 58;
    --tnc-gold-800: 118 92 46;
    --tnc-gold-900: 92 72 37;
    --tnc-gold-950: 58 45 22;

    /* Warm neutrals, replacing Tailwind's cool slate so greys sit well on cream paper */
    --tnc-slate-50: 250 249 247;
    --tnc-slate-100: 245 243 240;
    --tnc-slate-200: 231 228 224;
    --tnc-slate-300: 214 209 204;
    --tnc-slate-400: 168 160 154;
    --tnc-slate-500: 120 112 106;
    --tnc-slate-600: 89 82 77;
    --tnc-slate-700: 68 62 58;
    --tnc-slate-800: 44 38 36;
    --tnc-slate-900: 30 25 24;
    --tnc-slate-950: 14 11 10;

    /* Accents from the printed page */
    --tnc-paper: 251 248 243;
    --tnc-crimson: 193 39 45;
    --tnc-navy: 43 57 144;
}

/* Page */
html,
body {
    background-color: rgb(var(--tnc-paper));
}

::selection {
    background-color: rgb(var(--tnc-brand-600));
    color: #fff;
}

/* Plum banner: the title block from the printed page. Pair with text-gold-400 headings. */
.tnc-banner {
    background-color: rgb(var(--tnc-brand-700));
    background-image: linear-gradient(135deg, rgb(var(--tnc-brand-600)) 0%, rgb(var(--tnc-brand-700)) 55%, rgb(var(--tnc-brand-800)) 100%);
    border: 1px solid rgb(var(--tnc-gold-600) / 0.55);
    color: #fff;
}

/* Full-screen plum backdrop for the pre-hydration loading screen */
.tnc-splash {
    background-color: rgb(var(--tnc-brand-800));
    background-image: radial-gradient(circle at 50% 35%, rgb(var(--tnc-brand-600)) 0%, rgb(var(--tnc-brand-800)) 60%, rgb(var(--tnc-brand-950)) 100%);
    color: #fff;
}

/* Thin antique-gold rule */
.tnc-rule {
    height: 0;
    border: 0;
    border-top: 1px solid rgb(var(--tnc-gold-600));
}

/*
 * Gold page frame: a thin rule with a faint inner second rule, and L-shaped corner
 * flourishes ending in a small bead, top-left and bottom-right, echoing the
 * printed page's botanical border without reproducing its artwork.
 */
.tnc-frame {
    position: relative;
    background-color: rgb(255 253 249);
    border: 1px solid rgb(var(--tnc-gold-600) / 0.7);
    box-shadow: inset 0 0 0 5px rgb(255 253 249), inset 0 0 0 6px rgb(var(--tnc-gold-600) / 0.25);
}

.tnc-frame::before,
.tnc-frame::after {
    content: "";
    position: absolute;
    width: 2.75rem;
    height: 2.75rem;
    pointer-events: none;
    border-color: rgb(var(--tnc-gold-600));
    border-style: solid;
    border-width: 0;
    background-repeat: no-repeat;
    background-size: 7px 7px;
    background-image: radial-gradient(circle, rgb(var(--tnc-gold-600)) 0 3px, transparent 3.5px);
}

.tnc-frame::before {
    top: -0.375rem;
    left: -0.375rem;
    border-top-width: 2px;
    border-left-width: 2px;
    border-top-left-radius: 0.75rem;
    background-position: 0.5rem 0.5rem;
}

.tnc-frame::after {
    bottom: -0.375rem;
    right: -0.375rem;
    border-bottom-width: 2px;
    border-right-width: 2px;
    border-bottom-right-radius: 0.75rem;
    background-position: calc(100% - 0.5rem) calc(100% - 0.5rem);
}