/* Pixel Quest brand tokens — the single source of truth. Rules: brand/BRAND.md
   Load fonts first:
   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=VT323&family=Figtree:wght@400;600;700&display=swap"> */
:root{
  /* colour: the home page palette (web/src/static/style.css), light by default */
  --pq-bg:#f5f1e8;      /* page background */
  --pq-panel:#fffdf8;   /* cards, cells, inputs */
  --pq-hover:#d9d3c5;   /* hover on panel */
  --pq-deep:#ebe5d6;    /* inset areas: logs, code, footers */
  --pq-text:#121212;    /* main text */
  --pq-label:#5d5a54;   /* labels, weekday names, quiet text */
  --pq-yellow:#ffc93c;  /* primary action only */
  --pq-yellow-dk:#b38f00; /* yellow button bottom edge */
  --pq-on-yellow:#121212; /* text on yellow, both themes */
  --pq-hot:#ff4d2e;     /* title shadow, today, alerts */
  --pq-mint:#19c39a;    /* success, selected, progress */
  --pq-red:#e60000;     /* unavailable days: cross-out on festive days + personal days off */

  /* type */
  --pq-font-pixel:"VT323", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --pq-font-body:"Figtree", "Segoe UI", system-ui, sans-serif;
  --pq-fs-sm:1.05rem; --pq-fs-md:1.35rem; --pq-fs-lg:1.9rem; --pq-fs-xl:clamp(2.4rem, 7vw, 4rem);

  /* grid: everything snaps to 4px */
  --pq-u:4px;
  --pq-px:3px;          /* pixel border thickness */
  color-scheme:light dark;
}
@media (prefers-color-scheme: dark){
  :root{--pq-bg:#111113; --pq-panel:#1a1a1d; --pq-hover:#2c2c30; --pq-deep:#0b0b0d; --pq-text:#f2eee6; --pq-label:#a29e96; color-scheme:dark}
}

/* put .pq on <body> (stand-alone page) or on a full-width section inside an existing site */
.pq{background:var(--pq-bg); color:var(--pq-text); font:400 1rem/1.6 var(--pq-font-body)}

/* stepped "pixel" frame: notched corners, never border-radius */
.pq-frame{box-shadow:0 calc(-1*var(--pq-px)) 0 0 var(--f, var(--pq-text)), 0 var(--pq-px) 0 0 var(--f, var(--pq-text)),
  calc(-1*var(--pq-px)) 0 0 0 var(--f, var(--pq-text)), var(--pq-px) 0 0 0 var(--f, var(--pq-text)); margin:var(--pq-px)}

.pq-title{font:400 var(--pq-fs-lg)/1 var(--pq-font-pixel); letter-spacing:.06em; color:var(--pq-text); text-shadow:3px 3px 0 var(--pq-hot); text-transform:uppercase}

.pq-btn{font:400 var(--pq-fs-md)/1 var(--pq-font-pixel); background:var(--pq-yellow); color:var(--pq-on-yellow); border:0; padding:var(--pq-u) calc(3*var(--pq-u)); cursor:pointer;
  box-shadow:0 -3px 0 0 var(--pq-yellow), 0 3px 0 0 var(--pq-yellow-dk), -3px 0 0 0 var(--pq-yellow), 3px 0 0 0 var(--pq-yellow)}
.pq-btn:active{transform:translateY(3px); box-shadow:none}
.pq-btn--ghost{background:var(--pq-panel); color:var(--pq-text); box-shadow:0 -3px 0 0 var(--pq-panel), 0 3px 0 0 var(--pq-deep), -3px 0 0 0 var(--pq-panel), 3px 0 0 0 var(--pq-panel)}

.pq-panel{background:var(--pq-deep); padding:calc(3*var(--pq-u)) calc(3.5*var(--pq-u))}

.pq-bar{height:12px; background:var(--pq-panel); position:relative}
.pq-bar > i{position:absolute; inset:0 auto 0 0; background:repeating-linear-gradient(90deg, var(--pq-mint) 0 10px, transparent 10px 12px)}

/* status gems: 5px squares (8px in lists) */
.pq-gem{display:inline-block; width:5px; height:5px; background:var(--c)}
.t-call{--c:var(--pq-label)} .t-review{--c:var(--pq-yellow)} .t-launch{--c:var(--pq-hot)} .t-done{--c:var(--pq-mint)}

/* selected / current: blinking mint cursor */
.pq-cursor{outline:3px solid var(--pq-mint); outline-offset:0; animation:pq-blink 1s steps(1) infinite}
@keyframes pq-blink{50%{outline-color:transparent}}

.pq :focus-visible{outline:3px solid var(--pq-text); outline-offset:2px}
@media (prefers-reduced-motion: reduce){*{animation:none!important; transition:none!important}}