/* ==========================================================================
   XUTA SOCCER LAB — SHARED DESIGN SYSTEM
   --------------------------------------------------------------------------
   Loaded on every page alongside the Tailwind CDN script. Tailwind handles
   layout/spacing utilities; this file defines XUTA's actual brand system —
   color tokens, type, and the handful of reusable components (buttons,
   status tags, cards, nav) — so no page reinvents its own palette.

   DESIGN INTENT: restrained, editorial, football-first. One accent colour
   (lime) used sparingly. No gradients, no glassmorphism, no glow effects,
   no rainbow card palette, minimal border-radius. Colour values are the
   exact brand colours sampled from the approved XUTA logo artwork.
   ========================================================================== */

:root {
  --xuta-navy:       #00173D; /* sampled from approved logo artwork */
  --xuta-navy-deep:  #000B21;
  --xuta-lime:       #A0EB00; /* sampled from approved logo artwork */
  --xuta-white:      #FFFFFF;
  --xuta-off-white:  #F6F5F1;
  --xuta-charcoal:   #1A1B1E;
  --xuta-grey:       #6B6E73;
  --xuta-grey-light: #9A9DA2;
  --xuta-line:       #E2E0D9;      /* hairline border on light backgrounds */
  --xuta-line-dark:  rgba(255,255,255,0.14); /* hairline border on dark backgrounds */
}

html { scroll-behavior: smooth; }
body { font-family: 'Inter', sans-serif; background: var(--xuta-off-white); color: var(--xuta-charcoal); }
.font-display { font-family: 'Archivo', sans-serif; }

/* Guarantee the native [hidden] attribute actually hides an element even
   when a component class on it (e.g. .btn's `display: inline-flex`) would
   otherwise win the cascade. Scripts across the site toggle `.hidden = true`
   on <a>/<button> elements that may carry such classes, so without this an
   element JS marked hidden can still render. */
[hidden] { display: none !important; }

/* Visible, high-contrast focus ring everywhere — buttons, links, form controls */
:focus-visible {
  outline: 2px solid var(--xuta-navy);
  outline-offset: 2px;
  border-radius: 2px;
}
.on-dark :focus-visible,
.dark-surface :focus-visible {
  outline-color: var(--xuta-lime);
}

::selection { background: var(--xuta-lime); color: var(--xuta-navy); }

/* Skip link for keyboard/screen-reader users */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--xuta-navy); color: #fff; padding: 0.75rem 1.25rem;
  font-weight: 700; text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.08em;
}
.skip-link:focus { left: 1rem; top: 1rem; }

/* --------------------------------------------------------------------------
   BUTTONS — flat, square-cornered, no gradients/shadows/pill shapes
   -------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  font-family: 'Archivo', sans-serif; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  font-size: 0.8125rem; padding: 0.9rem 1.75rem; border-radius: 2px;
  border: 1px solid transparent; transition: background-color .15s ease, color .15s ease, border-color .15s ease;
  cursor: pointer; white-space: nowrap;
}
.btn:disabled { opacity: 0.35; cursor: not-allowed; }
.btn-navy       { background: var(--xuta-navy); color: #fff; }
.btn-navy:hover:not(:disabled)   { background: #000; }
.btn-outline-navy { background: transparent; color: var(--xuta-navy); border-color: var(--xuta-navy); }
.btn-outline-navy:hover:not(:disabled) { background: var(--xuta-navy); color: #fff; }
.btn-outline-white { background: transparent; color: #fff; border-color: rgba(255,255,255,0.55); }
.btn-outline-white:hover:not(:disabled) { border-color: #fff; background: rgba(255,255,255,0.08); }
.btn-lime       { background: var(--xuta-lime); color: var(--xuta-navy); }
.btn-lime:hover:not(:disabled)   { background: #8fd400; }
.btn-text       { padding: 0; border: none; background: none; color: var(--xuta-navy); text-decoration: underline; text-underline-offset: 3px; }
.btn-text-white { padding: 0; border: none; background: none; color: #fff; text-decoration: underline; text-underline-offset: 3px; }

/* --------------------------------------------------------------------------
   STATUS TAGS — small, quiet, dot + label. Not SaaS-dashboard badges.
   -------------------------------------------------------------------- */
.tag-status {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase;
  border: 1px solid var(--xuta-line); padding: 0.3rem 0.6rem; border-radius: 2px; color: var(--xuta-charcoal);
}
.tag-status .dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.tag-status.status-open .dot        { background: #4C9A2A; }
.tag-status.status-limited .dot     { background: #C98A12; }
.tag-status.status-sold-out .dot    { background: #9A9A9A; }
.tag-status.status-sold-out         { color: var(--xuta-grey); }
.tag-status.status-coming-soon .dot { background: #9A9A9A; }
.tag-status.status-coming-soon      { color: var(--xuta-grey); font-style: italic; }

/* --------------------------------------------------------------------------
   CARDS — flat, one hairline border, no per-card colour variation
   -------------------------------------------------------------------- */
.card-flat {
  background: #fff; border: 1px solid var(--xuta-line); border-radius: 3px;
  transition: border-color .15s ease;
}
.card-flat:hover { border-color: var(--xuta-navy); }

/* Thin index numerals used in the Four Pillars / editorial sections */
.index-num {
  font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 0.875rem;
  color: var(--xuta-lime); letter-spacing: 0.05em;
}

/* Hairline rules, used instead of drop shadows to separate sections */
.hairline-top    { border-top: 1px solid var(--xuta-line); }
.hairline-bottom { border-bottom: 1px solid var(--xuta-line); }
.hairline-top-dark    { border-top: 1px solid var(--xuta-line-dark); }
.hairline-bottom-dark { border-bottom: 1px solid var(--xuta-line-dark); }

/* Subtle pitch-marking motif — an SVG line drawing, not a photo — used as a
   restrained background accent (e.g. hero, section dividers). Original
   vector art, not a reproduction of any existing brand or league mark. */
.pitch-lines {
  background-image:
    linear-gradient(var(--xuta-line-dark) 1px, transparent 1px),
    linear-gradient(90deg, var(--xuta-line-dark) 1px, transparent 1px);
  background-size: 64px 64px;
}

/* Mobile menu slide state */
.mobile-nav { transition: max-height .25s ease; overflow: hidden; }

/* Form fields */
.field-input {
  width: 100%; border: 1px solid var(--xuta-line); border-radius: 2px; background: #fff;
  padding: 0.85rem 1rem; font-size: 0.9375rem; color: var(--xuta-charcoal);
}
.field-input:focus { border-color: var(--xuta-navy); }
.field-label {
  display: block; font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 0.6875rem;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--xuta-grey); margin-bottom: 0.4rem;
}