/* ============================================================
   AI4Colegios — "Libro de Pago" Design System
   colors_and_type.css
   Source of truth: ai4colegios-design-system/code/index.html :root
   AI4N house style — code-first (no Figma). Navy + teal.
   Fonts are SYSTEM fonts (Georgia / system-ui / Courier New) — nothing to install.
   ============================================================ */

/* ---------- LIGHT MODE TOKENS (default) ---------- */
:root {
  /* Brand */
  --primary:        #1F2A44;   /* navy — header, sidebar base, headings */
  --primary-dark:   #121828;   /* deep navy — gradients */
  --accent:         #2C8C99;   /* teal — actions, links, active, focus ring */
  --accent-dark:    #1F6C77;   /* hover / pressed accent */
  --accent-light:   #5BB6C2;   /* light accent (dark-mode links) */
  --gold:           #C9A24B;   /* school crest */
  --gold-dark:      #8B6914;
  --wa-green:       #25D366;   /* WhatsApp send actions + health accent */

  /* Surfaces */
  --warm:    #FAF7F2;   /* page background (warm off-white) */
  --warm-2:  #F4F6FA;   /* card / subtle fills */
  --paper:   #FFFFFF;   /* surfaces */

  /* Lines */
  --grid:        #E5E7EB;   /* borders */
  --grid-strong: #D1D5DB;   /* dividers */

  /* Text hierarchy */
  --text:       #111827;
  --text-soft:  #374151;
  --text-muted: #6B7280;

  /* Status (each paired with a -bg tint) */
  --status-good:   #15803D;  --status-good-bg:   #DCFCE7;  /* al día / paid */
  --status-mora1:  #B45309;  --status-mora1-bg:  #FEF3C7;  /* 1 month overdue */
  --status-mora2:  #B91C1C;  --status-mora2-bg:  #FEE2E2;  /* 2+ months overdue */
  --status-pagado: #1E40AF;  --status-pagado-bg: #DBEAFE;  /* year paid */
  --status-remate: #7C3AED;  --status-remate-bg: #EDE9FE;  /* special */

  /* Payment methods */
  --cash-color:     #15803D;  --cash-bg:     #DCFCE7;
  --card-color:     #1E40AF;  --card-bg:     #DBEAFE;
  --transfer-color: #7C3AED;  --transfer-bg: #EDE9FE;

  /* Shell-specific */
  --sidebar-bg:     #161E33;
  --sidebar-hover:  #1F2A44;
  --sidebar-border: #0C1224;
  --header-bg:      #1F2A44;
  --header-text:    #F9FAFB;
  --row-even:       #FAFBFC;
  --thead-bg:       var(--warm-2);
  --money-cell:      #F3F4F6;
  --money-cell-paid: #ECFDF5;
  --money-cell-mora: #FEF2F2;

  --chip-wa-text:  #0B6B33;  --current-accent: #F59E0B;  --sidebar-muted: #7B8AB8;
  --focus-ring: 0 0 0 2px var(--paper), 0 0 0 4px var(--accent);

  /* ---------- TYPE SCALE ---------- */
  --font-serif: Georgia, "Times New Roman", serif;          /* page titles, receipts */
  --font-sans:  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono:  "Courier New", Courier, monospace;          /* money — tabular, lining */

  --fs-page-title: 24px;   /* serif page titles */
  --fs-h2:         17px;   /* serif rail / card headings */
  --fs-stat:       20px;   /* KPI value (mono) */
  --fs-body:       13.5px; /* body / controls */
  --fs-cell:       12.5px; /* table cells */
  --fs-small:      12px;
  --fs-label:      11px;   /* uppercase muted labels */
  --fs-micro:      10.5px;

  --lh-body: 1.45;
  --ls-label: 0.08em;      /* uppercase label tracking */

  /* ---------- SHAPE / SPACING ---------- */
  --radius-card:   10px;
  --radius-ctrl:   8px;    /* buttons / selects */
  --radius-input:  5px;    /* toolbar inputs */
  --radius-pill:   999px;
  --rail-left:     220px;  /* collapsed: 58px */
  --rail-right:    330px;  /* collapsed: 58px */
  --rail-collapsed: 58px;
}

/* ---------- DARK MODE TOKENS ---------- */
:root[data-theme="dark"] {
  --warm:    #0F1419;
  --warm-2:  #1A2030;
  --paper:   #181F2E;
  --grid:        #2A3245;
  --grid-strong: #3A4258;
  --text:       #E5E7EB;
  --text-soft:  #B0B6C0;
  --text-muted: #7B8AB8;

  --status-good-bg:   rgba(21,128,61,0.20);
  --status-mora1-bg:  rgba(180,83,9,0.22);
  --status-mora2-bg:  rgba(185,28,28,0.22);
  --status-pagado-bg: rgba(30,64,175,0.22);
  --status-remate-bg: rgba(124,58,237,0.22);
  --cash-bg:     rgba(21,128,61,0.18);
  --card-bg:     rgba(30,64,175,0.18);
  --transfer-bg: rgba(124,58,237,0.18);

  --sidebar-bg:     #0F1422;
  --sidebar-hover:  #1F2A44;
  --sidebar-border: #050810;
  --header-bg:      #1F2638;
  --header-text:    #E5E7EB;
  --row-even:       #1E2538;
  --thead-bg:       #1F2638;
  --money-cell:      #1A2030;
  --money-cell-paid: rgba(21,128,61,0.10);
  --money-cell-mora: rgba(185,28,28,0.10);

  --chip-wa-text:  #34D399;  --current-accent: #FBBF24;  --sidebar-muted: #7B8AB8;
  --focus-ring: 0 0 0 2px var(--paper), 0 0 0 4px var(--accent-light);
}

/* ============================================================
   SEMANTIC ELEMENT STYLES (opt-in, applied to real tags)
   ============================================================ */
body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text);
  background: var(--warm);
  font-variant-numeric: lining-nums;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .h1 {
  font-family: var(--font-serif);
  font-size: var(--fs-page-title);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
  margin: 0;
}
h2, .h2 {
  font-family: var(--font-serif);
  font-size: var(--fs-h2);
  font-weight: 600;
  color: var(--text);
  margin: 0;
}

/* uppercase tracked micro-label — the system's connective tissue */
.label, .eyebrow {
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  font-weight: 700;
  color: var(--text-muted);
}

/* money — always mono, tabular, lining */
.money, .amount {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums lining-nums;
}

code, kbd, samp, .mono {
  font-family: var(--font-mono);
}

a { color: var(--accent); }
a:hover { color: var(--accent-dark); }

:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 4px; }