/* =========================================================================
   Estudia con Carol — design tokens
   Import this file into any HTML/JSX you build for the brand.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=Source+Serif+4:opsz,wght@8..60,400;8..60,500;8..60,600&display=swap');

:root {
  /* -----------------------------------------------------------------------
     COLOR — base palette
     ----------------------------------------------------------------------- */

  /* Surfaces */
  --bg-canvas:    #FBF8F0;  /* warm paper — main page background */
  --bg-surface:   #FFFFFF;  /* cards, modals, elevated content */
  --bg-elevated:  #FFFEFB;  /* very subtly off-white */
  --bg-muted:     #F4EFE2;  /* soft beige — secondary sections, highlights */
  --bg-deep:      #ECE5D2;  /* a step darker — table headers, footer */

  /* Ink (text) */
  --ink:    #1A1F1A;  /* primary text — near-black with green tint, never #000 */
  --ink-2:  #4A524A;  /* secondary text */
  --ink-3:  #7A8278;  /* tertiary text, metadata, placeholders */
  --ink-4:  #A6AAA1;  /* disabled, very low contrast */

  /* Lines */
  --line:         #E5DFCF;  /* warm border, default */
  --line-strong:  #C9C0A8;  /* a step darker for hover/active */
  --line-ink:     #1A1F1A;  /* full-contrast emphasis border */

  /* Accents — use sparingly, never as large background fills */
  --terracotta:        #D97757;
  --terracotta-deep:   #B85C3E;
  --terracotta-soft:   #F5E1D6;

  --forest:        #2B3A2B;
  --forest-deep:   #1E2A1E;
  --forest-soft:   #DCE3D6;

  --amber:         #D4A017;
  --amber-deep:    #A87C0E;
  --amber-soft:    #FBE9A4;

  /* Subject colors (chips, category accents) */
  --subj-mates:        var(--terracotta);
  --subj-mates-soft:   var(--terracotta-soft);
  --subj-lengua:       var(--forest);
  --subj-lengua-soft:  var(--forest-soft);
  --subj-historia:     var(--amber-deep);
  --subj-historia-soft:var(--amber-soft);
  --subj-biologia:     #6B7A3C;
  --subj-biologia-soft:#E5E8D2;
  --subj-fisica:       #4A5D6F;
  --subj-fisica-soft:  #DDE4EA;
  --subj-otras:        #8A8478;
  --subj-otras-soft:   #E8E4DC;

  /* Semantic */
  --success:  #4F7A4A;
  --warning:  #C8893E;
  --danger:   #B5483B;
  --info:     #4A5D6F;

  /* -----------------------------------------------------------------------
     TYPE — families
     ----------------------------------------------------------------------- */
  --font-mono:   'IBM Plex Mono', ui-monospace, 'JetBrains Mono', 'Menlo', monospace;
  --font-serif:  'Source Serif 4', 'Source Serif Pro', Georgia, 'Times New Roman', serif;

  /* Weights */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;

  /* -----------------------------------------------------------------------
     TYPE — semantic styles (use these in CSS as composite vars)
     Example:  h1 { font: var(--type-h1); color: var(--ink); }
     ----------------------------------------------------------------------- */

  /* Display (rare — hero/landing only) */
  --type-display:  var(--fw-medium) 56px/1.05 var(--font-mono);

  /* Headings — IBM Plex Mono, tighter line-height */
  --type-h1:  var(--fw-medium)   36px/1.15 var(--font-mono);
  --type-h2:  var(--fw-medium)   26px/1.2  var(--font-mono);
  --type-h3:  var(--fw-medium)   20px/1.25 var(--font-mono);
  --type-h4:  var(--fw-semibold) 16px/1.3  var(--font-mono);

  /* Body — Source Serif 4, generous line-height */
  --type-body-lg:  var(--fw-regular) 19px/1.6 var(--font-serif);
  --type-body:     var(--fw-regular) 17px/1.65 var(--font-serif);
  --type-body-sm:  var(--fw-regular) 15px/1.6 var(--font-serif);

  /* UI — short labels in mono */
  --type-ui:        var(--fw-medium)   14px/1.4 var(--font-mono);
  --type-ui-sm:     var(--fw-medium)   12px/1.4 var(--font-mono);
  --type-label:     var(--fw-medium)   11px/1.3 var(--font-mono); /* uppercase tracking labels */
  --type-meta:      var(--fw-regular)  12px/1.4 var(--font-mono);
  --type-code:      var(--fw-regular)  14px/1.5 var(--font-mono);

  /* Tracking helpers */
  --tracking-label:   0.08em;
  --tracking-tight:  -0.01em;

  /* -----------------------------------------------------------------------
     SPACING — 4px scale
     ----------------------------------------------------------------------- */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-8:  32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-24: 96px;

  /* -----------------------------------------------------------------------
     RADII
     ----------------------------------------------------------------------- */
  --r-sm:    4px;
  --r-md:    6px;   /* buttons, inputs */
  --r-lg:    8px;   /* cards */
  --r-xl:    12px;  /* large surfaces */
  --r-pill:  999px;

  /* -----------------------------------------------------------------------
     SHADOWS — barely there
     ----------------------------------------------------------------------- */
  --shadow-none:    none;
  --shadow-hover:   0 1px 2px rgba(26,31,26,0.04), 0 2px 8px rgba(26,31,26,0.04);
  --shadow-card:    0 1px 0 rgba(26,31,26,0.02);
  --shadow-modal:   0 12px 32px rgba(26,31,26,0.12), 0 2px 6px rgba(26,31,26,0.06);

  /* -----------------------------------------------------------------------
     LAYOUT
     ----------------------------------------------------------------------- */
  --w-reading:  680px;   /* long-form body */
  --w-page:     1240px;  /* page container */
  --pad-page:   32px;

  /* -----------------------------------------------------------------------
     ANIMATION
     ----------------------------------------------------------------------- */
  --ease:       cubic-bezier(0.2, 0, 0, 1);
  --t-fast:     120ms;
  --t-base:     160ms;
  --t-slow:     240ms;

  /* -----------------------------------------------------------------------
     FOCUS
     ----------------------------------------------------------------------- */
  --focus-ring: 0 0 0 2px var(--bg-canvas), 0 0 0 4px var(--terracotta);
}

/* =========================================================================
   Element baselines — opt-in. Apply via `.ecc-base` wrapper or `body`.
   ========================================================================= */

.ecc-base, .ecc-base * { box-sizing: border-box; }

.ecc-base {
  background: var(--bg-canvas);
  color: var(--ink);
  font: var(--type-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.ecc-base h1 { font: var(--type-h1); letter-spacing: var(--tracking-tight); margin: 0 0 var(--s-4); }
.ecc-base h2 { font: var(--type-h2); letter-spacing: var(--tracking-tight); margin: 0 0 var(--s-3); }
.ecc-base h3 { font: var(--type-h3); margin: 0 0 var(--s-3); }
.ecc-base h4 { font: var(--type-h4); margin: 0 0 var(--s-2); }

.ecc-base p  { font: var(--type-body); margin: 0 0 var(--s-4); color: var(--ink); }
.ecc-base p.lead { font: var(--type-body-lg); color: var(--ink-2); }
.ecc-base small { font: var(--type-meta); color: var(--ink-3); }

.ecc-base a {
  color: var(--terracotta-deep);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  transition: color var(--t-fast) var(--ease);
}
.ecc-base a:hover { color: var(--terracotta); }

.ecc-base mark {
  background: var(--amber-soft);
  color: var(--ink);
  padding: 0 2px;
}

.ecc-base code, .ecc-base kbd {
  font: var(--type-code);
  background: var(--bg-muted);
  border: 1px solid var(--line);
  padding: 1px 6px;
  border-radius: var(--r-sm);
}

.ecc-base hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: var(--s-8) 0;
}

.ecc-base .label {
  font: var(--type-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--ink-3);
}

/* Focus ring — keyboard only */
.ecc-base :focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--r-sm);
}