@import "tailwindcss";
@plugin "daisyui";

/* Zento brand theme: paper background, ink sidebar and text, one orange accent.
   Rounded, roomy shapes in the spirit of creative tools (Higgsfield, fal.ai). */
@plugin "daisyui/theme" {
  name: "zento";
  default: true;
  color-scheme: light;
  --color-base-100: #f7f8f2;
  --color-base-200: #edf0e3;
  --color-base-300: #e4e8d7;
  --color-base-content: #101009;
  --color-primary: #101009;
  --color-primary-content: #edf0e3;
  --color-secondary: #3f4036;
  --color-secondary-content: #edf0e3;
  --color-accent: #ff5a1f;
  --color-accent-content: #101009;
  --color-neutral: #101009;
  --color-neutral-content: #edf0e3;
  --color-info: #3f4036;
  --color-info-content: #edf0e3;
  --color-success: #3f6b3a;
  --color-success-content: #f7f8f2;
  --color-warning: #ff5a1f;
  --color-warning-content: #101009;
  --color-error: #c2330b;
  --color-error-content: #f7f8f2;
  --radius-selector: 2rem;
  --radius-field: 0.75rem;
  --radius-box: 1.25rem;
  --size-selector: 0.25rem;
  --size-field: 0.25rem;
  --border: 1px;
  --depth: 0;
  --noise: 0;
}

@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/assets/hanken-grotesk-latin-62d0893d.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/assets/hanken-grotesk-latin-ext-c2a3301f.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@theme {
  --font-sans: "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
  --color-paper: #edf0e3;
  --color-muted: #7c7d70;
  --color-hairline: #cfd3c0;
  --color-accent-ink: #b8400f;
  /* Credits: a yellow coin with a black bolt. */
  --color-credit: #ffcc00;
}

@layer base {
  body {
    @apply bg-base-200 text-base-content antialiased;
  }
}

/* Zento components. Use these classes instead of raw DaisyUI btn/table/input
   modifiers so every screen shares one size and one look. */
@layer components {
  /* Buttons: one height (40px), one radius; variants change color only. */
  .button {
    @apply inline-flex h-10 cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-field px-4 text-sm font-semibold transition-colors disabled:cursor-not-allowed disabled:opacity-50;
  }

  .button svg {
    @apply size-4 shrink-0;
  }

  .button-primary {
    @apply bg-neutral text-paper hover:bg-accent;
  }

  .button-accent {
    @apply bg-accent text-neutral hover:bg-[#ff7140];
  }

  .button-secondary {
    @apply bg-base-300 text-base-content hover:bg-[#dce1cc];
  }

  .button-ghost {
    @apply text-secondary hover:bg-base-300 hover:text-base-content;
  }

  .button-sm {
    @apply h-8 px-3 text-xs;
  }

  .button-block {
    @apply w-full;
  }

  /* Filled field with the label inside (inputs, selects, textareas, files). */
  /* A field shows it can be edited: lighter under the pointer, light with the accent ring while typing. A disabled
     one stays as it is. */
  .field-filled {
    @apply flex cursor-text flex-col gap-0.5 rounded-field bg-base-300 px-3.5 py-2 transition-colors
      hover:bg-base-200 focus-within:bg-base-100 focus-within:ring-2 focus-within:ring-accent
      has-disabled:cursor-default has-disabled:hover:bg-base-300;
  }

  .field-filled > label {
    @apply text-xs font-medium text-muted;
  }

  .field-filled > input,
  .field-filled > select,
  .field-filled > textarea {
    @apply w-full bg-transparent text-sm outline-none placeholder:text-muted/70;
  }

  .field-filled > select {
    @apply -ml-0.5 cursor-pointer appearance-none;
  }

  .field-filled > textarea {
    @apply min-h-24 resize-y py-1;
  }

  /* On a phone the page margin already frames it, so the panel keeps less padding of its own. */
  .panel {
    @apply rounded-box bg-base-100 p-4 sm:p-6;
  }

  /* Tables: one rounded bordered panel, muted headers, tall rows without dividers. */
  .table-panel {
    @apply overflow-x-auto rounded-box border border-hairline bg-base-100 px-3 py-2;
  }

  .data-table {
    @apply w-full text-left text-sm;
  }

  .data-table th {
    @apply px-3 py-3 font-medium text-muted;
  }

  .data-table td {
    @apply px-3 py-3.5 align-middle;
  }

  .data-table tbody tr {
    @apply transition-colors hover:bg-base-200/60;
  }

  .data-table tbody tr td:first-child {
    @apply rounded-l-field;
  }

  .data-table tbody tr td:last-child {
    @apply rounded-r-field;
  }

  /* Chips for roles and statuses. */
  .chip {
    @apply inline-flex items-center gap-1.5 rounded-full bg-base-300 px-2.5 py-0.5 text-xs font-medium text-secondary;
  }

  .chip-accent {
    @apply bg-accent/15 text-accent-ink;
  }

  .chip-success {
    @apply bg-success/15 text-success;
  }

  .chip-muted {
    @apply bg-transparent text-muted ring-1 ring-hairline;
  }

  .amount-positive {
    @apply font-semibold text-success;
  }

  .amount-negative {
    @apply font-semibold text-accent-ink;
  }

  .nav-item {
    @apply flex h-10 items-center gap-3 rounded-field px-3 text-sm font-medium text-paper/70 transition-colors hover:bg-white/5 hover:text-paper;
  }

  .nav-item[aria-current="page"] {
    @apply bg-white/10 text-paper;
  }

  .nav-item[aria-current="page"] svg {
    @apply text-accent;
  }

  /* Listing photos: checked photos are numbered in grid order and the first one carries the cover badge. */
  .photo-grid {
    counter-reset: photo;
  }

  .photo-grid > li:has(:checked) {
    counter-increment: photo;
  }

  .photo-grid > li:has(:checked) .photo-number::before {
    content: counter(photo);
  }

  .photo-grid > li:not(:has(:checked)) .photo-cover,
  .photo-grid > li:has(:checked) ~ li .photo-cover {
    display: none;
  }

  .photo-grid > li:has(input:disabled:not(:checked)) label {
    @apply cursor-not-allowed;
  }

  /* The carousel's dashes, one per card: long and dark for the cards in view. */
  .carousel-dashes > button {
    @apply h-1.5 w-5 cursor-pointer rounded-full bg-base-300 transition-all duration-300 hover:bg-muted;
  }

  .carousel-dashes > button[data-seen] {
    @apply w-9 bg-neutral;
  }

  .photo-grid > li[data-dragging] {
    @apply opacity-30;
  }
}

.honeypot {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}