/*
 * tokens.css: Sistema de Diseño, Arquidiócesis de Medellín
 *
 * Fuente de verdad para colores, tipografía y espaciados.
 * Todas las variables usan el prefijo --sii- para evitar colisiones.
 *
 * IMPORTANTE: Los tres hex base (#cf2e2e / #0693e3 / #ff6900) son inmutables.
 * Las escalas se derivan con OKLCH para mantener percepción uniforme.
 */

:root {

  /* ─────────────────────────────────────────────────────────────────────────
   * ESCALA PRIMARY (rojo institucional)
   * Base: #cf2e2e  |  OKLCH L=0.56 C=0.20 h=26°
   * ───────────────────────────────────────────────────────────────────────── */
  --sii-primary-50:  #fff1ef;
  --sii-primary-100: #fde5e1;
  --sii-primary-200: #f5ccc7;
  --sii-primary-300: #efaaa2;
  --sii-primary-400: #e87970;
  --sii-primary-500: #cf2e2e;   /* token base institucional */
  --sii-primary-600: #a41219;
  --sii-primary-700: #7a0005;
  --sii-primary-800: #530000;
  --sii-primary-900: #310000;

  /* ─────────────────────────────────────────────────────────────────────────
   * ESCALA SECONDARY (azul institucional)
   * Base: #0693e3  |  OKLCH L=0.64 C=0.16 h=244°
   * ───────────────────────────────────────────────────────────────────────── */
  --sii-secondary-50:  #eef6fd;
  --sii-secondary-100: #dfedf9;
  --sii-secondary-200: #c3dbef;
  --sii-secondary-300: #9ac3e6;
  --sii-secondary-400: #5ea6de;
  --sii-secondary-500: #0693e3;  /* token base institucional */
  --sii-secondary-600: #005ca0;
  --sii-secondary-700: #004077;
  --sii-secondary-800: #002851;
  --sii-secondary-900: #001530;

  /* ─────────────────────────────────────────────────────────────────────────
   * ESCALA ACCENT (naranja institucional)
   * Base: #ff6900  |  OKLCH L=0.70 C=0.20 h=44°
   * ───────────────────────────────────────────────────────────────────────── */
  --sii-accent-50:  #fff2ec;
  --sii-accent-100: #fde6dc;
  --sii-accent-200: #f4cebe;
  --sii-accent-300: #edad91;
  --sii-accent-400: #e57f4f;
  --sii-accent-500: #ff6900;    /* token base institucional */
  --sii-accent-600: #a31e00;
  --sii-accent-700: #790300;
  --sii-accent-800: #520000;
  --sii-accent-900: #310000;

  /* ─────────────────────────────────────────────────────────────────────────
   * ESCALA NEUTRAL (ink)
   * Gris azulado de alta legibilidad. Se mantiene igual que en base.html.
   * ───────────────────────────────────────────────────────────────────────── */
  --sii-ink-50:  #f8f9fb;
  --sii-ink-100: #eef0f4;
  --sii-ink-200: #d8dde5;
  --sii-ink-300: #b3bac6;
  --sii-ink-400: #7d8696;
  --sii-ink-500: #5a6374;
  --sii-ink-600: #434b5a;
  --sii-ink-700: #333a47;
  --sii-ink-800: #242935;
  --sii-ink-900: #171b23;

  /* ─────────────────────────────────────────────────────────────────────────
   * TOKENS DE SUPERFICIE (fondo de app, cards, elevación)
   * ───────────────────────────────────────────────────────────────────────── */
  --sii-bg-app:      var(--sii-ink-50);       /* fondo global */
  --sii-bg-surface:  #ffffff;                  /* cards y paneles */
  --sii-bg-elevated: #ffffff;                  /* modales y dropdowns */
  --sii-bg-sidebar:  var(--sii-ink-900);       /* barra lateral */

  /* ─────────────────────────────────────────────────────────────────────────
   * TOKENS DE TEXTO
   * ───────────────────────────────────────────────────────────────────────── */
  --sii-text-primary:  var(--sii-ink-800);     /* cuerpo principal */
  --sii-text-secondary:var(--sii-ink-600);     /* etiquetas, subtítulos */
  --sii-text-muted:    var(--sii-ink-500);     /* placeholders, captions */
  --sii-text-subtle:   var(--sii-ink-400);     /* texto deshabilitado */
  --sii-text-inverse:  #ffffff;                /* sobre fondos oscuros */
  --sii-text-brand:    var(--sii-primary-500); /* links y acciones primarias */

  /* ─────────────────────────────────────────────────────────────────────────
   * TOKENS DE BORDE
   * ───────────────────────────────────────────────────────────────────────── */
  --sii-border-default: var(--sii-ink-200);
  --sii-border-strong:  var(--sii-ink-300);
  --sii-border-focus:   var(--sii-primary-500);

  /* ─────────────────────────────────────────────────────────────────────────
   * TOKENS DE ESTADO SEMÁNTICO
   * ───────────────────────────────────────────────────────────────────────── */

  /* danger: coincide con primary (rojo institucional) */
  --sii-state-danger-bg:     var(--sii-primary-50);
  --sii-state-danger-border: var(--sii-primary-200);
  --sii-state-danger-text:   var(--sii-primary-700);
  --sii-state-danger-icon:   var(--sii-primary-500);

  /* warning: coincide con accent (naranja institucional) */
  --sii-state-warning-bg:     var(--sii-accent-50);
  --sii-state-warning-border: var(--sii-accent-200);
  --sii-state-warning-text:   var(--sii-accent-700);
  --sii-state-warning-icon:   var(--sii-accent-500);

  /* success: verde neutro derivado (no institucional, solo semántico) */
  --sii-state-success-bg:     #f0fdf4;
  --sii-state-success-border: #bbf7d0;
  --sii-state-success-text:   #166534;
  --sii-state-success-icon:   #22c55e;

  /* info: coincide con secondary (azul institucional) */
  --sii-state-info-bg:     var(--sii-secondary-50);
  --sii-state-info-border: var(--sii-secondary-200);
  --sii-state-info-text:   var(--sii-secondary-700);
  --sii-state-info-icon:   var(--sii-secondary-500);

  /* ─────────────────────────────────────────────────────────────────────────
   * TOKENS DE TIPOGRAFÍA
   * ───────────────────────────────────────────────────────────────────────── */
  --sii-font-sans:  'Inter', system-ui, sans-serif;
  --sii-font-serif: 'Merriweather', Georgia, serif;

  /* Escala tipográfica */
  --sii-text-display: 700 2.25rem/1.25 var(--sii-font-serif);  /* 36px, splash, reportes */
  --sii-text-h1:      700 1.75rem/1.30 var(--sii-font-serif);  /* 28px */
  --sii-text-h2:      700 1.25rem/1.40 var(--sii-font-serif);  /* 20px */
  --sii-text-h3:      600 1.05rem/1.50 var(--sii-font-sans);   /* 17px */
  --sii-text-body:    400 0.875rem/1.60 var(--sii-font-sans);  /* 14px */
  --sii-text-small:   400 0.8125rem/1.55 var(--sii-font-sans); /* 13px */
  --sii-text-caption: 500 0.75rem/1.40 var(--sii-font-sans);   /* 12px, uppercase */

  /* Espaciado de tracking para captions */
  --sii-tracking-caption: 0.05em;

  /* ─────────────────────────────────────────────────────────────────────────
   * TOKENS DE RADIO Y SOMBRA
   * ───────────────────────────────────────────────────────────────────────── */
  --sii-radius-sm:  0.25rem;  /* 4px  */
  --sii-radius-md:  0.375rem; /* 6px  */
  --sii-radius-lg:  0.5rem;   /* 8px  */
  --sii-radius-xl:  0.75rem;  /* 12px */
  --sii-radius-pill:9999px;

  --sii-shadow-sm:  0 1px 2px 0 rgb(0 0 0 / 0.05);
  --sii-shadow-md:  0 4px 6px -1px rgb(0 0 0 / 0.08), 0 2px 4px -2px rgb(0 0 0 / 0.05);
  --sii-shadow-lg:  0 10px 15px -3px rgb(0 0 0 / 0.08), 0 4px 6px -4px rgb(0 0 0 / 0.04);

  /* ─────────────────────────────────────────────────────────────────────────
   * TOKENS DE TRANSICIÓN
   * ───────────────────────────────────────────────────────────────────────── */
  --sii-transition-fast:   100ms ease;
  --sii-transition-base:   200ms ease;
  --sii-transition-slow:   300ms ease;
}