@import url("https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@600;700;800;900&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500;600&display=swap");

:root{
  color-scheme: light;
  --color-primary: #C83B22;
  --color-primary-foreground: #FFF8E8;
  --color-secondary: #2F6B45;
  --color-secondary-foreground: #FFFFFF;
  --color-accent: #F2B544;
  --color-accent-foreground: #20201D;
  --color-background: #FFF8E8;
  --color-surface: #FFFFFF;
  --color-foreground: #20201D;
  --color-muted: #6F726C;
  --color-border: #DDD8CC;
  --shadow: rgba(32,32,29,0.10);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --color-primary: #F06445;
    --color-primary-foreground: #18110F;
    --color-secondary: #65B985;
    --color-secondary-foreground: #0E1A13;
    --color-accent: #F2B544;
    --color-accent-foreground: #20201D;
    --color-background: #121816;
    --color-surface: #1B2420;
    --color-foreground: #FFF8E8;
    --color-muted: #AEB8B0;
    --color-border: #36423C;
    --shadow: rgba(0,0,0,0.4);
  }
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --color-primary: #F06445;
  --color-primary-foreground: #18110F;
  --color-secondary: #65B985;
  --color-secondary-foreground: #0E1A13;
  --color-accent: #F2B544;
  --color-accent-foreground: #20201D;
  --color-background: #121816;
  --color-surface: #1B2420;
  --color-foreground: #FFF8E8;
  --color-muted: #AEB8B0;
  --color-border: #36423C;
  --shadow: rgba(0,0,0,0.4);
}

*{ box-sizing:border-box; }
html,body{ margin:0; }
body{
  background: var(--color-background);
  color: var(--color-foreground);
  font-family: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
.mono{ font-family: "IBM Plex Mono", ui-monospace, monospace; font-variant-numeric: tabular-nums; }
h1,h2,h3{ text-wrap: balance; margin: 0; font-family: "Be Vietnam Pro", "Segoe UI", system-ui, sans-serif; font-weight: 800; }

.page{ max-width: 760px; margin: 0 auto; padding: 2.5rem 1.25rem 4rem; }

.brand-logo{ height: 34px; width: auto; margin-bottom: 1.25rem; }

.crumb{
  display:inline-flex; align-items:center; gap:0.4rem;
  font-family:"IBM Plex Mono",monospace; font-size:0.78rem; letter-spacing:0.02em;
  color: var(--color-primary); text-decoration:none; margin-bottom:1.5rem;
}
.crumb:hover{ text-decoration:underline; }

.hero{ padding-bottom: 1.75rem; border-bottom: 2px dashed var(--color-border); margin-bottom: 2.25rem; }
.eyebrow{
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-primary); margin: 0 0 0.75rem;
}
h1{ font-size: clamp(1.5rem, 4.2vw, 2.05rem); font-weight: 800; letter-spacing: -0.01em; }
.lede{ font-size: 1.02rem; color: var(--color-muted); max-width: 42ch; margin: 0.9rem 0 0; }

.meta{ display:flex; flex-wrap:wrap; gap: 1.25rem 2rem; margin: 1.25rem 0 0; padding: 0; }
.meta > div{ display:flex; flex-direction:column; gap: 0.15rem; }
.meta dt{ font-family:"IBM Plex Mono",monospace; font-size:0.68rem; letter-spacing:0.06em; text-transform:uppercase; color:var(--color-muted); }
.meta dd{ margin:0; font-weight:600; font-size:0.92rem; }

.tag{
  display:inline-flex; align-items:center; font-family:"IBM Plex Mono",monospace; font-size:0.66rem; font-weight:600;
  padding: 0.15rem 0.45rem; border-radius: 4px; letter-spacing:0.03em;
}
.tag--ok{ background: var(--color-secondary); color: var(--color-secondary-foreground); }
.tag--warn{ background: var(--color-accent); color: var(--color-accent-foreground); }

.card{
  background: var(--color-surface);
  border-top: 2px dashed var(--color-border);
  border-bottom: 2px dashed var(--color-border);
  border-left: 3px solid var(--color-border);
  border-radius: 10px;
  padding: 1.1rem 1.25rem 1.25rem;
  box-shadow: 0 1px 0 var(--shadow);
}

.chiplist{ list-style:none; display:flex; flex-wrap:wrap; gap:0.45rem; margin:0; padding:0; }
.chiplist li{
  font-size:0.82rem; padding: 0.28rem 0.6rem; border-radius:8px; border:1px solid var(--color-border);
  background: var(--color-background); color: var(--color-foreground);
}

.ticket{ border-radius:10px; padding: 1.4rem 1.4rem 1.5rem; margin-bottom:1.25rem; }
.ticket--void{ background: transparent; border: 2px dashed var(--color-border); color: var(--color-muted); }
.ticket--void h2{ color: var(--color-muted); }
.ticket--void .chiplist li{ border-style:dashed; }
.ticket--open{
  background: var(--color-surface); border-left: 3px solid var(--color-primary);
  border-top: 2px dashed var(--color-border); border-bottom: 2px dashed var(--color-border);
  box-shadow: 0 1px 0 var(--shadow);
}
.ticket-code{ font-family:"IBM Plex Mono",monospace; font-size:0.7rem; letter-spacing:0.06em; text-transform:uppercase; color: var(--color-primary); margin:0 0 0.5rem; }
.ticket--void .ticket-code{ color: var(--color-muted); }
.ticket h2{ font-size:1.2rem; margin-bottom:0.5rem; }
.ticket > p{ color: var(--color-muted); font-size:0.95rem; }

code{ font-family:"IBM Plex Mono",monospace; font-size:0.85em; background: var(--color-background); border:1px solid var(--color-border); border-radius:4px; padding:0.05em 0.35em; }

.btn{
  display:inline-flex; align-items:center; gap:0.5rem; font-family:"Be Vietnam Pro",sans-serif; font-weight:700;
  font-size:0.92rem; padding:0.65rem 1.1rem; border-radius:10px; border:2px solid var(--color-primary);
  background: var(--color-primary); color: var(--color-primary-foreground); text-decoration:none; cursor:pointer;
  min-height:44px;
}
.btn:hover{ filter:brightness(1.05); }
.btn--ghost{ background:transparent; color:var(--color-primary); }

footer.site-footer{ padding-top:1.25rem; border-top:2px dashed var(--color-border); margin-top:2.5rem; }
footer.site-footer p{ margin:0; font-size:0.82rem; color: var(--color-muted); }
footer.site-footer a{ color: var(--color-primary); text-decoration:none; border-bottom:1px dashed var(--color-primary); }
footer.site-footer a:hover{ text-decoration:none; border-bottom-style:solid; }

.prose h2{ font-size:1.25rem; font-weight:700; margin: 2rem 0 0.75rem; padding-top:1rem; border-top:1px dashed var(--color-border); }
.prose h2:first-child{ border-top:none; padding-top:0; margin-top:0; }
.prose h3{ font-size:1.02rem; font-weight:700; margin:1.25rem 0 0.5rem; color: var(--color-primary); }
.prose p{ margin: 0 0 0.9rem; }
.prose ul, .prose ol{ margin: 0 0 0.9rem; padding-left:1.3rem; }
.prose li{ margin-bottom:0.35rem; }
.prose table{ width:100%; border-collapse:collapse; margin: 0.5rem 0 1.1rem; font-size:0.92rem; }
.prose caption{ display:none; }
.prose th, .prose td{ text-align:left; padding:0.5rem 0.7rem; border-bottom:1px solid var(--color-border); }
.prose th{ font-family:"IBM Plex Mono",monospace; font-size:0.7rem; letter-spacing:0.04em; text-transform:uppercase; color:var(--color-muted); }
.prose .tablewrap{ overflow-x:auto; }
.prose strong{ font-weight:700; }
.prose .note{ font-size:0.85rem; color:var(--color-muted); }

@media (prefers-reduced-motion: no-preference){
  .card{ transition: box-shadow 0.15s ease, transform 0.15s ease; }
  .card:hover{ box-shadow: 0 3px 10px var(--shadow); transform: translateY(-1px); }
}