/* ============================================================
   StableOps Design System — Tokens + Base Layer
   ============================================================ */

/* ---- Extended Token Set ------------------------------------ */
:root {
  /* Status / semantic palette */
  --status-ok:       #2a6e4f;
  --status-ok-soft:  rgba(42, 110, 79, 0.12);
  --status-warn:     #9e6c00;
  --status-warn-soft:rgba(158, 108, 0, 0.12);
  --status-danger:   #b93232;
  --status-danger-soft: rgba(185, 50, 50, 0.10);
  --status-info:     #2458a5;
  --status-info-soft:rgba(36, 88, 165, 0.10);
  --status-neutral:  #5a5a5a;
  --status-neutral-soft: rgba(90, 90, 90, 0.10);

  /* Racing / discipline accent */
  --racing-gold:     #c8952a;
  --racing-gold-soft:rgba(200, 149, 42, 0.15);
  --show-blue:       #2458a5;
  --show-blue-soft:  rgba(36, 88, 165, 0.12);
  --breeding-sage:   #4a7c59;
  --breeding-sage-soft: rgba(74, 124, 89, 0.12);

  /* Typography scale */
  --text-xs:   0.6875rem;  /* 11px */
  --text-sm:   0.8125rem;  /* 13px */
  --text-base: 0.9375rem;  /* 15px */
  --text-md:   1.0625rem;  /* 17px */
  --text-lg:   1.25rem;    /* 20px */
  --text-xl:   1.5rem;     /* 24px */
  --text-2xl:  1.875rem;   /* 30px */
  --text-3xl:  2.25rem;    /* 36px */

  /* Motion */
  --ease-out: cubic-bezier(0.21, 1.02, 0.73, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast: 120ms;
  --duration-base: 220ms;
  --duration-slow: 380ms;

  /* Z-index scale */
  --z-base:    0;
  --z-sticky:  100;
  --z-overlay: 200;
  --z-modal:   9999;
  --z-toast:   10000;
}

/* ---- Scrollbar ---------------------------------------------- */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--bronze); }

/* ---- Focus ring -------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--bronze);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---- Selection --------------------------------------------- */
::selection {
  background: var(--bronze-soft);
  color: var(--ink);
}

/* ---- Utility classes --------------------------------------- */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flex { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }
.gap-4 { gap: 16px; }
.w-full { width: 100%; }
.mt-auto { margin-top: auto; }

/* ---- Discipline badge tokens ------------------------------ */
.discipline-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 99px;
  white-space: nowrap;
}
.discipline-badge.racing   { background: var(--racing-gold-soft); color: var(--racing-gold); border: 1px solid rgba(200,149,42,0.25); }
.discipline-badge.show     { background: var(--show-blue-soft);   color: var(--show-blue);   border: 1px solid rgba(36,88,165,0.22); }
.discipline-badge.breeding { background: var(--breeding-sage-soft); color: var(--breeding-sage); border: 1px solid rgba(74,124,89,0.22); }
.discipline-badge.boarding { background: var(--bronze-soft); color: var(--bronze); border: 1px solid rgba(179,122,69,0.22); }
.discipline-badge.trail    { background: var(--pine-soft); color: var(--pine); border: 1px solid rgba(41,71,64,0.22); }
.discipline-badge.retired  { background: var(--status-neutral-soft); color: var(--status-neutral); border: 1px solid rgba(90,90,90,0.22); }

/* ============================================================
   DARK MODE THEME OVERRIDES
   Applied via [data-theme="dark"] on <html>
   ============================================================ */
[data-theme="dark"] {
  --window: #1a1410;
  --surface: #231a12;
  --surface-raised: #2d2017;
  --text-primary: #f0e8dc;
  --text-secondary: #c8a882;
  --text-muted: #8a6a4a;
  --border: rgba(255,255,255,0.08);
  --shadow-xl: 0 42px 120px rgba(0,0,0,0.6);

  /* Override panel/window/ink tokens used throughout the app */
  --window-top: #1a1410;
  --panel:      #231a12;
  --panel-strong: #2d2017;
  --ink:        #f0e8dc;
  --muted:      #8a6a4a;
  --line:       rgba(255,255,255,0.06);
  --line-strong:rgba(255,255,255,0.12);

  /* Skeleton shimmer in dark mode */
  --skeleton-base: rgba(255,255,255,0.06);
  --skeleton-shine: rgba(255,255,255,0.12);
}

/* Fix L1: Dark mode SVG icon color overrides for hardcoded SVG strokes */
[data-theme="dark"] .dark-mode-toggle svg {
  stroke: var(--text-primary);
  fill: none;
}

[data-theme="dark"] .nav-icon svg,
[data-theme="dark"] .action-icon svg {
  stroke: var(--text-primary);
}

[data-theme="dark"] .skeleton,
[data-theme="dark"] .skeleton-card,
[data-theme="dark"] .skeleton-text,
[data-theme="dark"] .skeleton-line,
[data-theme="dark"] .skeleton-avatar,
[data-theme="dark"] .skeleton-badge {
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0.06) 25%,
    rgba(255,255,255,0.12) 50%,
    rgba(255,255,255,0.06) 75%
  );
  background-size: 200% auto;
  animation: shimmer 1.5s ease-in-out infinite;
}