@import "tailwindcss";

/* Token della grafica: ogni colore passa da qui, così cambiare stile tocca solo questo file */
:root {
  /* Direzione "Tovaglia": blu a quadretti, giallo burro, inchiostro blu notte */
  --bg: #fbfaf6;
  --surface: #ffffff;
  --ink: #1c2a52;
  --muted: #646d86;
  --line: #e3e7f3;
  --accent: #1c2a52;
  --accent-ink: #ffffff;
  --blue: #2f55c9;
  --hi: #ffe27a;
  --hi-ink: #1c2a52;
  --check: rgba(255, 255, 255, 0.28);

  --all: #d8342c;
  --all-soft: #fde8e6;
  --all-ink: #9e1f19;
  --int: #e48a12;
  --int-soft: #fdf0dc;
  --int-ink: #8f5205;
  --dis: #5d6680;
  --dis-soft: #eef0f5;
  --dis-ink: #333b52;
  --fav: #2e9b5a;
  --fav-soft: #e3f5ea;
  --fav-ink: #1d6b3d;

  --r-card: 20px;
  --r-chip: 12px;
  --r-field: 16px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #10162e;
    --surface: #19223f;
    --ink: #eef1fb;
    --muted: #9aa4c4;
    --line: #2a355c;
    --accent: #ffe27a;
    --accent-ink: #1c2a52;
    --blue: #2a4ab0;
    --hi: #ffe27a;
    --hi-ink: #1c2a52;
    --check: rgba(255, 255, 255, 0.14);

    --all: #ff6a5c;
    --all-soft: #3d1f2a;
    --all-ink: #ffb8b0;
    --int: #ffad4a;
    --int-soft: #3a2c1e;
    --int-ink: #ffd49c;
    --dis: #a3acc8;
    --dis-soft: #252f52;
    --dis-ink: #d5dbef;
    --fav: #5fd28e;
    --fav-soft: #17352c;
    --fav-ink: #a9eec4;
  }
}

@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-ink: var(--ink);
  --color-muted: var(--muted);
  --color-line: var(--line);
  --color-accent: var(--accent);
  --color-accent-ink: var(--accent-ink);
  --color-blue: var(--blue);
  --color-hi: var(--hi);
  --color-hi-ink: var(--hi-ink);
  --color-all: var(--all);
  --color-all-soft: var(--all-soft);
  --color-all-ink: var(--all-ink);
  --color-int: var(--int);
  --color-int-soft: var(--int-soft);
  --color-int-ink: var(--int-ink);
  --color-dis: var(--dis);
  --color-dis-soft: var(--dis-soft);
  --color-dis-ink: var(--dis-ink);
  --color-fav: var(--fav);
  --color-fav-soft: var(--fav-soft);
  --color-fav-ink: var(--fav-ink);
  --font-sans: var(--font-body), ui-sans-serif, system-ui, sans-serif;
  --font-display: var(--font-heading), ui-sans-serif, system-ui, sans-serif;
  --radius-card: var(--r-card);
  --radius-chip: var(--r-chip);
  --radius-field: var(--r-field);
}

html {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
}

h1,
h2,
h3 {
  text-wrap: balance;
}

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

/* La tovaglia a quadretti dell'intestazione */
.gingham {
  background-color: var(--blue);
  background-image:
    linear-gradient(90deg, var(--check) 50%, transparent 50%),
    linear-gradient(var(--check) 50%, transparent 50%);
  background-size: 22px 22px;
  color: #fff;
}

/* Spazio per notch e barra home dell'iPhone quando è installata come app */
.safe-top {
  padding-top: env(safe-area-inset-top, 0px);
}
.safe-bottom {
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}