/**
 * karm.dev Design System — Colors + Type
 * Foundation tokens. Import this before any component CSS.
 * changed
 * Vibe: Professional, minimalist, modern. Deep navy + emerald accent.
 * Spanish-first copywriting, full-stack developer portfolio context.
 */

/* ------------------------------------------------------------------
   FONT IMPORTS (Google Fonts)
   Merriweather — display serif (H1/H2, hero titles)
   Inter        — UI sans (H3+, body, labels, buttons)
   Fira Code    — monospace (code snippets, technical labels)
------------------------------------------------------------------ */
@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@400;700&family=Inter:wght@300;400;600;700&family=Fira+Code:wght@400;500&display=swap');

:root {
  /* ==================================================
     COLOR — PRIMITIVES (the raw palette)
     ================================================== */

  /* Navy — primary brand (confianza, profesionalismo) */
  --navy-900: #0F172E;   /* primary — buttons, headings, CTAs */
  --navy-700: #1A2A4A;   /* primary-light — hover */
  --navy-500: #2D3E5F;   /* primary-lighter — bg accent */

  /* Emerald — accent (crecimiento, acción) */
  --emerald-500: #10B981;   /* accent — success CTAs, highlights */
  --emerald-300: #6EE7B7;   /* accent-light — hover */
  --emerald-100: #D1FAE5;   /* accent-lightest — badge bg */

  /* Gray — neutrals */
  --gray-500: #6B7280;   /* body text */
  --gray-400: #9CA3AF;   /* hints, small labels */
  --gray-300: #D1D5DB;   /* subtle borders */
  --gray-200: #E5E7EB;   /* borders */
  --gray-100: #F3F4F6;   /* bg secondary */
  --gray-50:  #FAFBFC;   /* bg primary (off-white) */
  --white:    #FFFFFF;

  /* Status — semantic accents */
  --red-500:    #EF4444;   /* error */
  --amber-500:  #F59E0B;   /* warning */
  --blue-500:   #3B82F6;   /* info */

  /* ==================================================
     COLOR — SEMANTIC (use these, not primitives, in components)
     ================================================== */

  /* Foreground */
  --fg-1: var(--navy-900);   /* primary text, headings */
  --fg-2: var(--gray-500);   /* body, secondary */
  --fg-3: var(--gray-400);   /* hints, tertiary */
  --fg-inverse: var(--white);

  /* Background */
  --bg-1: var(--gray-50);    /* app background */
  --bg-2: var(--white);      /* card, elevated surface */
  --bg-3: var(--gray-100);   /* secondary surface */
  --bg-invert: var(--navy-900);

  /* Brand */
  --brand: var(--navy-900);
  --brand-hover: var(--navy-700);
  --brand-muted: var(--navy-500);

  /* Accent */
  --accent: var(--emerald-500);
  --accent-hover: var(--emerald-300);
  --accent-soft: var(--emerald-100);

  /* Border */
  --border-1: var(--gray-200);    /* default */
  --border-2: var(--gray-300);    /* hover */
  --border-focus: var(--emerald-500);

  /* Status */
  --success: var(--emerald-500);
  --warning: var(--amber-500);
  --error:   var(--red-500);
  --info:    var(--blue-500);

  /* Color-tinted shadows (brand moments) */
  --shadow-brand:  0 4px 12px rgba(15, 23, 46, 0.15);
  --shadow-accent: 0 4px 12px rgba(16, 185, 129, 0.20);

  /* ==================================================
     TYPE — FAMILIES
     ================================================== */
  --font-display: 'Merriweather', Georgia, serif;
  --font-sans:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'Fira Code', 'SF Mono', Menlo, Consolas, monospace;

  /* Legacy aliases (match original variable naming) */
  --font-heading: var(--font-sans);
  --font-body:    var(--font-sans);
  --font-code:    var(--font-mono);

  /* ==================================================
     TYPE — SCALE
     ================================================== */
  --text-xs:   0.75rem;    /* 12px — micro labels, tags */
  --text-sm:   0.875rem;   /* 14px — small body, captions */
  --text-base: 1rem;       /* 16px — body */
  --text-lg:   1.125rem;   /* 18px — lead, subtitle */
  --text-xl:   1.5rem;     /* 24px — H3 */
  --text-2xl:  2rem;       /* 32px — H2 */
  --text-3xl:  2.5rem;     /* 40px — large H2 */
  --text-4xl:  3.5rem;     /* 56px — hero H1 */

  /* Weights */
  --fw-light: 300;
  --fw-normal: 400;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* Line heights */
  --lh-tight:   1.1;
  --lh-normal:  1.5;
  --lh-relaxed: 1.6;
  --lh-loose:   1.8;

  /* Tracking */
  --tracking-tight:  -0.5px;
  --tracking-normal: 0;
  --tracking-wide:   0.5px;
  --tracking-wider:  1px;
}

/* ==================================================
   SEMANTIC TYPE STYLES
   Use as classes OR default element styling.
   ================================================== */

.h1, h1 {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}

.h2, h2 {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}

.h3, h3 {
  font-family: var(--font-sans);
  font-size: var(--text-xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-normal);
  color: var(--fg-1);
}

.h4, h4 {
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-normal);
  color: var(--fg-1);
}

.lead {
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  font-weight: var(--fw-light);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
}

.p, p, .body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--fw-normal);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
}

.small, small {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: var(--lh-normal);
  color: var(--fg-2);
}

.caption {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-3);
}

.code, code, pre {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

/* Utility colors */
.text-primary { color: var(--fg-1); }
.text-secondary { color: var(--fg-2); }
.text-tertiary { color: var(--fg-3); }
.text-accent { color: var(--accent); }
.text-error { color: var(--error); }
.text-inverse { color: var(--fg-inverse); }