/*
 * caes-theme.css — UGA CAES brand tokens + accessibility base layer.
 *
 * VENDORED, browser-ready port of  @caes-webteam/ui@0.3.0  →  src/theme.css
 *   source: https://github.com/CAES-WebTeam/caes-apps-ui  (src/theme.css)
 *
 * The upstream file is authored for Tailwind 4: the brand tokens live inside a
 * Tailwind `@theme { }` block, which a plain browser ignores. This site has NO
 * build step, so that block is promoted here to a real `:root { }` — which is
 * exactly what Tailwind v4 itself compiles `@theme` down to. Everything else
 * (fonts, base a11y styles, .caes-btn / .caes-login-* primitives) is verbatim.
 *
 * TO REFRESH when the package updates: re-copy src/theme.css from the repo and
 * re-apply the single change `@theme {`  →  `:root {`. Nothing else changed.
 */
@import url("https://fonts.googleapis.com/css2?family=Merriweather:wght@300;400;700;900&family=Open+Sans:wght@300;400;600;700;800&display=swap");

/* ── Brand design tokens (promoted from Tailwind `@theme` → `:root`) ── */
:root {
  /* ── UGA CAES Brand: Primary Colors ── */
  --color-bulldog-red: #ba0c2f;
  --color-bulldog-red-dark: #8a0922;
  --color-arch-black: #000000;
  --color-chapel-bell-white: #ffffff;

  /* ── UGA CAES Brand: Accent Colors (max 20% of design) ── */
  --color-glory-glory: #e4002b;
  --color-lake-herrick: #00a3ad;
  --color-lake-herrick-dark: #008c95;
  --color-lake-herrick-text: #007077; /* 5.86:1 on white — AA for normal text */
  --color-olympic: #004e60;
  --color-hedges: #b4bd00;

  /* ── UGA CAES Brand: Neutral Colors ── */
  --color-sanford: #554f47;
  --color-stegeman: #9ea2a2;
  --color-creamery: #d6d2c4;
  --color-odyssey: #c8d8eb;

  /* Parchment — soft cream used as admin shell page background / sidebar fill.
     Lighter than --color-creamery for a more airy editorial feel. */
  --color-parchment: #f6f3ec;
  --color-parchment-light: #fbf9f4;

  /* ── Utility Grays (functional, not brand) ── */
  --color-light-gray: #f5f5f5;
  --color-medium-gray: #e0e0e0; /* decorative only: dividers, card borders, gridlines */

  /* Interactive-control border (WCAG 1.4.11, 3:1). #767676 ≈ 4.5:1 on white.
     Use `border-border` on inputs/selects/textareas + outline buttons; keep
     --color-medium-gray for decorative borders. */
  --color-border: #767676;
  --color-text-primary: #1a1a1a;
  --color-text-secondary: #4a4a4a;

  /* ── UGA CAES Brand Fonts ── */
  --font-heading: "Merriweather", Georgia, serif;
  --font-body: "Open Sans", "Helvetica Neue", sans-serif;
  --font-sans: "Open Sans", "Helvetica Neue", sans-serif;
  --font-mono: "Fira Code", monospace;

  /* ── Shape tokens ── */
  --theme-radius-base: 0.5rem;
  --theme-radius-card: 0.75rem;
  --theme-radius-button: 0.375rem;

  /* ── Semantic surface/header tokens (let an app re-skin the chrome) ── */
  --theme-surface: #ffffff;
  --theme-header-text: #ffffff;
}

/* ── Base styles ───────────────────────────────────────────────────── */

body {
  font-family: var(--font-body);
  color: var(--color-text-primary);
  background-color: var(--color-light-gray);
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading);
  font-weight: 700;
}

/* Accessibility: skip-to-content link (pairs with <AppShell />). */
.skip-to-content {
  position: absolute;
  left: -9999px;
  z-index: 100;
}

.skip-to-content:focus {
  position: fixed;
  top: 0;
  left: 0;
  padding: 0.75rem 1.5rem;
  background: var(--color-arch-black);
  color: var(--color-chapel-bell-white);
  font-family: var(--font-heading);
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  z-index: 100;
  outline: 3px solid var(--color-bulldog-red);
}

/* Brand-colored accent for native checkboxes and radios. */
input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--color-bulldog-red);
}

/*
 * Inline brand marks (UgaWordmark / CaesSignature / ExtensionLogo). The labelled
 * wrapper carries the size utility (e.g. `h-12`); the inner SVG fills that height
 * and derives its width from the viewBox aspect ratio. The UGA wordmark's fills
 * are `currentColor`, so it inherits the surrounding text color.
 */
[data-caes-mark] {
  display: inline-flex;
  line-height: 0;
}
[data-caes-mark] > svg {
  display: block;
  height: 100%;
  width: auto;
}

/*
 * App-wide keyboard focus indicator (WCAG 2.4.7). Any focusable element that
 * doesn't define its own ring gets a visible outline. :focus-visible keeps it
 * keyboard-only (no mouse-click rings). Components that set their own
 * focus:ring-* win on specificity.
 */
:focus-visible {
  outline: 2px solid var(--color-bulldog-red);
  outline-offset: 2px;
}

/* Respect reduced-motion preference. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── Non-Tailwind fallback custom properties ─────────────────────────
   The :root above already exposes the full token set for plain-CSS use; this
   --caes-* alias block is kept verbatim from the package so component CSS that
   references the short names keeps working.                            */
:root {
  --caes-red: #ba0c2f;
  --caes-red-dark: #8a0922;
  --caes-sanford: #554f47;
  --caes-creamery: #d6d2c4;
  --caes-parchment: #f6f3ec;
  --caes-white: #ffffff;
  --caes-stegeman: #9ea2a2;
  --caes-font-heading: "Merriweather", Georgia, serif;
}

/* ── Button primitives ───────────────────────────────────────────────
   .caes-btn, .caes-btn--primary, .caes-btn--ghost: semantic button classes
   for shared components. Works in Tailwind and plain-CSS consumers alike. */
.caes-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.65rem 1.5rem;
  border: none;
  border-radius: 0.375rem;
  font-family: var(--caes-font-heading);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
  line-height: 1;
  text-align: center;
}

.caes-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.caes-btn--primary {
  background: var(--caes-red);
  color: var(--caes-white);
}

.caes-btn--primary:hover:not(:disabled) {
  background: var(--caes-red-dark);
  color: var(--caes-white);
}

.caes-btn--ghost {
  background: transparent;
  color: var(--caes-sanford);
  border: 1px solid var(--caes-creamery);
}

.caes-btn--ghost:hover:not(:disabled) {
  background: var(--caes-parchment);
}