@import "tailwindcss";

/* Sheet palette (design refresh, Concept B). Two voices: Geist for what a
   person reads, Geist Mono uppercase for what the system says. */
@theme {
  --color-paper: #FBFDFF;
  --color-wash: #E4ECF5;
  --color-hair: #E5E8ED;
  --color-ghost: #BABEC9;
  --color-faint: #8E94A6;
  --color-muted: #5F647C;
  --color-ink: #222A4C;
  --color-blue: #0066E3;
  --color-blue-hover: #0073FF;
  --color-warn: #FFAE00;
  --color-ok: #62CA94;
  --color-loss: #E5484D;

  --font-sans: "Geist", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Geist Mono", "SF Mono", Menlo, Consolas, monospace;
}

@layer base {
  html {
    letter-spacing: -0.03em;
    -webkit-font-smoothing: antialiased;
    scrollbar-gutter: stable;
  }
}

@layer components {
  /* System voice: mono, uppercase, medium weight, no tracking. */
  .voice {
    font-family: var(--font-mono);
    font-weight: 500;
    letter-spacing: 0;
    text-transform: uppercase;
  }

  /* Diagonal pinstripe margin that frames the sheet: 1px hairlines at 45deg, 8px apart. */
  .pin {
    background-image: repeating-linear-gradient(-45deg, var(--color-hair) 0 1px, transparent 1px 8px);
  }

  .navitem {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: 0 0.5rem;
    white-space: nowrap;
    border-right: 1px solid var(--color-hair);
    border-top: 3px solid transparent;
    color: var(--color-ink);
    text-decoration: none;
  }
  @media (min-width: 640px) {
    .navitem {
      flex-direction: row;
      gap: 0.5rem;
      padding: 0 1.5rem;
    }
  }
  .navitem span { color: var(--color-ghost); }
  .navitem:hover { color: var(--color-blue); }
  .navitem[aria-current="page"] {
    border-top-color: var(--color-blue);
    color: var(--color-blue);
  }
  /* Utility item pinned to the header's far end (sign in / log out): same
     hairline, on the left instead of the right. Buttons need the voice
     transform restated because preflight resets text-transform on them. */
  .navitem-end {
    margin-left: auto;
    border-right: 0;
    border-left: 1px solid var(--color-hair);
    text-transform: uppercase;
    cursor: pointer;
  }

  .chip {
    padding: 0.5rem 0.875rem;
    border: 1px solid var(--color-hair);
    color: var(--color-muted);
    background: var(--color-paper);
    font-size: 0.875rem;
    line-height: 1;
    text-decoration: none;
  }
  .chip:hover { border-color: var(--color-ink); color: var(--color-ink); }
  .chip-next { border-color: var(--color-blue); color: var(--color-blue); }
  .chip-on, .chip-on:hover {
    border-color: var(--color-blue);
    background: var(--color-blue);
    color: var(--color-paper);
  }
}