/* =====================================================================
   WalkaMundi Design System — Tokens
   colors_and_type.css
   ===================================================================== */

/* ---------- Webfonts (Google Fonts substitutes, see README) ---------- */
@import url('https://fonts.googleapis.com/css2?family=IM+Fell+English:ital@0;1&family=IM+Fell+English+SC&family=EB+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Special+Elite&display=swap');

/* =====================================================================
   :root — design tokens
   ===================================================================== */
:root {
  /* ---------- Brand colors ---------- */
  --wm-primary:        #D2691E;   /* siena tostado */
  --wm-secondary:      #B87333;   /* cobre */
  --wm-accent:         #6B8E23;   /* verde oliva */
  --wm-highlight:      #DAA520;   /* dorado oscuro */

  /* ---------- Backgrounds ---------- */
  --wm-bg-light:       #F5F5DC;   /* papel antiguo */
  --wm-bg-medium:      #E8E4C9;   /* pergamino claro */
  --wm-bg-dark:        #D8C47C;   /* madera clara */

  --wm-bg-overlay:           rgba(245, 245, 220, 0.88);
  --wm-bg-overlay-soft:      rgba(245, 245, 220, 0.55);
  --wm-bg-parchment-overlay: rgba(232, 228, 201, 0.78);
  --wm-bg-white:             rgba(255, 255, 255, 0.78);
  --wm-bg-white-strong:      rgba(255, 255, 255, 0.92);

  /* warning tints — derived from CD853F */
  --wm-warning-tint:         rgba(205, 133, 63, 0.30);
  --wm-warning-tint-border:  rgba(205, 133, 63, 0.60);
  --wm-warning-solid:        #F5E1B8;
  --wm-warning-solid-border: #C2B280;

  /* ---------- Text ---------- */
  --wm-text-primary:   #3E2723;   /* marrón oscuro, casi café */
  --wm-text-secondary: #5D4037;   /* sepia medio */
  --wm-text-light:     #8D6E63;   /* marrón grisáceo */
  --wm-text-tertiary:  #A89A8E;   /* desaturado, visited */
  --wm-text-inverse:   #FFFBF0;   /* blanco cálido */

  /* ---------- Semantic states ---------- */
  --wm-success: #556B2F;
  --wm-warning: #CD853F;
  --wm-error:   #BC5A45;
  --wm-info:    #607D8B;

  --wm-problem: #841917;
  --wm-danger:  #b83038;

  /* ---------- Borders ---------- */
  --wm-border-light:   #E6DBC9;
  --wm-border-medium:  #D6C6AF;
  --wm-border-dark:    #C2B280;

  --wm-border-subtle:  rgba(62, 39, 35, 0.18);
  --wm-border-defined: rgba(62, 39, 35, 0.28);
  --wm-border-strong:  rgba(62, 39, 35, 0.45);

  /* ---------- Gradients (warm-only) ---------- */
  --wm-gradient-primary:   linear-gradient(135deg, #E8A87C, #D2691E);
  --wm-gradient-secondary: linear-gradient(135deg, #C8B7A6, #A67F5C);
  --wm-gradient-accent:    linear-gradient(135deg, #8BA870, #6B8E23);

  /* ============================================================
     Typography
     ============================================================ */
  --wm-font-display: 'IM Fell English', 'EB Garamond', Georgia, serif;
  --wm-font-sc:      'IM Fell English SC', 'IM Fell English', serif;
  --wm-font-body:    'EB Garamond', Georgia, 'Times New Roman', serif;
  --wm-font-mono:    'Special Elite', 'Courier Prime', 'Courier New', monospace;

  /* Type scale (mobile-first; rem-based, 1rem = 16px) */
  --wm-fs-display: 56px;
  --wm-fs-h1:      40px;
  --wm-fs-h2:      28px;
  --wm-fs-h3:      22px;
  --wm-fs-h4:      18px;
  --wm-fs-body:    16px;
  --wm-fs-small:   14px;
  --wm-fs-tiny:    12px;

  --wm-lh-tight:   1.1;
  --wm-lh-snug:    1.25;
  --wm-lh-normal:  1.55;
  --wm-lh-loose:   1.7;

  --wm-tracking-tight:   -0.01em;
  --wm-tracking-normal:  0;
  --wm-tracking-wide:    0.06em;
  --wm-tracking-overline: 0.18em;

  /* ============================================================
     Spacing  (4-px base scale)
     ============================================================ */
  --wm-space-1:  4px;
  --wm-space-2:  8px;
  --wm-space-3:  12px;
  --wm-space-4:  16px;
  --wm-space-5:  20px;
  --wm-space-6:  24px;
  --wm-space-8:  32px;
  --wm-space-10: 40px;
  --wm-space-14: 56px;
  --wm-space-18: 72px;

  /* ============================================================
     Radii
     ============================================================ */
  --wm-radius-sm: 4px;
  --wm-radius-md: 8px;
  --wm-radius-lg: 14px;
  --wm-radius-xl: 22px;
  --wm-radius-pill: 999px;

  /* ============================================================
     Shadows — warm, low, never blue
     ============================================================ */
  --wm-shadow-sm:   0 1px 2px rgba(62, 39, 35, 0.10);
  --wm-shadow-md:   0 1px 2px rgba(62, 39, 35, 0.12), 0 6px 18px rgba(62, 39, 35, 0.08);
  --wm-shadow-lg:   0 2px 4px rgba(62, 39, 35, 0.10), 0 18px 40px rgba(62, 39, 35, 0.14);
  --wm-shadow-inset: inset 0 1px 0 rgba(255, 251, 240, 0.6),
                     inset 0 -1px 0 rgba(62, 39, 35, 0.06);

  /* ============================================================
     Motion
     ============================================================ */
  --wm-ease:           cubic-bezier(.32, .72, .35, 1);
  --wm-ease-in:        cubic-bezier(.42, .0, .58, 1);
  --wm-duration-fast:  180ms;
  --wm-duration:       220ms;
  --wm-duration-med:   340ms;
  --wm-duration-slow:  480ms;
}

/* =====================================================================
   Base + semantic type styles
   Use these classes (or copy their rules) for consistent type.
   ===================================================================== */
html, body {
  background: var(--wm-bg-light);
  color: var(--wm-text-primary);
  font-family: var(--wm-font-body);
  font-size: var(--wm-fs-body);
  line-height: var(--wm-lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.wm-display {
  font-family: var(--wm-font-display);
  font-size: var(--wm-fs-display);
  line-height: var(--wm-lh-tight);
  letter-spacing: var(--wm-tracking-tight);
  color: var(--wm-text-primary);
  font-weight: 400;
}

.wm-h1 {
  font-family: var(--wm-font-display);
  font-size: var(--wm-fs-h1);
  line-height: 1.05;
  letter-spacing: var(--wm-tracking-tight);
  font-weight: 400;
  color: var(--wm-text-primary);
}

.wm-h2 {
  font-family: var(--wm-font-display);
  font-size: var(--wm-fs-h2);
  line-height: var(--wm-lh-snug);
  font-weight: 400;
  color: var(--wm-text-primary);
}

.wm-h3 {
  font-family: var(--wm-font-display);
  font-size: var(--wm-fs-h3);
  line-height: 1.2;
  font-weight: 400;
  color: var(--wm-text-primary);
}

.wm-h4 {
  font-family: var(--wm-font-body);
  font-size: var(--wm-fs-h4);
  line-height: 1.3;
  font-weight: 600;
  color: var(--wm-text-primary);
}

.wm-body {
  font-family: var(--wm-font-body);
  font-size: var(--wm-fs-body);
  line-height: var(--wm-lh-normal);
  color: var(--wm-text-primary);
}

.wm-lede {
  font-family: var(--wm-font-body);
  font-style: italic;
  font-size: 18px;
  line-height: 1.5;
  color: var(--wm-text-secondary);
}

.wm-small {
  font-family: var(--wm-font-body);
  font-size: var(--wm-fs-small);
  line-height: var(--wm-lh-snug);
  color: var(--wm-text-secondary);
}

.wm-overline {
  font-family: var(--wm-font-mono);
  font-size: var(--wm-fs-tiny);
  letter-spacing: var(--wm-tracking-overline);
  text-transform: uppercase;
  color: var(--wm-text-secondary);
}

.wm-mono {
  font-family: var(--wm-font-mono);
  font-size: var(--wm-fs-small);
  letter-spacing: 0.02em;
  color: var(--wm-text-secondary);
}

.wm-sc {
  font-family: var(--wm-font-sc);
  letter-spacing: 0.04em;
  color: var(--wm-text-primary);
}

/* =====================================================================
   Editorial flourishes (optional helpers)
   ===================================================================== */
.wm-rule {
  height: 1px;
  background: var(--wm-border-defined);
  border: 0;
}
.wm-rule-double {
  border: 0;
  border-top: 1px solid var(--wm-border-defined);
  border-bottom: 1px solid var(--wm-border-defined);
  height: 4px;
  background: transparent;
}
.wm-ornament {
  font-family: var(--wm-font-display);
  color: var(--wm-secondary);
  text-align: center;
  letter-spacing: 0.4em;
  font-size: 18px;
}
.wm-ornament::before { content: '✦  ·  ✦'; }