/* Seededline — design tokens, sfondo bullet journal, shell dell'app.
   I valori sono quelli dell'app originale; i colori del tema chiaro/scuro
   vengono impostati da js/lib/theme.js come variabili HSL. */

@font-face {
  font-family: 'Amores';
  src: url('../assets/fonts/Amores-Regular.woff2') format('woff2');
  font-display: swap;
}

:root {
  /* tema chiaro (default); js/lib/theme.js li sovrascrive */
  --background: 30 20% 98.4%;
  --foreground: 30 3% 31%;
  --muted-foreground: 215.4 16.3% 46.9%;
  --accent: 210 40% 96.1%;
  --secondary: 30 10% 90%;
  --current-day-highlight: 210 40% 96.1%;
  --scrollbar-thumb-color: hsl(30 2% 25%);
  --weekly-current-day-header-color: #d3b69a;

  --light-paper: 30 20% 98.4%;
  --primary: 30 3% 31%;
  --border: 214.3 31.8% 91.4%;
  --destructive: 0 84.2% 60.2%;
  --radius: 0.5rem;

  --dot-size: 21px;
  --customDarkGrey: 30 2% 25%;
  --customLightGrey: 30 3% 60%;
  --customLightestGrey: 30 4% 77%;
  --craft-paper: 30 20% 90%;
  --accent-pink: 10 89% 74%;

  --font-overlock: 'Overlock', cursive, sans-serif;
  --font-fredericka: 'Fredericka the Great', cursive, sans-serif;
  --font-vibur: 'Vibur', cursive, sans-serif;
  --font-meow: 'Meow Script', cursive, sans-serif;
  --font-apple: 'Homemade Apple', cursive, sans-serif;
  --font-gochi: 'Gochi Hand', cursive, sans-serif;
  --font-imfell: 'IM Fell English SC', serif;
  --font-neuton: 'Neuton', serif;
  --font-bacasime: 'Bacasime Antique', serif;
  --font-satisfy: 'Satisfy', cursive, sans-serif;
  --font-justme: 'Just Me Again Down Here', cursive, sans-serif;

  --strip-left: 42px;
  --strip-right: 168px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

*, *::before, *::after { box-sizing: border-box; border-color: hsl(var(--border)); }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: var(--font-overlock);
  font-size: 1rem;
  line-height: 21px;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none;
}

button { font: inherit; color: inherit; cursor: pointer; }
a { color: inherit; }
[hidden] { display: none !important; }

/* ---------- Sfondo a puntini (bullet journal) ---------- */
.bg-bullet-light {
  background-image: url('../assets/sfondo_bulletbianco.png');
  background-size: var(--dot-size) var(--dot-size);
  background-repeat: repeat;
}
.bg-bullet-dark {
  background-image: url('../assets/sfondo_bulletdark.png');
  background-size: var(--dot-size) var(--dot-size);
  background-repeat: repeat;
}

/* ---------- Navbar ---------- */
.navbar {
  position: relative;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 42px;
  min-height: calc(42px + var(--safe-top));
  padding: var(--safe-top) 21px 0;
  background: hsl(var(--customDarkGrey));
  color: #fff;
  font-family: var(--font-vibur);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 8px;
}
.navbar ul { display: flex; gap: 42px; list-style: none; margin: 0; padding: 0; }
.navbar a { text-decoration: none; transition: color .2s; }
.navbar a:hover, .navbar a.active { color: hsl(var(--secondary)); }
.navbar .nav-right { position: absolute; right: 21px; display: flex; gap: 6px; align-items: center; }
.icon-btn {
  width: 32px; height: 32px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 0; color: #fff; padding: 0;
  transition: background .2s, color .2s;
}
.icon-btn:hover { background: #fff; color: hsl(var(--customDarkGrey)); }
.icon-btn svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* toggle chiaro/scuro al centro della navbar */
.bg-toggle { width: 16px; height: 16px; padding: 0; }
.bg-toggle svg { width: 16px; height: 16px; }

/* ---------- Pagina e contenitore con strisce decorative ---------- */
.page { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.page-body { flex: 1; display: flex; justify-content: center; padding-top: 21px; }

.wrapper {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  margin: 0 63px;
  border-radius: 6px;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);
  min-width: 0;
}
.wrapper .strips { position: absolute; inset: 0; z-index: 0; overflow: hidden; border-radius: 6px; pointer-events: none; }
.wrapper .strip-left { position: absolute; top: 0; left: 0; height: 100%; width: var(--strip-left); }
.wrapper .strip-right { position: absolute; top: 0; right: 0; height: 100%; width: var(--strip-right); background-position: center; }
.wrapper .content { position: relative; z-index: 1; flex: 1; padding: 0 var(--strip-left); min-width: 0; }
.wrapper .logo-header { position: relative; z-index: 1; }

.logo-header { display: flex; flex-direction: column; align-items: center; padding-top: 19px; }
.logo-header img { height: 50px; width: auto; }
.logo-header p { margin: -5px 0 0; font-size: 14px; }
.logo-header a { text-decoration: underline; }
.logo-header a:hover { text-decoration: none; }

/* ---------- Scrollbar minimale ---------- */
.minimal-scrollbar { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb-color) transparent; }
.minimal-scrollbar::-webkit-scrollbar { width: 4px; height: 4px; background: transparent; }
.minimal-scrollbar::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb-color); border-radius: 0; }
.minimal-scrollbar::-webkit-scrollbar-track, .minimal-scrollbar::-webkit-scrollbar-corner { background: transparent; }
.minimal-scrollbar::-webkit-scrollbar-button { display: none; }

/* ---------- Toast ---------- */
#toasts { position: fixed; bottom: calc(18px + var(--safe-bottom)); left: 50%; transform: translateX(-50%); z-index: 1000; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.toast {
  background: hsl(var(--customDarkGrey)); color: #fff; padding: 9px 16px; border-radius: 4px;
  font-size: 14px; box-shadow: 0 6px 16px rgb(0 0 0 / .25);
  animation: toast-in .2s ease-out;
}
.toast.error { background: #b54a3a; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- Mobile / PWA ---------- */
@media (max-width: 900px) {
  :root { --strip-left: 14px; --strip-right: 56px; }
  .wrapper { margin: 0; border-radius: 0; box-shadow: none; }
  .wrapper .strips { border-radius: 0; }
  .page-body { padding-top: 0; }
  .navbar { gap: 18px; letter-spacing: 4px; padding-left: 10px; padding-right: 10px; }
  .navbar ul { gap: 18px; }
  .navbar .nav-right { position: static; margin-left: 0; }
  .logo-header img { height: 40px; }
  .logo-header p { font-size: 12px; text-align: center; padding: 0 8px; }
}