/**
 * Directorio Digital SCLC — Shared Design Tokens & Base Styles
 *
 * @package     com_directorio_sclc
 * @version     2.0.0
 * @copyright   (C) 2026 EdugameDigital
 * @license     GNU General Public License version 2 or later
 */

/* ── Design Tokens ──────────────────────────────────────────────────── */

:root {
  /* Primary palette — Teal (San Cristobal colonial vibes) */
  --dir-primary: #0f766e;
  --dir-primary-light: #14b8a6;
  --dir-primary-dark: #0d5d57;
  --dir-primary-50: #f0fdfa;
  --dir-primary-100: #ccfbf1;

  /* Accent — Amber (warmth, artisan craft) */
  --dir-accent: #d97706;
  --dir-accent-light: #f59e0b;
  --dir-accent-dark: #b45309;
  --dir-accent-50: #fffbeb;

  /* Neutrals */
  --dir-dark: #1e293b;
  --dir-darker: #0f172a;
  --dir-text: #1e293b;
  --dir-text-light: #64748b;
  --dir-text-muted: #94a3b8;
  --dir-bg: #f8fafc;
  --dir-bg-alt: #f1f5f9;
  --dir-card: #ffffff;
  --dir-border: #e2e8f0;

  /* Semantic */
  --dir-success: #059669;
  --dir-warning: #d97706;
  --dir-error: #dc2626;
  --dir-info: #0284c7;

  /* Layout */
  --dir-radius: 12px;
  --dir-radius-sm: 8px;
  --dir-radius-lg: 16px;
  --dir-radius-full: 9999px;

  /* Shadows */
  --dir-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --dir-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --dir-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --dir-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  --dir-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);

  /* Typography */
  --dir-font: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
  --dir-font-display: 'Playfair Display', Georgia, serif;
  --dir-font-mono: 'SF Mono', 'Fira Code', monospace;

  /* Spacing scale */
  --dir-space-xs: 0.25rem;
  --dir-space-sm: 0.5rem;
  --dir-space-md: 1rem;
  --dir-space-lg: 1.5rem;
  --dir-space-xl: 2rem;
  --dir-space-2xl: 3rem;
  --dir-space-3xl: 4rem;

  /* Transitions */
  --dir-transition: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --dir-transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Z-index scale */
  --dir-z-dropdown: 100;
  --dir-z-sticky: 200;
  --dir-z-fixed: 300;
  --dir-z-modal-backdrop: 400;
  --dir-z-modal: 500;
  --dir-z-popover: 600;
  --dir-z-toast: 700;
}

/* ── Base Reset (site views only) ───────────────────────────────────── */

.directorio-view {
  font-family: var(--dir-font);
  color: var(--dir-text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.directorio-view *,
.directorio-view *::before,
.directorio-view *::after {
  box-sizing: border-box;
}

/* ── Offline indicator ──────────────────────────────────────────────── */

.directorio-offline .directorio-online-only {
  display: none !important;
}

.directorio-offline .directorio-offline-badge::after {
  content: 'Sin conexi\00f3n';
  display: inline-block;
  background: var(--dir-warning);
  color: #fff;
  font-size: 0.75rem;
  padding: 2px 8px;
  border-radius: var(--dir-radius-full);
  margin-left: 8px;
  vertical-align: middle;
}

/* ── Utility classes ────────────────────────────────────────────────── */

.dir-container {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--dir-space-md);
}

.dir-container-narrow {
  max-width: 800px;
}

.dir-container-wide {
  max-width: 1440px;
}

.dir-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── Button base ────────────────────────────────────────────────────── */

.dir-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.625rem 1.25rem;
  font-family: var(--dir-font);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none;
  border: none;
  border-radius: var(--dir-radius-sm);
  cursor: pointer;
  transition: all var(--dir-transition);
  white-space: nowrap;
}

.dir-btn-primary {
  background: var(--dir-primary);
  color: #fff;
}

.dir-btn-primary:hover {
  background: var(--dir-primary-dark);
}

.dir-btn-accent {
  background: var(--dir-accent);
  color: #fff;
}

.dir-btn-accent:hover {
  background: var(--dir-accent-dark);
}

.dir-btn-outline {
  background: transparent;
  color: var(--dir-primary);
  border: 2px solid var(--dir-primary);
}

.dir-btn-outline:hover {
  background: var(--dir-primary);
  color: #fff;
}

.dir-btn-ghost {
  background: transparent;
  color: var(--dir-text-light);
}

.dir-btn-ghost:hover {
  background: var(--dir-bg-alt);
  color: var(--dir-text);
}

/* ── Card base ──────────────────────────────────────────────────────── */

.dir-card {
  background: var(--dir-card);
  border-radius: var(--dir-radius);
  box-shadow: var(--dir-shadow-sm);
  overflow: hidden;
  transition: box-shadow var(--dir-transition);
}

.dir-card:hover {
  box-shadow: var(--dir-shadow-md);
}

.dir-card-body {
  padding: var(--dir-space-lg);
}

/* ── Badge ──────────────────────────────────────────────────────────── */

.dir-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.625rem;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: var(--dir-radius-full);
  white-space: nowrap;
}

.dir-badge-primary {
  background: var(--dir-primary-100);
  color: var(--dir-primary);
}

.dir-badge-accent {
  background: var(--dir-accent-50);
  color: var(--dir-accent);
}

/* ── Responsive breakpoints (reference) ─────────────────────────────
   Mobile:  < 640px
   Tablet:  640px – 1024px
   Desktop: > 1024px
   ──────────────────────────────────────────────────────────────────── */

@media (max-width: 640px) {
  :root {
    --dir-space-lg: 1rem;
    --dir-space-xl: 1.5rem;
    --dir-space-2xl: 2rem;
  }
}