/* Persona 5 theme swatch — extracted from
   github.com/ffaneto/persona5-website-theme (src/index.css, src/App.css):
   --p5-black:#0d0d0d --p5-red:#d92323 --p5-dark-red:#732424 --p5-gray:#7b7b7b
   --p5-white:#fff, plus a cyan accent (#00d8ff) used for highlights there.
   Signature language: pure black/red/white, diagonal clip-path "torn" panels,
   bold condensed uppercase type (Bebas Neue, their own documented fallback —
   not their bundled game-extracted font file, which isn't ours to ship). */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Oswald:wght@400;500;600&display=swap');

:root[data-theme="persona5"] {
  --bg: #0d0d0d;
  --surface: #161616;
  --surface-raised: #1e1e1e;
  --border: #000000;
  --text: #ffffff;
  --text-muted: #7b7b7b;
  --accent: #d92323;
  --accent-dim: #d9232326;
  --success: #00d8ff;
  --success-dim: #00d8ff26;
  --danger: #d92323;
  --danger-dim: #d9232333;
  --blocked: #732424;
  --radius: 0px;
  --mono: 'Oswald', var(--mono);
  --display: 'Bebas Neue', sans-serif;
  --body: 'Oswald', sans-serif;
}

[data-theme="persona5"] body {
  background:
    radial-gradient(circle at 15% 15%, rgba(217,35,35,0.25), rgba(13,13,13,0.95) 45%),
    linear-gradient(140deg, #0d0d0d 0%, #201010 55%, #0d0d0d 100%);
}

[data-theme="persona5"] .sidebar {
  background: #0d0d0d;
  border-right: 3px solid var(--accent);
}
[data-theme="persona5"] .brand {
  font-family: var(--display);
  font-size: 22px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-style: italic;
  transform: skewX(-6deg);
  color: #fff;
}
[data-theme="persona5"] .brand .dot { color: var(--accent); }
[data-theme="persona5"] .nav-link {
  font-family: var(--display);
  font-size: 15px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  border-left: 3px solid transparent;
}
[data-theme="persona5"] .nav-link:hover {
  color: var(--accent);
  border-left-color: var(--accent);
}
[data-theme="persona5"] .nav-link.active {
  background: var(--accent);
  color: #fff;
  border-left-color: #fff;
}

[data-theme="persona5"] .page-title {
  font-family: var(--display);
  font-size: 30px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-style: italic;
  transform: skewX(-4deg);
}
[data-theme="persona5"] .page-subtitle {
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 11px;
  color: var(--text-muted);
}

/* Signature "torn diagonal" panel: a red slashed backing behind a black
   clipped foreground, like the P5 menu's layered polygon cards. */
[data-theme="persona5"] .card,
[data-theme="persona5"] .stat,
[data-theme="persona5"] .day-entry-card,
[data-theme="persona5"] .week-day-col,
[data-theme="persona5"] dialog {
  background: var(--surface);
  border: 2px solid #000;
  box-shadow: -6px 6px 0 0 var(--accent);
  border-radius: 0;
}
[data-theme="persona5"] .stat-value {
  font-family: var(--display);
  font-size: 26px;
  color: var(--accent);
  font-style: italic;
}
[data-theme="persona5"] .stat-label {
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

[data-theme="persona5"] .btn {
  font-family: var(--display);
  font-size: 14px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  background: #000;
  color: #fff;
  border: 2px solid #000;
  border-radius: 0;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 10px 100%);
  transition: transform 0.1s ease, background 0.15s ease;
}
[data-theme="persona5"] .btn:hover {
  background: var(--accent);
  border-color: var(--accent);
  transform: translate(-1px, 1px);
}
[data-theme="persona5"] .btn-primary {
  background: var(--accent);
  border-color: var(--accent);
}
[data-theme="persona5"] .btn-primary:hover { background: #fff; color: var(--accent); }
[data-theme="persona5"] .btn-danger { color: var(--accent); background: #000; }

[data-theme="persona5"] input,
[data-theme="persona5"] select,
[data-theme="persona5"] textarea {
  background: #000;
  border: 2px solid #333;
  border-radius: 0;
  font-family: var(--body);
}
[data-theme="persona5"] .btn:focus-visible,
[data-theme="persona5"] a:focus-visible,
[data-theme="persona5"] input:focus-visible,
[data-theme="persona5"] select:focus-visible,
[data-theme="persona5"] textarea:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-dim);
}

[data-theme="persona5"] th {
  font-family: var(--display);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 13px;
  color: var(--accent);
  border-bottom: 3px solid #000;
}

[data-theme="persona5"] .calendar-day { border-radius: 0; }
[data-theme="persona5"] .calendar-day.is-today { border: 2px solid var(--accent); }
[data-theme="persona5"] .calendar-day.is-selected {
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 15% 100%);
}

[data-theme="persona5"] .ticket-key {
  font-family: var(--display);
  background: var(--accent);
  color: #fff;
  padding: 1px 6px;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 4px 100%);
}