/* ============================================================
   EDUINTEGRA — DESIGN TOKENS
   Fuente única de verdad para colores, tipografía,
   espaciado, radios, sombras y motion en toda la PWA.
   ============================================================ */

:root {

  /* ── Brand / Header ────────────────────────────────────── */
  --color-brand-950:  #07122e;
  --color-brand-900:  #0f1f40;
  --color-brand-800:  #1a3a6b;   /* fondo principal del header */
  --color-brand-700:  #1d3276;   /* theme-color / sidebar */
  --color-brand-600:  #243e96;   /* sidebar top gradient */
  --color-brand-500:  #2f5bb8;
  --color-brand-400:  #3f78f2;   /* acento azul claro */
  --color-brand-300:  #6ea8ff;   /* bnav active accent */
  --color-brand-200:  #b3d0ff;
  --color-brand-100:  #eef4ff;   /* fondos de tarjetas / ice */
  --color-brand-50:   #f4f8ff;

  /* ── Action Colors — botones principales ───────────────── */
  /* Usar estos colores consistentemente en TODAS las pantallas */
  --color-action-blue:    #2979FF;   /* Inicio / Perfil */
  --color-action-green:   #2ECC40;   /* Asistencia */
  --color-action-orange:  #FF6B00;   /* Calificaciones */
  --color-action-purple:  #7B2FBE;   /* Tareas / Finanzas */
  --color-action-teal:    #00BCD4;   /* Comunidad */
  --color-action-pink:    #E91E63;   /* Reportes / Calendario */

  /* Tonos translúcidos para fondos de íconos */
  --color-action-blue-bg:    rgba(41, 121, 255, 0.12);
  --color-action-green-bg:   rgba(46, 204, 64,  0.12);
  --color-action-orange-bg:  rgba(255, 107, 0,  0.12);
  --color-action-purple-bg:  rgba(123, 47, 190, 0.12);
  --color-action-teal-bg:    rgba(0, 188, 212,  0.12);
  --color-action-pink-bg:    rgba(233, 30, 99,  0.12);

  /* Versiones oscuras para hover / pressed */
  --color-action-blue-dark:    #1a5fd4;
  --color-action-green-dark:   #20a832;
  --color-action-orange-dark:  #cc5500;
  --color-action-purple-dark:  #5e2090;
  --color-action-teal-dark:    #0097a7;
  --color-action-pink-dark:    #c2185b;

  /* ── Neutrals ───────────────────────────────────────────── */
  --color-text-primary:    #0f1f40;
  --color-text-secondary:  #4a5d82;
  --color-text-muted:      #7086ab;
  --color-text-placeholder: #aab8d4;
  --color-text-on-dark:    #ffffff;
  --color-text-on-dark-80: rgba(255, 255, 255, 0.80);
  --color-text-on-dark-60: rgba(255, 255, 255, 0.60);

  --color-surface:         #ffffff;
  --color-surface-alt:     #f4f7ff;
  --color-background:      #edf3ff;
  --color-background-app:  #ebf1ff;
  --color-border:          #d6e3fb;
  --color-border-light:    #e8f0fe;
  --color-divider:         #edf2fc;

  /* ── Semantic / Status ──────────────────────────────────── */
  --color-success:  #16a34a;
  --color-warning:  #d97706;
  --color-error:    #dc2626;
  --color-info:     var(--color-action-blue);

  /* ── Typography ─────────────────────────────────────────── */
  --font-family-base: Manrope, Nunito, sans-serif;

  --font-weight-regular:   400;
  --font-weight-medium:    500;
  --font-weight-semibold:  600;
  --font-weight-bold:      700;
  --font-weight-extrabold: 800;

  /* Font sizes */
  --text-2xs:  0.625rem;   /* 10px */
  --text-xs:   0.6875rem;  /* 11px */
  --text-sm:   0.75rem;    /* 12px */
  --text-base: 0.875rem;   /* 14px */
  --text-md:   1rem;       /* 16px */
  --text-lg:   1.125rem;   /* 18px */
  --text-xl:   1.25rem;    /* 20px */
  --text-2xl:  1.5rem;     /* 24px */
  --text-3xl:  1.875rem;   /* 30px */

  /* Line heights */
  --leading-tight:  1.2;
  --leading-snug:   1.35;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  /* Letter spacing */
  --tracking-tight:   -0.02em;
  --tracking-normal:   0;
  --tracking-wide:     0.04em;
  --tracking-wider:    0.06em;   /* etiquetas de botones en MAYÚSCULAS */
  --tracking-widest:   0.10em;

  /* ── Header ─────────────────────────────────────────────── */
  --header-bg:         linear-gradient(135deg, var(--color-brand-800) 0%, var(--color-brand-600) 100%);
  --header-bg-solid:   var(--color-brand-800);
  --header-height:     60px;
  --header-color:      var(--color-text-on-dark);
  --header-shadow:     0 2px 16px rgba(7, 18, 46, 0.30);

  /* ── Bottom Navigation ──────────────────────────────────── */
  --bnav-bg:            linear-gradient(180deg, #1c3280 0%, #152060 100%);
  --bnav-height:        56px;
  --bnav-color:         rgba(160, 190, 255, 0.70);
  --bnav-color-active:  #ffffff;
  --bnav-accent:        var(--color-brand-300);
  --bnav-shadow:        0 -6px 20px -4px rgba(10, 25, 70, 0.45);

  /* ── Safe Area Insets ───────────────────────────────────── */
  --sat: env(safe-area-inset-top,    0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left,   0px);
  --sar: env(safe-area-inset-right,  0px);

  /* ── Spacing scale (4px base) ───────────────────────────── */
  --space-1:  0.25rem;   /*  4px */
  --space-2:  0.5rem;    /*  8px */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.25rem;   /* 20px */
  --space-6:  1.5rem;    /* 24px */
  --space-8:  2rem;      /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */

  /* ── Border Radius ──────────────────────────────────────── */
  --radius-xs:   0.25rem;   /*  4px */
  --radius-sm:   0.5rem;    /*  8px */
  --radius-md:   0.75rem;   /* 12px */
  --radius-lg:   1rem;      /* 16px */
  --radius-xl:   1.25rem;   /* 20px */
  --radius-2xl:  1.5rem;    /* 24px */
  --radius-3xl:  2rem;      /* 32px */
  --radius-full: 9999px;

  /* ── Shadows ────────────────────────────────────────────── */
  --shadow-sm:   0 1px 4px  rgba(15, 31, 64, 0.08);
  --shadow-md:   0 4px 16px rgba(15, 31, 64, 0.12);
  --shadow-lg:   0 8px 28px rgba(15, 31, 64, 0.16);
  --shadow-xl:   0 16px 48px rgba(15, 31, 64, 0.20);
  --shadow-card: 0 2px 12px rgba(41, 121, 255, 0.08);
  --shadow-btn:  0 4px 12px rgba(0, 0, 0, 0.18);
  --shadow-bnav: var(--bnav-shadow);

  /* ── Motion ─────────────────────────────────────────────── */
  --motion-ease:   cubic-bezier(0.22, 1, 0.36, 1);
  --motion-ease-in: cubic-bezier(0.4, 0, 1, 1);
  --motion-ease-out: cubic-bezier(0, 0, 0.2, 1);
  --motion-fast:   180ms;
  --motion-normal: 280ms;
  --motion-slow:   400ms;

  /* ── Z-index scale ──────────────────────────────────────── */
  --z-base:     1;
  --z-raised:   10;
  --z-dropdown: 30;
  --z-overlay:  40;
  --z-modal:    50;
  --z-toast:    60;
  --z-top:      70;

  /* ── Button component tokens ────────────────────────────── */
  --btn-height:         48px;
  --btn-height-sm:      36px;
  --btn-height-lg:      56px;
  --btn-padding:        0 var(--space-5);
  --btn-radius:         var(--radius-lg);
  --btn-font-weight:    var(--font-weight-bold);
  --btn-letter-spacing: var(--tracking-wider);
  --btn-text-transform: uppercase;
  --btn-font-size:      var(--text-sm);
  --btn-shadow:         var(--shadow-btn);
  --btn-transition:     background var(--motion-fast) var(--motion-ease),
                        transform  var(--motion-fast) var(--motion-ease),
                        box-shadow var(--motion-fast) var(--motion-ease);

  /* ── Card component tokens ──────────────────────────────── */
  --card-bg:      var(--color-surface);
  --card-radius:  var(--radius-xl);
  --card-shadow:  var(--shadow-card);
  --card-border:  1px solid var(--color-border-light);
  --card-padding: var(--space-5);
}

/* ── Utility classes para action colors ─────────────────────
   Úsalas en cualquier pantalla para colorear botones/íconos
   con los colores semánticos del sistema.
   ─────────────────────────────────────────────────────────── */

.action-blue   { background-color: var(--color-action-blue);   color: #fff; }
.action-green  { background-color: var(--color-action-green);  color: #fff; }
.action-orange { background-color: var(--color-action-orange); color: #fff; }
.action-purple { background-color: var(--color-action-purple); color: #fff; }
.action-teal   { background-color: var(--color-action-teal);   color: #fff; }
.action-pink   { background-color: var(--color-action-pink);   color: #fff; }

.action-blue-bg   { background-color: var(--color-action-blue-bg);   color: var(--color-action-blue);   }
.action-green-bg  { background-color: var(--color-action-green-bg);  color: var(--color-action-green);  }
.action-orange-bg { background-color: var(--color-action-orange-bg); color: var(--color-action-orange); }
.action-purple-bg { background-color: var(--color-action-purple-bg); color: var(--color-action-purple); }
.action-teal-bg   { background-color: var(--color-action-teal-bg);   color: var(--color-action-teal);   }
.action-pink-bg   { background-color: var(--color-action-pink-bg);   color: var(--color-action-pink);   }

/* ── Tipografía semántica ────────────────────────────────── */

.section-title {
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  font-size: var(--text-lg);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
}

.section-subtitle {
  font-weight: var(--font-weight-regular);
  color: var(--color-text-muted);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
}

.btn-label {
  font-weight: var(--btn-font-weight);
  letter-spacing: var(--btn-letter-spacing);
  text-transform: var(--btn-text-transform);
  font-size: var(--btn-font-size);
  color: var(--color-text-on-dark);
}