/*
 * Iron & Frost — a Threadbound theme (docs/THEMES.md).
 * Grim northern court: cold stone and forged iron, blood-red wax seals, old gold, carved capitals. Light mode is aged
 * parchment by candlelight. Tokens are set for dark and light; decoration never applies in high-contrast mode.
 * Text colours, faint text and table headers included, meet WCAG AA (4.5:1) on the page, card and input backgrounds.
 */

@font-face { font-family: "Cinzel"; src: url("fonts/cinzel-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Cinzel"; src: url("fonts/cinzel-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Cinzel"; src: url("fonts/cinzel-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

/* ------------------------------------------------------------------ dark and light (high contrast stays untouched) */
:root[data-style="ironfrost"]:not([data-theme="contrast"]) {
  --font-heading: "Cinzel", "Trajan Pro", Optima, "Palatino Linotype", "Book Antiqua", Georgia, serif;
  --radius: 3px;
  --radius-lg: 5px;
}

/* ------------------------------------------------------------------ dark: stone, iron, frost */
:root[data-style="ironfrost"]:not([data-theme="light"]):not([data-theme="contrast"]) {
  --bg: #0d0f12;
  --surface: #161a1f;
  --surface-2: #1d2228;
  --surface-3: #262c33;
  --border: #353b44;
  --text: #e7e2d6;
  --text-muted: #a9a499;
  --text-faint: #928e84;
  --accent: #9b1c1c;
  --accent-strong: #bd2b2b;
  --on-accent: #f4e8cc;
  --link: #c9a34a;
  --focus: #cfe3f0;
  --gold: #c9a34a;
  --bronze: #c9a34a;
  --danger: #b23a3a;
  --danger-bg: #2c1414;
  --success: #5e8a5a;
  --success-bg: #162219;
  --info: #6f8fa8;
  --info-bg: #151e27;
  --shadow: 0 2px 0 rgba(0, 0, 0, .45), 0 12px 26px rgba(0, 0, 0, .4);
  --if-iron: linear-gradient(180deg, #2b3038, #1f2329);
  --if-rivet: #5d636c;
  --if-frame: rgba(201, 163, 74, .13);
  --if-rule: rgba(201, 163, 74, .22);
  --if-seal: radial-gradient(circle at 50% 30%, #b02626 0%, #7a1616 62%, #5a1010 100%);
  --if-seal-hover: radial-gradient(circle at 50% 30%, #c83030 0%, #8c1a1a 62%, #651212 100%);
  --if-ground: radial-gradient(ellipse 120% 55% at 50% -10%, rgba(185, 214, 232, .08), transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .045 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --if-topbar: linear-gradient(180deg, #1b1f25, #111418);
  --if-nav: #111317;
  --if-input: #101216;
  --if-heading: #ece6d8;
  --if-th: #17191e;
}

/* ------------------------------------------------------------------ light: parchment and ink */
:root[data-style="ironfrost"][data-theme="light"] {
  --bg: #e4d6b6;
  --surface: #f1e7cf;
  --surface-2: #e9dcbd;
  --surface-3: #dccaa2;
  --border: #b49d70;
  --text: #2a2016;
  --text-muted: #4d4032;
  --text-faint: #635440;
  --accent: #7d1414;
  --accent-strong: #5e0e0e;
  --on-accent: #f7edd5;
  --link: #6e4a12;
  --focus: #7d1414;
  --gold: #6e5418;
  --bronze: #6e5418;
  --danger-bg: #f0d4cf;
  --success-bg: #dce6d2;
  --info-bg: #dbe3ea;
  --shadow: 0 1px 0 rgba(80, 60, 30, .15), 0 8px 18px rgba(80, 60, 30, .12);
  --if-iron: linear-gradient(180deg, #efe4c9, #e2d3b0);
  --if-rivet: #8c7550;
  --if-frame: rgba(110, 74, 18, .18);
  --if-rule: rgba(110, 74, 18, .28);
  --if-seal: radial-gradient(circle at 50% 30%, #9a1c1c 0%, #6e1212 65%, #520c0c 100%);
  --if-seal-hover: radial-gradient(circle at 50% 30%, #ad2222 0%, #7d1414 65%, #5e0e0e 100%);
  --if-ground: radial-gradient(ellipse 120% 70% at 50% 0%, rgba(255, 248, 225, .55), transparent 65%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .25 0 0 0 0 .1 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --if-topbar: linear-gradient(180deg, #e9dbb9, #ddcba2);
  --if-nav: #e8dab8;
  --if-input: #f8f1df;
  --if-heading: #241a10;
  --if-th: #e4d4b0;
}

/* ------------------------------------------------------------------ decoration (never in high contrast) */
:root[data-style="ironfrost"]:not([data-theme="contrast"]) body {
  background: var(--if-ground), var(--bg);
  background-attachment: fixed;
}

/* Carved capitals for headings and the brand. */
:root[data-style="ironfrost"]:not([data-theme="contrast"]) :is(h1, h2, h3, .brand, .boot) { letter-spacing: .05em; }
:root[data-style="ironfrost"]:not([data-theme="contrast"]) h1 { color: var(--if-heading); font-weight: 700; }
:root[data-style="ironfrost"]:not([data-theme="contrast"]) .page-head h1::after {
  content: ""; display: block; width: 88px; height: 2px; margin-top: 10px;
  background: linear-gradient(90deg, var(--gold), transparent);
}
:root[data-style="ironfrost"]:not([data-theme="contrast"]) :is(.card h2, .card__head h2, dialog h2) { color: var(--gold); font-weight: 600; font-size: 1.22rem; }
:root[data-style="ironfrost"]:not([data-theme="contrast"]) .card__head { padding-bottom: 9px; border-bottom: 1px solid var(--if-rule); }
:root[data-style="ironfrost"]:not([data-theme="contrast"]) :is(.brand__mark, .boot__mark) { color: var(--gold); }
:root[data-style="ironfrost"]:not([data-theme="contrast"]) .brand { font-weight: 700; text-transform: uppercase; font-size: 1.05rem; }
@media (max-width: 600px) { :root[data-style="ironfrost"]:not([data-theme="contrast"]) .brand { font-size: .88rem; letter-spacing: .02em; } }

/* Frame: an iron bar along the top, a dark keep down the side. */
:root[data-style="ironfrost"]:not([data-theme="contrast"]) .topbar {
  background: var(--if-topbar); border-bottom-color: var(--border); box-shadow: 0 1px 0 var(--if-rule);
}
:root[data-style="ironfrost"]:not([data-theme="contrast"]) .sidenav { background: var(--if-nav); }
:root[data-style="ironfrost"]:not([data-theme="contrast"]) .sidenav h4 { font-family: var(--font-heading); color: var(--gold); letter-spacing: .1em; opacity: .85; }
:root[data-style="ironfrost"]:not([data-theme="contrast"]) .sidenav a[aria-current="page"] {
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 22%, transparent), transparent);
  box-shadow: inset 3px 0 0 var(--accent);
}

/* Cards: plate with a hairline of old gold inside and a rivet at each corner. */
:root[data-style="ironfrost"]:not([data-theme="contrast"]) :is(.card, dialog) {
  position: relative;
  background:
    radial-gradient(circle at 9px 9px, var(--if-rivet) 0 1.7px, transparent 2.6px),
    radial-gradient(circle at calc(100% - 9px) 9px, var(--if-rivet) 0 1.7px, transparent 2.6px),
    radial-gradient(circle at 9px calc(100% - 9px), var(--if-rivet) 0 1.7px, transparent 2.6px),
    radial-gradient(circle at calc(100% - 9px) calc(100% - 9px), var(--if-rivet) 0 1.7px, transparent 2.6px),
    linear-gradient(180deg, rgba(255, 255, 255, .025), transparent 45%),
    var(--surface);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), var(--shadow);
}
:root[data-style="ironfrost"]:not([data-theme="contrast"]) .card::before {
  content: ""; position: absolute; inset: 4px; border: 1px solid var(--if-frame); border-radius: 2px; pointer-events: none;
}
:root[data-style="ironfrost"]:not([data-theme="contrast"]) .stat { background: var(--if-iron); }

/* Controls: iron buttons, and the main action pressed into red wax. */
:root[data-style="ironfrost"]:not([data-theme="contrast"]) .btn:not(.btn--primary, .btn--danger, .btn--ghost) { background: var(--if-iron); }
:root[data-style="ironfrost"]:not([data-theme="contrast"]) .btn--primary {
  background: var(--if-seal); border-color: color-mix(in srgb, var(--accent) 60%, #000);
  text-shadow: 0 1px 0 rgba(0, 0, 0, .35); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 1px 2px rgba(0, 0, 0, .45);
  font-family: var(--font-heading); letter-spacing: .06em;
}
:root[data-style="ironfrost"]:not([data-theme="contrast"]) .btn--primary:hover { background: var(--if-seal-hover); }
:root[data-style="ironfrost"]:not([data-theme="contrast"]) :is(input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="search"], input[type="url"], input[type="date"], select, textarea, .rte) {
  background: var(--if-input);
}
:root[data-style="ironfrost"]:not([data-theme="contrast"]) .tabs button[aria-selected="true"] { border-bottom-color: var(--accent); }
:root[data-style="ironfrost"]:not([data-theme="contrast"]) .pill-nav a[aria-current="page"] { border-color: var(--accent); }
:root[data-style="ironfrost"]:not([data-theme="contrast"]) th { background: var(--if-th); color: var(--gold); font-family: var(--font-heading); font-weight: 600; letter-spacing: .08em; }
:root[data-style="ironfrost"]:not([data-theme="contrast"]) .meter:not(.meter--danger, .meter--success) > span { background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 70%, #000), var(--accent-strong)); }