/* Establish cascade-layer order before daisyUI/Tailwind load, so Tailwind utilities beat our components. */
@layer theme, base, components, utilities;

/* Pengevask app theme — same palette/type as the landing page (landing-page/dist/site.css).
   daisyUI 5 reads these CSS variables, so overriding them here re-skins every component. */
[data-theme="pengevask"] {
  color-scheme: light;
  --color-base-100: #ffffff;                 /* cards: white */
  --color-base-200: #f4ede2;                 /* page: paper */
  --color-base-300: #e9dfcf;                 /* paper-2 */
  --color-base-content: #1b2a33;             /* ink */
  --color-primary: #0f4c81;                  /* classic blue */
  --color-primary-content: #f4ede2;
  --color-secondary: #ff6f61;                /* living coral */
  --color-secondary-content: #1b2a33;
  --color-accent: #98ddca;                   /* neo mint */
  --color-accent-content: #1b2a33;
  --color-neutral: #1b2a33;
  --color-neutral-content: #f4ede2;
  --color-info: #dbe7f4;                     /* sky */
  --color-info-content: #1b2a33;
  --color-success: #98ddca;                  /* mint */
  --color-success-content: #1b2a33;
  --color-warning: oklch(72.8% 0.138 89.73); /* brass */
  --color-warning-content: #1b2a33;
  --color-error: oklch(64.31% 0.1733 28.27); /* coral-2 */
  --color-error-content: #ffffff;
  /* One radius scale for the whole app: boxes > fields > selectors, so nested corners nest cleanly. */
  --radius-box: 1.25rem;
  --radius-field: 0.75rem;
  --radius-selector: 9999px;
  --size-selector: 0.25rem;
  --size-field: 0.28125rem;                  /* slightly larger tap targets (mobile first) */
  --border: 1px;
  --depth: 0;
  --noise: 0;
}

body { font-family: "Manrope", system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
h1, h2, h3, .card-title, .font-display, .stat-value { font-family: "Fraunces", Georgia, serif; font-variation-settings: "opsz" 144, "SOFT" 50; font-weight: 500; letter-spacing: -.01em; }
.card { box-shadow: 0 20px 50px -30px rgba(15, 76, 129, .25); border: 1px solid rgba(27, 42, 51, .07); }
.btn { font-weight: 600; text-transform: none; }
.navbar { background: rgba(244, 237, 226, .85); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(27, 42, 51, .08); }
/* Plain Django-rendered form fields (login, signup, profile, report) get the same look as daisyUI .input/.select/.textarea */
main input:not([type=checkbox]):not([type=radio]):not([type=range]):not(.btn):not(.input), main select:not(.select), main textarea:not(.textarea) {
  width: 100%; padding: .85rem 1rem; border: var(--border) solid var(--color-base-300); border-radius: var(--radius-field); background: var(--color-base-100);
}
main input:focus-visible, main select:focus-visible, main textarea:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 1px; }
main input[type=checkbox] { width: 1.25rem; height: 1.25rem; accent-color: var(--color-secondary); }
.errorlist { color: var(--color-error); font-size: .85rem; list-style: none; padding: 0; }
[x-cloak] { display: none !important; }
/* Big tappable choice tiles used across the Book machine wizard.
   Layered so Tailwind utilities (border-success, p-3, ...) can still override per tile. */
@layer components {
  .tile { display: flex; align-items: center; gap: .75rem; width: 100%; text-align: left; padding: 1rem 1.1rem; border-radius: var(--radius-box); background: var(--color-base-100); border: var(--border) solid rgba(27, 42, 51, .08); box-shadow: 0 20px 50px -30px rgba(15, 76, 129, .25); transition: transform .12s ease, box-shadow .12s ease; }
  .tile:active { transform: scale(.985); }
  @media (hover: hover) { .tile:hover { transform: translateY(-2px); box-shadow: 0 24px 50px -28px rgba(15, 76, 129, .4); } }
  .tile-disabled { opacity: .45; pointer-events: none; }
}