/* ==========================================================================
   PetSmart design system — tokens + base
   --------------------------------------------------------------------------
   Loaded on every live page, after that page's own stylesheets and before
   the responsive-*.css layer. Purely visual: no IDs, classes or markup that
   JavaScript relies on are introduced or renamed here.

   Palette (built around the existing PetSmart mint, #6FC2BB)
     mint    #6FC2BB  signature brand colour — fills, highlights, focus ring
     teal    #23766F  primary actions + links (white text passes WCAG AA)
     deep    #0F3B39  admin sidebar / dark surfaces
     ink     #12302E  headings and body text
     muted   #5B7271  secondary text (AA on white and on the page tint)
     mist    #F4F8F7  page background
   ========================================================================== */

@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('fonts/PlusJakartaSans-Variable.woff') format('woff');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('fonts/PlusJakartaSans-Italic-Variable.woff') format('woff');
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
}

:root {
  /* type */
  --font-sans: 'Plus Jakarta Sans', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --ps-text-xs: 12px;
  --ps-text-sm: 13px;
  --ps-text-base: 15px;
  --ps-text-md: 16px;
  --ps-text-lg: 18px;
  --ps-text-xl: 22px;
  --ps-text-2xl: 28px;
  --ps-text-3xl: 36px;
  --ps-text-4xl: 48px;

  /* brand */
  --ps-mint: #6FC2BB;
  --ps-mint-50: #F0F8F7;
  --ps-mint-100: #E1F2F0;
  --ps-mint-200: #C3E6E2;
  --ps-mint-300: #9BD5CF;
  --ps-teal: #23766F;          /* primary action */
  --ps-teal-hover: #1C635D;
  --ps-teal-press: #17524D;
  --ps-link: #1F6E68;
  --ps-deep: #0F3B39;          /* dark surface */
  --ps-deep-2: #154A47;

  /* neutrals */
  --ps-ink: #12302E;
  --ps-ink-2: #2A4644;
  --ps-muted: #5B7271;
  --ps-subtle: #6E8382;
  --ps-line: #E1EAE8;
  --ps-line-strong: #CCDAD8;
  --ps-bg: #F4F8F7;
  --ps-surface: #FFFFFF;
  --ps-surface-2: #F8FBFA;

  /* status */
  --ps-success: #16794A;  --ps-success-bg: #E7F6EE;  --ps-success-solid: #1F9D60;
  --ps-warning: #9A5B0E;  --ps-warning-bg: #FEF3E2;  --ps-warning-solid: #E89B2C;
  --ps-danger:  #B42E2E;  --ps-danger-bg:  #FDECEC;  --ps-danger-solid:  #C93C3C;
  --ps-info:    #2459B8;  --ps-info-bg:    #E9F0FD;
  --ps-violet:  #5B45C7;  --ps-violet-bg:  #EFECFD;

  /* shape — radius steps with hierarchy: controls < cards < sheets */
  --ps-r-xs: 6px;
  --ps-r-sm: 10px;
  --ps-r-md: 14px;
  --ps-r-lg: 18px;
  --ps-r-xl: 24px;
  --ps-r-pill: 999px;

  /* elevation — cards rest on a hairline, only floating things get depth */
  --ps-shadow-xs: 0 1px 2px rgba(16, 48, 46, 0.06);
  --ps-shadow-sm: 0 1px 2px rgba(16, 48, 46, 0.05), 0 2px 8px rgba(16, 48, 46, 0.05);
  --ps-shadow-md: 0 2px 4px rgba(16, 48, 46, 0.04), 0 10px 24px rgba(16, 48, 46, 0.08);
  --ps-shadow-lg: 0 8px 16px rgba(16, 48, 46, 0.08), 0 24px 56px rgba(16, 48, 46, 0.16);
  --ps-ring: 0 0 0 3px rgba(111, 194, 187, 0.45);
  --ps-ring-danger: 0 0 0 3px rgba(201, 60, 60, 0.25);

  --ps-ease: cubic-bezier(.2, .7, .2, 1);
  --ps-fast: 140ms;
  --ps-med: 220ms;

  /* Re-point the upload modal's own design tokens at the system */
  --um-font: var(--font-sans);
  --um-accent: var(--ps-teal);
  --um-accent-dark: var(--ps-teal-hover);
  --um-accent-soft: var(--ps-mint-50);
  --um-border: var(--ps-line-strong);
  --um-divider: var(--ps-line);
  --um-text: var(--ps-ink);
  --um-muted: var(--ps-muted);
  --um-radius: var(--ps-r-md);
  --um-danger: var(--ps-danger-solid);
  --um-danger-soft: var(--ps-danger-bg);

}

/* ---------- base ---------- */
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
body {
  font-family: var(--font-sans);
  color: var(--ps-ink);
}
button,
input,
select,
textarea {
  font-family: inherit;
}
h1, h2, h3, h4 {
  letter-spacing: -0.015em;
}
::selection {
  background: var(--ps-mint-200);
  color: var(--ps-ink);
}
table,
.stat-value,
time {
  font-variant-numeric: tabular-nums;
}
input::placeholder,
textarea::placeholder {
  color: #788C8B;
  opacity: 1;
}

/* Visible keyboard focus everywhere (mouse clicks stay clean) */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--ps-teal);
  outline-offset: 2px;
  border-radius: inherit;
}
:where(input, select, textarea):focus-visible {
  outline: none;
}

/* Material Symbols: keep icons optically even with the text beside them */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  vertical-align: middle;
}

/* Respect reduced-motion preferences across the whole app */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- toast (shared by every page) ---------- */
.toast-container .toast,
.toast {
  font-family: var(--font-sans);
}