/* ============================================================
   SIAE / IEPC Aspirantes — Foundation Tokens
   Source of truth for colors + typography across the system.
   Extracted 1:1 from the Aspirantes SPA React codebase
   (_source/*) and normalized into a single token set.
   ============================================================ */

/* ---------- Webfont ---------- */
@import url("https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400;1,600&display=swap");

:root {
  /* ============================================================
     COLORS — PRIMARY (IEPC institutional magenta)
     The brand pivots around a vibrant pink/magenta. The codebase
     uses several near-identical magentas in different files;
     the canonical scale below collapses them into 50→900.
     ============================================================ */
  --pink-50:  #fff5f9;   /* sidebar hover bg, hero washes */
  --pink-75:  #fff0f5;   /* outline button hover */
  --pink-100: #ffe4f0;   /* subtle bg, focus ring */
  --pink-150: #fbcfe8;   /* progress track */
  --pink-200: #f7cddf;   /* visual splash gradient */
  --pink-300: #f1d2df;   /* empty-state borders */
  --pink-400: #ff6ba6;   /* mid tint */
  --pink-500: #ff0c75;   /* ⭐ PRIMARY — IEPC institutional pink */
  --pink-600: #e91e63;   /* alt primary, button focus rings */
  --pink-700: #c41e72;   /* link color, dark hover */
  --pink-800: #aa1d52;   /* primary :hover */
  --pink-900: #8c1745;   /* darkest, rarely used */

  /* Two extra primary tones the codebase relies on by name */
  --pink-rose:    #fb7185;   /* progress gradient end */
  --pink-cerise:  #c3005f;   /* register card accent */
  --pink-magenta: #e10072;   /* gradient button start */
  --pink-magenta-dark: #c90061; /* gradient button end */

  /* ============================================================
     COLORS — NEUTRALS (Bootstrap-4 derived grays)
     ============================================================ */
  --gray-00:  #ffffff;
  --gray-05:  #f8f9fa;   /* AdminLTE bg */
  --gray-10:  #f3f4f6;   /* page bg */
  --gray-15:  #f5f6f8;   /* panel bg */
  --gray-20:  #f7f7f8;   /* register card bg */
  --gray-25:  #ebedf0;   /* gradient bg start */
  --gray-30:  #e8eaee;   /* gradient bg end */
  --gray-40:  #e6e7ea;   /* hairline border */
  --gray-50:  #dee2e6;   /* control bg */
  --gray-60:  #ced4da;   /* input border */
  --gray-70:  #adb5bd;   /* disabled */
  --gray-80:  #8d8d8d;   /* placeholder icon */
  --gray-90:  #6c757d;   /* muted text */
  --gray-100: #5b6472;   /* section title (closed) */
  --gray-200: #495057;   /* nav-link text */
  --gray-300: #374151;   /* body strong */
  --gray-400: #212529;   /* body base */
  --gray-500: #111827;   /* headings */

  /* ============================================================
     COLORS — SEMANTIC
     ============================================================ */
  --success:        #28a745;
  --success-bg:     #ecfdf3;
  --success-bg-2:   #f0fdf4;
  --success-border: #86efac;
  --success-text:   #15803d;
  --success-text-2: #166534;

  --warning:        #ffc107;
  --warning-bg:     #fffbeb;
  --warning-border: #fcd34d;
  --warning-text:   #92400e;

  --danger:         #dc3545;
  --danger-bg:      #fef2f2;
  --danger-border:  #fecaca;
  --danger-text:    #b91c1c;
  --danger-text-2:  #991b1b;

  --info:           #1d4ed8;
  --info-bg:        #eff6ff;
  --info-border:    #93c5fd;

  /* ============================================================
     SEMANTIC ROLES — what to call from app code
     ============================================================ */
  --color-bg:           var(--gray-10);
  --color-surface:      var(--gray-00);
  --color-surface-alt:  var(--gray-15);
  --color-border:       var(--gray-40);
  --color-border-strong:var(--gray-60);
  --color-text:         var(--gray-400);
  --color-text-muted:   var(--gray-90);
  --color-text-soft:    var(--gray-100);
  --color-heading:      var(--gray-500);
  --color-link:         var(--pink-700);
  --color-link-hover:   var(--pink-800);
  --color-primary:      var(--pink-500);
  --color-primary-hover:var(--pink-800);
  --color-on-primary:   var(--gray-00);
  --color-focus-ring:   rgba(255, 12, 117, 0.18);
  --color-icon-pink:    var(--pink-500);
  --color-icon-muted:   var(--gray-90);

  /* ============================================================
     TYPOGRAPHY
     ============================================================ */
  --font-sans: "Source Sans 3", "Source Sans Pro", -apple-system,
               BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
               Arial, sans-serif;
  --font-heading: var(--font-sans);
  --font-mono: ui-monospace, "SFMono-Regular", Consolas,
               "Liberation Mono", monospace;

  /* Weights — Source Sans is shipped 300/400/500/600/700/800 */
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  /* Type scale (rem-based; root font is 16px) */
  --fs-12: 0.75rem;
  --fs-13: 0.8125rem;
  --fs-14: 0.875rem;
  --fs-15: 0.9375rem;
  --fs-16: 1rem;
  --fs-17: 1.0625rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-22: 1.375rem;
  --fs-24: 1.5rem;
  --fs-28: 1.75rem;
  --fs-32: 2rem;
  --fs-36: 2.25rem;
  --fs-42: 2.625rem;
  --fs-48: 3rem;

  /* Line heights */
  --lh-tight: 1.15;
  --lh-snug:  1.3;
  --lh-base:  1.5;
  --lh-loose: 1.6;

  /* Letter spacing */
  --tracking-tight: -0.01em;
  --tracking-normal: 0;
  --tracking-wide: 0.01em;
  --tracking-caps: 0.12em;

  /* ============================================================
     SPACING — 4-px base (matches Bootstrap 4 multiples)
     ============================================================ */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ============================================================
     RADII
     ============================================================ */
  --radius-sm: 4px;     /* admin inputs, bootstrap default */
  --radius-md: 8px;     /* login inputs, alerts */
  --radius-lg: 10px;    /* register inputs, primary cta */
  --radius-xl: 12px;    /* cards in flow */
  --radius-2xl: 14px;   /* register card mobile */
  --radius-3xl: 20px;   /* register/verify card desktop */
  --radius-pill: 999px; /* status pills, primary login btn */

  /* ============================================================
     SHADOWS — values lifted from the codebase
     ============================================================ */
  --shadow-card-1: 0 2px 4px rgba(0, 0, 0, 0.06);
  --shadow-card-2: 0 12px 28px rgba(0, 0, 0, 0.07);
  --shadow-nav:    0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  --shadow-btn:    0 0.6rem 1.2rem rgba(233, 30, 99, 0.28);
  --shadow-btn-lg: 0 8px 14px rgba(201, 0, 97, 0.24);
  --shadow-focus:  0 0 0 0.2rem rgba(233, 30, 99, 0.12);

  /* ============================================================
     LAYOUT
     ============================================================ */
  --sidebar-w: 250px;
  --sidebar-w-collapsed: 4.6rem;   /* ≈73.6px */
  --navbar-h: 56px;
  --content-max: 900px;

  /* ============================================================
     MOTION
     ============================================================ */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* card-enter */
  --dur-fast: 150ms;
  --dur-base: 200ms;
  --dur-slow: 300ms;
  --dur-card-enter: 450ms;
}

/* ============================================================
   SEMANTIC TYPOGRAPHY CLASSES
   Use these (or copy them) in app code; they don't depend on
   AdminLTE/Bootstrap and won't fight existing global resets.
   ============================================================ */
.ds-h1 {
  font: var(--fw-extrabold) var(--fs-42) / var(--lh-tight) var(--font-heading);
  letter-spacing: var(--tracking-tight);
  color: var(--color-heading);
}
.ds-h2 {
  font: var(--fw-bold) var(--fs-32) / var(--lh-snug) var(--font-heading);
  color: var(--color-heading);
}
.ds-h3 {
  font: var(--fw-semibold) var(--fs-24) / var(--lh-snug) var(--font-heading);
  color: var(--color-heading);
}
.ds-h4 {
  font: var(--fw-semibold) var(--fs-20) / var(--lh-snug) var(--font-heading);
  color: var(--color-heading);
}
.ds-h5 {
  font: var(--fw-semibold) var(--fs-16) / var(--lh-base) var(--font-heading);
  color: var(--color-heading);
}
.ds-body {
  font: var(--fw-regular) var(--fs-16) / var(--lh-loose) var(--font-sans);
  color: var(--color-text);
}
.ds-body-sm {
  font: var(--fw-regular) var(--fs-14) / var(--lh-base) var(--font-sans);
  color: var(--color-text-muted);
}
.ds-caption {
  font: var(--fw-regular) var(--fs-12) / var(--lh-base) var(--font-sans);
  color: var(--color-text-muted);
}
.ds-label {
  font: var(--fw-semibold) var(--fs-15) / var(--lh-base) var(--font-sans);
  color: var(--gray-200);
}
.ds-eyebrow {
  font: var(--fw-bold) var(--fs-12) / var(--lh-base) var(--font-sans);
  color: var(--color-link);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
}
.ds-mono {
  font: var(--fw-regular) var(--fs-14) / var(--lh-base) var(--font-mono);
  color: var(--color-text);
}