@import "tailwindcss";

/* ---------------------------------------------------------------------------
   Bolão design tokens — "The Yellow Plaza"
   Plaza Yellow as ambient anchor, neutrals tinted toward hue 92, semantic
   correct/wrong reserved for prediction results. OKLCH throughout; never
   #000 / #fff. See DESIGN.md.
--------------------------------------------------------------------------- */
@theme {
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-display: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", "Cascadia Code", Menlo,
    Consolas, monospace;

  /* Layout rhythm — content gutters and column width (see DESIGN.md).
     Spacing tokens back px-margin-mobile / px-margin-desktop; the container
     token backs max-w-max-width. */
  --spacing-margin-mobile: 20px;
  --spacing-margin-desktop: 40px;
  --container-max-width: 1200px;

  /* Typographic scale — "Praça Amarela" (see DESIGN.md front-matter) */
  --text-display-lg: 48px;
  --text-display-lg--line-height: 52px;
  --text-display-lg--letter-spacing: -0.02em;
  --text-display-lg--font-weight: 800;
  --text-headline-lg: 32px;
  --text-headline-lg--line-height: 40px;
  --text-headline-lg--letter-spacing: -0.01em;
  --text-headline-lg--font-weight: 700;
  --text-headline-lg-mobile: 24px;
  --text-headline-lg-mobile--line-height: 32px;
  --text-headline-lg-mobile--font-weight: 700;
  --text-title-md: 20px;
  --text-title-md--line-height: 28px;
  --text-title-md--font-weight: 600;
  --text-body-md: 16px;
  --text-body-md--line-height: 24px;
  --text-body-md--font-weight: 400;
  --text-label-sm: 12px;
  --text-label-sm--line-height: 16px;
  --text-label-sm--font-weight: 600;
  --text-score-display: 24px;
  --text-score-display--line-height: 24px;
  --text-score-display--font-weight: 700;
  --text-ranking-number: 14px;
  --text-ranking-number--line-height: 20px;
  --text-ranking-number--letter-spacing: 0.05em;
  --text-ranking-number--font-weight: 500;

  /* "Praça Amarela" Material palette — adopted from the screens/ prototypes.
     Ink Black for borders/text (never #000), Plaza Yellow as the anchor. */
  --color-ink-black: #1a1a1a;
  --color-limewash-bg: #fffdf5;
  --color-plaza-yellow: oklch(85% 0.18 85);
  --color-terracotta-accent: #e2725b;

  --color-primary: #705d00;
  --color-on-primary: #ffffff;
  --color-primary-container: #ffd700;
  --color-on-primary-container: #705e00;
  --color-primary-fixed: #ffe16d;
  --color-inverse-primary: #e9c400;

  --color-secondary: #006877;
  --color-on-secondary: #ffffff;
  --color-secondary-container: #45e1fd;
  --color-on-secondary-container: #00616f;

  --color-tertiary: #00696f;

  --color-error: #ba1a1a;
  --color-on-error: #ffffff;
  --color-error-container: #ffdad6;
  --color-on-error-container: #93000a;

  --color-surface: #fbf9f1;
  --color-surface-bright: #fbf9f1;
  --color-surface-dim: #dcdad2;
  --color-surface-container-lowest: #ffffff;
  --color-surface-container-low: #f5f4ec;
  --color-surface-container: #f0eee6;
  --color-surface-container-high: #eae8e0;
  --color-surface-container-highest: #e4e3db;
  --color-surface-variant: #e4e3db;

  --color-on-surface: #1b1c17;
  --color-on-surface-variant: #4d4732;
  --color-on-background: #1b1c17;
  --color-background: #fbf9f1;
  --color-outline: #7e775f;
  --color-outline-variant: #d0c6ab;
  --color-inverse-surface: #30312c;
  --color-inverse-on-surface: #f3f1e9;

  /* Neutrals — tinted toward the brand yellow, never pure white/black */
  --color-limewash: oklch(98% 0.006 92); /* default screen background */
  --color-surface: oklch(99.5% 0.004 92); /* raised surface / inputs */
  --color-powder: oklch(91% 0.008 92); /* borders, dividers */
  --color-graphite: oklch(26% 0.012 92); /* primary text */
  --color-graphite-soft: oklch(46% 0.012 92); /* secondary text */
  --color-graphite-faint: oklch(64% 0.01 92); /* placeholders, hints */

  /* Plaza Yellow — ambient anchor, carries large surfaces */
  --color-plaza: oklch(84% 0.165 92);
  --color-plaza-deep: oklch(79% 0.16 90); /* hover / pressed */
  --color-plaza-wash: oklch(95% 0.07 92); /* tinted notice background */

  /* Semantic signals — real results only (correct), errors (wrong) */
  --color-correct: oklch(70% 0.16 145);
  --color-wrong: oklch(58% 0.17 25);
  --color-wrong-wash: oklch(95% 0.045 25);
  --color-wrong-ink: oklch(45% 0.14 25);

  /* Single tinted-graphite elevation level — never pure black */
  --shadow-panel: 0 1px 2px oklch(26% 0.012 92 / 0.08),
    0 10px 28px oklch(26% 0.012 92 / 0.06);
}

@layer base {
  /* Disable double-tap-to-zoom and pinch-to-zoom on touch screens
     (iOS Safari et al.), keeping normal scrolling. */
  html {
    touch-action: pan-x pan-y;
  }
}

@layer components {
  /* ----- Page scaffold -------------------------------------------------- */
  /* Mobile-first content column. Every screen sits on the same width and
     rhythm so navigating between them feels like one app, not many. */
  .page {
    @apply mx-auto w-full max-w-2xl px-5 py-8 sm:py-10;
  }

  .page-title {
    @apply text-2xl font-semibold tracking-tight text-graphite;
  }

  .section-title {
    @apply text-lg font-semibold tracking-tight text-graphite;
  }

  /* Quiet metadata line under a title (championship name, season, etc.). */
  .page-subtitle {
    @apply text-sm text-graphite-soft;
  }

  /* ‹ Back affordance for detail screens; full 44px tap target. */
  .back-link {
    @apply -ml-1 inline-flex min-h-11 items-center gap-1 text-sm font-medium
      text-graphite-soft transition-colors hover:text-graphite
      focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-graphite/40
      rounded;
  }

  /* ----- Forms ---------------------------------------------------------- */
  /* Tactile / flat foundation: 1px Ink Black borders, Plaza Yellow focus ring. */
  .field-label {
    @apply mb-2 block text-label-sm font-semibold text-on-surface-variant;
  }

  .field-input {
    @apply block w-full rounded-lg border border-ink-black bg-surface-container-lowest
      px-4 py-3 text-body-md text-on-surface placeholder:text-on-surface-variant/50
      transition-shadow focus:border-ink-black focus:outline-none focus:ring-2
      focus:ring-plaza-yellow;
  }

  /* Wraps a .field-input that carries a leading Material Symbol; the icon is
     absolutely positioned and the input gets left padding via .field-input--icon. */
  .field-icon {
    @apply relative flex items-center;
  }

  .field-icon > .material-symbols-outlined {
    @apply pointer-events-none absolute left-3 text-on-surface-variant/60;
  }

  .field-input--icon {
    @apply pl-11;
  }

  /* Trailing button (password visibility toggle) inside a .field-icon wrapper. */
  .field-trailing-btn {
    @apply absolute right-3 flex items-center text-on-surface-variant/60
      transition-colors hover:text-ink-black focus:outline-none;
  }

  .field-input--trailing {
    @apply pr-12;
  }

  /* Native select tuned to match .field-input, with a custom chevron so it
     reads as part of the same control family (no OS-blue default). */
  .field-select {
    @apply block w-full appearance-none rounded-xl border border-powder bg-surface
      bg-[length:1.1rem] bg-[position:right_0.75rem_center] bg-no-repeat py-2.5 pl-3.5 pr-10
      text-graphite transition-colors focus:border-graphite focus:outline-none
      focus:ring-2 focus:ring-graphite/30;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%2358554d' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
  }

  /* Compact tabular score entry for prediction rows. 44px tall touch target. */
  .score-input {
    @apply h-11 w-14 rounded-xl border border-powder bg-surface text-center
      font-mono text-lg font-semibold tabular-nums text-graphite transition-colors
      focus:border-graphite focus:outline-none focus:ring-2 focus:ring-graphite/30;
  }

  .field-error {
    @apply mt-1.5 text-label-sm text-error;
  }

  /* Six-box one-time-code entry (registration confirmation). JetBrains Mono so
     digits align; driven by the otp-input Stimulus controller. */
  .otp-input {
    @apply h-14 w-12 rounded-lg border border-ink-black bg-surface text-center
      font-mono text-score-display text-ink-black transition-colors
      focus:bg-surface-container-lowest focus:outline-none focus:ring-2
      focus:ring-plaza-yellow md:h-16 md:w-14;
  }

  /* ----- Buttons -------------------------------------------------------- */
  /* Tactile button: Plaza Yellow fill, 1px Ink Black border, solid hard shadow
     that collapses on press (translate + shadow-none) — never soft blurs. */
  .btn-tactile {
    box-shadow: 4px 4px 0 0 var(--color-ink-black);
    transition: transform 0.1s ease-in-out, box-shadow 0.1s ease-in-out;
  }
  .btn-tactile:active {
    transform: translate(4px, 4px);
    box-shadow: 0 0 0 0 var(--color-ink-black);
  }

  /* Width-neutral by default; add `w-full` for form submits. 56px min height.
     Carries the same hard-shadow press as .btn-tactile (inlined — Tailwind v4
     `@apply` only takes utilities, not component classes). */
  .btn-primary {
    @apply inline-flex min-h-14 items-center justify-center gap-2 rounded-xl border
      border-ink-black bg-plaza-yellow px-5 py-3 text-title-md font-bold text-ink-black
      hover:bg-inverse-primary focus-visible:outline-none focus-visible:ring-2
      focus-visible:ring-ink-black/40 disabled:cursor-not-allowed disabled:opacity-50;
    box-shadow: 4px 4px 0 0 var(--color-ink-black);
    transition: transform 0.1s ease-in-out, box-shadow 0.1s ease-in-out,
      background-color 0.1s ease-in-out;
  }
  .btn-primary:active {
    transform: translate(4px, 4px);
    box-shadow: 0 0 0 0 var(--color-ink-black);
  }

  .btn-secondary {
    @apply inline-flex min-h-11 items-center justify-center gap-2 rounded-xl border
      border-powder bg-surface px-5 py-2.5 text-base font-semibold text-graphite
      transition-colors hover:bg-limewash hover:border-graphite/25
      focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-graphite/40
      disabled:cursor-not-allowed disabled:opacity-50;
  }

  /* Text-only action for dense rows (admin edit, etc.). Tap target preserved. */
  .btn-text {
    @apply inline-flex min-h-11 items-center font-medium text-graphite-soft
      transition-colors hover:text-graphite focus-visible:outline-none
      focus-visible:ring-2 focus-visible:ring-graphite/40 rounded;
  }

  .btn-text-danger {
    @apply inline-flex min-h-11 items-center font-medium text-wrong-ink
      transition-colors hover:text-wrong focus-visible:outline-none
      focus-visible:ring-2 focus-visible:ring-wrong/40 rounded;
  }

  /* ----- Lists & rows --------------------------------------------------- */
  /* Tappable list row: a pool, a championship, a round. Replaces bare
     underlined links so the whole row is a 44px+ target on mobile. */
  .row-link {
    @apply flex min-h-14 items-center justify-between gap-3 rounded-2xl border
      border-powder bg-surface px-4 py-3 text-graphite transition-colors
      hover:border-graphite/25 hover:bg-limewash focus-visible:outline-none
      focus-visible:ring-2 focus-visible:ring-graphite/30;
  }

  /* Trailing chevron inside a row-link. */
  .row-chevron {
    @apply size-4 shrink-0 text-graphite-faint;
  }

  .link-text {
    @apply font-bold text-primary underline decoration-plaza-yellow decoration-2
      underline-offset-4 transition-colors hover:text-ink-black;
  }

  /* Standalone link action: same look as .link-text, but a ≥44px tap target
     (WCAG 2.5.8 / PRODUCT.md). Use for links on their own line, not inline
     links inside a sentence. */
  .link-action {
    @apply inline-flex min-h-11 items-center gap-1 font-medium text-primary
      underline-offset-4 transition-colors hover:text-ink-black hover:underline
      focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ink-black/40
      rounded;
  }

  /* ----- Round navigator ------------------------------------------------ */
  /* Prev ‹ · round name · › next. Sits above the match list and lets players
     step through rounds one at a time instead of scrolling one long list. */
  .round-nav {
    @apply mt-4 flex items-center justify-between gap-2 rounded-2xl border
      border-powder bg-surface p-1.5 shadow-[var(--shadow-panel)];
  }

  /* Square 44px tap target for each arrow; the plaza wash on hover echoes the
     brand without competing with the prediction inputs below. */
  .round-nav-arrow {
    @apply inline-flex size-11 shrink-0 items-center justify-center rounded-xl
      text-graphite transition-colors hover:bg-plaza-wash focus-visible:outline-none
      focus-visible:ring-2 focus-visible:ring-graphite/40;
  }

  .round-nav-arrow-disabled {
    @apply text-graphite-faint/50 hover:bg-transparent;
  }

  .round-nav-label {
    @apply flex min-w-0 flex-1 flex-col items-center text-center;
  }

  .round-nav-name {
    @apply max-w-full truncate text-base font-semibold text-graphite;
  }

  .round-nav-position {
    @apply mt-0.5 text-xs font-medium uppercase tracking-wide text-graphite-soft tabular-nums;
  }

  /* Match rows ease in with a short stagger (delay set inline by index) so a
     round change reads as a deliberate transition, not a hard repaint. */
  .match-card {
    animation: match-card-in 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  /* ----- Team emblems --------------------------------------------------- */
  /* Circular badge holding a national flag, an uploaded crest, or initials.
     Size is set inline by the team_emblem_tag helper. */
  .team-emblem {
    @apply inline-flex shrink-0 items-center justify-center overflow-hidden
      rounded-full border border-powder bg-surface;
  }

  /* Initials fallback for teams without a flag code or uploaded emblem. */
  .team-emblem-fallback {
    @apply bg-plaza-wash text-[0.6rem] font-semibold uppercase leading-none
      tracking-tight text-graphite-soft;
  }

  /* ----- Auth flows ----------------------------------------------------- */
  /* Subtle Ink Black dot grid behind the centered auth canvas (login/confirm). */
  .bg-pattern {
    background-image: radial-gradient(var(--color-ink-black) 1.5px, transparent 1.5px);
    background-size: 24px 24px;
  }

  /* Faint Ink Black dot grid for the pool context header card (subtler than the
     full-screen .bg-pattern used behind the auth canvas). */
  .dots-pattern {
    background-image: radial-gradient(rgb(26 26 26 / 0.1) 1px, transparent 1px);
    background-size: 16px 16px;
  }

  /* Circular icon badge atop a transactional auth card (1px Ink Black border). */
  .auth-icon-badge {
    @apply inline-flex size-16 items-center justify-center rounded-full border
      border-ink-black bg-surface-container-high text-ink-black;
  }
}

@keyframes match-card-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Material Symbols Outlined: default to a 2pt outlined stroke (DESIGN.md). */
.material-symbols-outlined {
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
}
.material-symbols-outlined.is-filled {
  font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;
}

/* Motion is a response to interaction; honor reduced-motion everywhere. */
@media (prefers-reduced-motion: reduce) {
  *,
  ::before,
  ::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}