/* ==========================================
   PERNOCTALIAN.SPACE
   SHARED WIDGET PAGE STYLES
   Supports: Mint, Rose, Lilac, Butter, Ocean
   ========================================== */

/* ---------- DEFAULT PALETTE: MINT ---------- */

:root {
  color-scheme: light;

  --bg: #edf5f2;
  --paper: #fbfdfb;
  --paper-dark: #e6f0ed;

  --teal: #4f9c91;
  --teal-dark: #315f59;
  --teal-light: #d5eee7;

  --text: #354a46;
  --muted: #d0dad6;
  --border: #b8d8cf;
  --shadow: rgba(52, 93, 83, 0.10);
  --pink: #e7bfc9;

  --entry-bg: #b8e5dc;
  --entry-border: #80afa2;
  --date-color: #688c82;

  --scroll-track: #edf5f2;
  --scroll-thumb: #b8e5dc;
}

/* ---------- ROSE.EXE ---------- */

html[data-theme="rose"] {
  --bg: #f7edf0;
  --paper: #fff9fb;
  --paper-dark: #f0dfe5;

  --teal: #b77c91;
  --teal-dark: #70465a;
  --teal-light: #f0d5df;

  --text: #573e4a;
  --muted: #d9c5cd;
  --border: #d8afbe;
  --shadow: rgba(91, 49, 67, 0.12);
  --pink: #dca6b8;

  --entry-bg: #f0d5df;
  --entry-border: #c58ba0;
  --date-color: #98677c;

  --scroll-track: #f7edf0;
  --scroll-thumb: #e6bdcb;
}

/* ---------- LILAC.EXE ---------- */

html[data-theme="lilac"] {
  --bg: #f0edf8;
  --paper: #fcfaff;
  --paper-dark: #e6e0f2;

  --teal: #9683bd;
  --teal-dark: #574777;
  --teal-light: #ded4f0;

  --text: #443b57;
  --muted: #d0c7df;
  --border: #c2b3dc;
  --shadow: rgba(69, 48, 100, 0.12);
  --pink: #c4a8d9;

  --entry-bg: #ded4f0;
  --entry-border: #a997ce;
  --date-color: #82719f;

  --scroll-track: #f0edf8;
  --scroll-thumb: #d2c4eb;
}

/* ---------- BUTTER.EXE ---------- */

html[data-theme="butter"] {
  --bg: #fbf5df;
  --paper: #fffdf3;
  --paper-dark: #f1e8c7;

  --teal: #b69a51;
  --teal-dark: #70602f;
  --teal-light: #f1e4ae;

  --text: #51482f;
  --muted: #dcd2af;
  --border: #d8c68b;
  --shadow: rgba(92, 73, 30, 0.12);
  --pink: #dfc18b;

  --entry-bg: #f1e4ae;
  --entry-border: #c5ad67;
  --date-color: #8d7942;

  --scroll-track: #fbf5df;
  --scroll-thumb: #e9d89c;
}

/* ---------- OCEAN.EXE ---------- */

html[data-theme="ocean"] {
  --bg: #e9f1f8;
  --paper: #f8fbff;
  --paper-dark: #dce8f2;

  --teal: #628eae;
  --teal-dark: #31556f;
  --teal-light: #cce1ef;

  --text: #344b5d;
  --muted: #c6d5e1;
  --border: #a9c8dc;
  --shadow: rgba(39, 70, 96, 0.12);
  --pink: #a8c5df;

  --entry-bg: #cce1ef;
  --entry-border: #85b0cb;
  --date-color: #5f829e;

  --scroll-track: #e9f1f8;
  --scroll-thumb: #c2d9eb;
}

/* ==========================================
   BASE PAGE
   ========================================== */

* {
  box-sizing: border-box;
  scrollbar-width: thin;
  scrollbar-color: var(--scroll-thumb) var(--scroll-track);
}

html {
  min-height: 100%;
}

body {
  margin: 0;
  padding: 12px;
  background: transparent;
  color: var(--text);
  font: 16px/1.5 "VT323", monospace;
}

/* Keep the widget fonts consistent */

body,
body * {
  font-family: "VT323", monospace;
}

h1,
h2,
h3,
h4,
h5,
h6,
.entry h2,
.note h2 {
  font-family: "Silkscreen", sans-serif;
}

/* ==========================================
   SCROLLBAR
   ========================================== */

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: var(--scroll-track);
  border-left: 1px dashed var(--border);
}

::-webkit-scrollbar-thumb {
  background: var(--scroll-thumb);
  border: 2px solid var(--scroll-track);
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--teal);
}

/* ==========================================
   DIARY ENTRIES + TV BABBLE ENTRIES
   ========================================== */

.entry {
  margin-bottom: 12px;
  padding: 14px;
  background: var(--entry-bg);
  color: var(--text);
  border: 1px dashed var(--entry-border);
  overflow-wrap: anywhere;
}

.entry h2 {
  margin: 0 0 8px;
  color: var(--teal-dark);
  font-size: 12px;
  line-height: 1.8;
  font-weight: bold;
}

/* Entry dates */

.entry .date {
  margin-bottom: 6px;
  color: var(--date-color);
  font-family: "Press Start 2P", monospace;
  font-size: 8px;
  line-height: 1.8;
  letter-spacing: 0;
}

/* Mood labels */

.mood {
  display: block;
  margin-top: 10px;
  color: var(--date-color);
  font-size: 10px;
}

/* Expandable entry content */

details {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed var(--entry-border);
  color: var(--text);
}

summary {
  cursor: pointer;
  color: var(--teal-dark);
}

details p {
  margin-top: 8px;
}

/* ==========================================
   NOTES
   ========================================== */

.note {
  min-height: 150px;
  margin-bottom: 12px;
  padding: 14px;
  background: var(--entry-bg);
  color: var(--text);
  border: 1px dashed var(--entry-border);
  line-height: 1.8;
  overflow-wrap: anywhere;
}

.note h2 {
  margin: 0 0 8px;
  color: var(--teal-dark);
  font-size: 15px;
}

.note p {
  margin: 8px 0;
}

/* ==========================================
   HEADINGS + TEXT
   ========================================== */

h2 {
  margin: 0 0 8px;
  color: var(--teal-dark);
  font-size: 14px;
  font-weight: bold;
}

p {
  margin: 0 0 10px;
}

p:last-child {
  margin-bottom: 0;
}

.diary-end {
  padding: 12px 0;
  color: var(--date-color);
  text-align: center;
  font-size: 10px;
}

/* Links */

a {
  color: var(--teal-dark);
  text-decoration-color: var(--border);
  transition: color 0.15s ease;
}

a:hover {
  color: var(--teal);
}

/* Text selection */

::selection {
  background: var(--teal-light);
  color: var(--teal-dark);
}


/* ---------- EVIL.EXE 🩸 ---------- */

html[data-theme="evil"] {
  color-scheme: dark;

  --bg: #110d10;
  --paper: #1b1519;
  --paper-dark: #27171d;

  --teal: #c51f3a;
  --teal-dark: #ff4055;
  --teal-light: #49151f;

  --text: #e6d5d8;
  --muted: #71565d;
  --border: #762333;
  --shadow: rgba(0, 0, 0, 0.4);
  --pink: #8e2038;

  --entry-bg: #241219;
  --entry-border: #8b2437;
  --date-color: #c45b6c;

  --scroll-track: #110d10;
  --scroll-thumb: #762333;
}
.entry-photo {
  display: block;
  width: 100%;
  max-width: 400px;
  height: auto;
  margin: 12px auto;
  border: 2px solid var(--border);
  border-radius: 4px;
}
/* Each variable should contain only the image URL and hotspot */
:root {
  --site-cursor: url("https://cdn.cursors-4u.net/previews/cute-polka-dotted-green-bow-tie-ribbon-9f6cfb1b-32.webp") 32 32;
}

html[data-theme="rose"] {
  --site-cursor: url("https://cdn.cursors-4u.net/css-previews/colorful-rose-5e81d196-css.webp") 0 0;
}

html[data-theme="lilac"] {
  --site-cursor: url("https://cdn.cursors-4u.net/previews/purple-design-pointer-fff0529c-32.webp") 32 32;
}

html[data-theme="butter"] {
  --site-cursor: url("https://cdn.cursors-4u.net/previews/butter-08f44c53-32.webp") 32 32;
}

html[data-theme="ocean"] {
  --site-cursor: url("https://cdn.cursors-4u.net/previews/cool-blue-outer-glow-pointer-4e42efa9-32.webp") 36 35;
}

html[data-theme="evil"] {
  --site-cursor: url("https://cdn.cursors-4u.net/previews/devil-16b16f86-32.webp") 38 33;
}

body,
body * {
  cursor: var(--site-cursor), auto !important;
}

a,
button,
select {
  cursor: var(--site-cursor), pointer !important;
}

input,
textarea {
  cursor: text !important;
}