@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&family=Poppins:wght@600;700&display=swap');

:root {
  --font-body:    'Nunito', sans-serif;
  --font-display: 'Poppins', sans-serif;

  --color-page-bg:   #F5F7FA;
  --color-text:      #2D3748;
  --color-text-soft: #718096;
  --color-white:     #FFFFFF;
  --color-shadow:    rgba(0, 0, 0, 0.08);

  /* MATEMÁTICAS */
  --mat-primary: #C4D4E8;  --mat-accent: #1a3a5c;
  --mat-light:   #e8eef5;  --mat-text:   #1a3a5c;  --mat-icon-op: 0.08;

  /* LECTURA CRÍTICA */
  --lc-primary:  #C4B0E6;  --lc-accent:  #5b3fa0;
  --lc-light:    #ede8ff;  --lc-text:    #5b3fa0;  --lc-icon-op: 0.07;

  /* CIENCIAS NATURALES */
  --cn-primary:  #A8D8B9;  --cn-accent:  #1e8a4a;
  --cn-light:    #d4f0e2;  --cn-text:    #1e8a4a;  --cn-icon-op: 0.08;

  /* COMPETENCIAS CIUDADANAS */
  --cc-primary:  #F5D08A;  --cc-accent:  #e8a020;
  --cc-light:    #fef3d7;  --cc-text:    #8B5A00;  --cc-icon-op: 0.08;

  /* INGLÉS */
  --ing-primary:  #F4B8B5;  --ing-accent:  #c0392b;
  --ing-light:    #fde8e6;  --ing-text:    #c0392b;  --ing-icon-op: 0.07;

  /* Estados */
  --color-correct: #1E8449;
  --color-wrong:   #C0392B;
  --color-hint:    #2471A3;

  /* Espaciado y radios */
  --sp-xs: 4px;  --sp-sm: 8px;   --sp-md: 16px;
  --sp-lg: 32px; --sp-xl: 64px;
  --r-card: 16px; --r-btn: 10px;

  /* Variables genéricas de área — sobreescritas por data-area */
  --area-primary: var(--mat-primary);
  --area-accent:  var(--mat-accent);
  --area-light:   var(--mat-light);
  --area-text:    var(--mat-text);
  --area-icon-op: var(--mat-icon-op);
}

[data-area="mat"] { --area-primary:var(--mat-primary); --area-accent:var(--mat-accent); --area-light:var(--mat-light); --area-text:var(--mat-text); --area-icon-op:var(--mat-icon-op); }
[data-area="lc"]  { --area-primary:var(--lc-primary);  --area-accent:var(--lc-accent);  --area-light:var(--lc-light);  --area-text:var(--lc-text);  --area-icon-op:var(--lc-icon-op);  }
[data-area="cn"]  { --area-primary:var(--cn-primary);  --area-accent:var(--cn-accent);  --area-light:var(--cn-light);  --area-text:var(--cn-text);  --area-icon-op:var(--cn-icon-op);  }
[data-area="cc"]  { --area-primary:var(--cc-primary);  --area-accent:var(--cc-accent);  --area-light:var(--cc-light);  --area-text:var(--cc-text);  --area-icon-op:var(--cc-icon-op);  }
[data-area="soc"] { --area-primary:var(--cc-primary); --area-accent:var(--cc-accent); --area-light:var(--cc-light); --area-text:var(--cc-text); --area-icon-op:var(--cc-icon-op);  }
[data-area="ing"] { --area-primary:var(--ing-primary); --area-accent:var(--ing-accent); --area-light:var(--ing-light); --area-text:var(--ing-text); --area-icon-op:var(--ing-icon-op); }