/**
 * Conjuntos PH — Design tokens (WCAG 2.2 AA)
 *
 * Roles:
 *   --brand-accent      : identidad visual / decoración / iconos grandes (≥3:1 UI)
 *   --brand-primary     : texto interactivo y botones con texto claro (≥4.5:1)
 *   --brand-primary-*   : estados hover/active
 *   --text-*            : tipografía sobre superficies claras/oscuras
 *
 * Include AFTER Bootstrap so the --bs-* tokens override Bootstrap defaults.
 */

/* ===== Light theme ===== */
:root {
  /* Brand: "Conjuntos PH" orange */
  --brand-accent: #ff5722;
  --brand-accent-rgb: 255, 87, 34;
  --brand-accent-soft: #ff8a65;
  --brand-accent-muted: rgba(255, 87, 34, 0.12);
  --brand-primary: #c2410c;       /* 5.18:1 on #fff — AA normal text */
  --brand-primary-hover: #9a3412; /* 7.31:1 on #fff */
  --brand-primary-rgb: 194, 65, 12;
  --brand-on-primary: #ffffff;

  /* Surfaces */
  --surface-page: #f8fafc;
  --surface-card: #ffffff;
  --surface-muted: #f1f5f9;
  --surface-sidebar: #1e293b;
  --surface-sidebar-hover: #334155;
  --surface-border: #e2e8f0;
  --surface-border-strong: #cbd5e1;

  /* Text */
  --text-default: #0f172a;        /* 16.7:1 on white */
  --text-secondary: #334155;      /* 10.4:1 on white */
  --text-muted: #475569;          /* 7.58:1 on white */
  --text-subtle: #64748b;         /* 4.76:1 on white */
  --text-on-dark: #f8fafc;
  --text-muted-on-dark: #cbd5e1;  /* 9.85:1 on sidebar */
  --text-subtle-on-dark: #94a3b8; /* 5.71:1 on sidebar */

  /* Semantic (Bootstrap-aligned, AA checked) */
  --color-success: #157347;
  --color-danger: #b02a37;
  --color-warning: #997404;
  --color-info: #087990;

  /* Focus (WCAG 2.4.13) */
  --focus-ring-color: #c2410c;
  --focus-ring-offset: #ffffff;
  --focus-ring-width: 3px;
  --focus-ring: 0 0 0 var(--focus-ring-width) rgba(194, 65, 12, 0.45);

  /* Layout chrome */
  --sidebar-width: 260px;
  --sidebar-bg: var(--surface-sidebar);
  --sidebar-hover: var(--surface-sidebar-hover);
  --sidebar-active: var(--brand-primary);
  --topbar-height: 60px;

  /* Bootstrap 5 bridge */
  --bs-primary: var(--brand-primary);
  --bs-primary-rgb: var(--brand-primary-rgb);
  --bs-link-color: var(--brand-primary);
  --bs-link-hover-color: var(--brand-primary-hover);
  --bs-body-color: var(--text-default);
  --bs-body-bg: var(--surface-page);
  --bs-secondary-color: var(--text-muted);
  --bs-border-color: var(--surface-border);
  --bs-success: var(--color-success);
  --bs-danger: var(--color-danger);
  --bs-warning: var(--color-warning);
  --bs-info: var(--color-info);

  /* Bootstrap component overrides */
  --bs-btn-color: var(--brand-on-primary);
  --bs-btn-bg: var(--brand-primary);
  --bs-btn-border-color: var(--brand-primary);
  --bs-btn-hover-color: var(--brand-on-primary);
  --bs-btn-hover-bg: var(--brand-primary-hover);
  --bs-btn-hover-border-color: var(--brand-primary-hover);
  --bs-btn-active-color: var(--brand-on-primary);
  --bs-btn-active-bg: var(--brand-primary-hover);
  --bs-btn-active-border-color: var(--brand-primary-hover);
  --bs-btn-disabled-color: var(--brand-on-primary);
  --bs-btn-disabled-bg: var(--brand-primary);
  --bs-btn-disabled-border-color: var(--brand-primary);
}

/* ===== Dark theme ===== */
[data-bs-theme="dark"],
html.dark {
  --surface-page: #0f172a;
  --surface-card: #1e293b;
  --surface-muted: #1e293b;
  --surface-border: #334155;
  --surface-border-strong: #475569;

  --text-default: #f1f5f9;
  --text-secondary: #e2e8f0;
  --text-muted: #cbd5e1;
  --text-subtle: #94a3b8;

  --brand-primary: #fb923c;       /* 7.89:1 on #0f172a */
  --brand-primary-hover: #fdba74;
  --brand-primary-rgb: 251, 146, 60;
  --brand-on-primary: #0f172a;

  --focus-ring-color: #fb923c;
  --focus-ring-offset: #0f172a;
  --focus-ring: 0 0 0 var(--focus-ring-width) rgba(251, 146, 60, 0.5);

  --sidebar-active: var(--brand-primary);

  --bs-primary: var(--brand-primary);
  --bs-primary-rgb: var(--brand-primary-rgb);
  --bs-link-color: var(--brand-primary);
  --bs-link-hover-color: var(--brand-primary-hover);
  --bs-body-color: var(--text-default);
  --bs-body-bg: var(--surface-page);
  --bs-secondary-color: var(--text-muted);
  --bs-border-color: var(--surface-border);

  --bs-btn-color: var(--brand-on-primary);
  --bs-btn-bg: var(--brand-primary);
  --bs-btn-border-color: var(--brand-primary);
  --bs-btn-hover-color: var(--brand-on-primary);
  --bs-btn-hover-bg: var(--brand-primary-hover);
  --bs-btn-hover-border-color: var(--brand-primary-hover);
  --bs-btn-active-color: var(--brand-on-primary);
  --bs-btn-active-bg: var(--brand-primary-hover);
  --bs-btn-active-border-color: var(--brand-primary-hover);
  --bs-btn-disabled-color: var(--brand-on-primary);
  --bs-btn-disabled-bg: var(--brand-primary);
  --bs-btn-disabled-border-color: var(--brand-primary);
}

/* ===== Focus visibility (WCAG 2.4.7 / 2.4.13) ===== */
:focus {
  outline: none;
}
:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: 2px;
  box-shadow: var(--focus-ring);
}

/* ===== Reduced motion ===== */
@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;
  }
}

/* ===== Skip link ===== */
.skip-link {
  position: absolute;
  left: 0.75rem;
  top: -3rem;
  z-index: 1080;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  background: var(--brand-primary);
  color: var(--brand-on-primary);
  font-weight: 600;
  text-decoration: none;
  transition: top 0.15s ease;
}
.skip-link:focus,
.skip-link:focus-visible {
  top: 0.75rem;
  color: var(--brand-on-primary);
}

/* ===== Minimum touch target (WCAG 2.5.8) ===== */
.btn,
.nav-link,
.page-link,
.form-check-input {
  min-height: 1.5rem;
}
.btn:not(.btn-sm):not(.btn-lg) {
  min-height: 2.25rem;
}

/* ===== Utility aliases used by inline styles ===== */
.brand-gradient {
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-accent-soft));
}
.brand-gradient-text {
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-accent-soft));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}