/* ============================================================
   Casa de Liberación — Colors & Type tokens
   Import into any artifact:  @import url("colors_and_type.css");
   Fonts: Google Fonts (Familjen Grotesk, Instrument Sans, Cormorant Garamond)
   ============================================================ */


:root {
  /* ---------- GOLD (primary — light/truth/life) ---------- */
  --gold-50:  #FBF6E8;
  --gold-100: #F4E8C4;
  --gold-200: #E9D38C;
  --gold-300: #DCBE5C;
  --gold-400: #D2AE42;
  --gold-500: #CBA437;   /* PRIMARY — sampled from the flame mark */
  --gold-600: #AC8722;
  --gold-700: #836611;
  --gold-800: #5C480C;

  /* ---------- MIDNIGHT / INK (the dark field) ---------- */
  --ink-950: #070A16;    /* near-black night */
  --ink-900: #0C1126;    /* primary dark background */
  --ink-800: #131A38;
  --ink-700: #1D2750;    /* royal indigo card */
  --ink-600: #2A3870;
  --ink-500: #3A4A88;

  /* ---------- WINE / MAGENTA (secondary accent) ---------- */
  --wine-300: #C76C99;
  --wine-400: #B34E7E;
  --wine-500: #9E2A63;   /* accent — flyer capsules / legacy swoosh */
  --wine-600: #82204F;
  --wine-700: #66163C;

  /* ---------- PAPER / NEUTRAL (light surfaces) ---------- */
  --paper-0:  #FFFFFF;
  --paper-50: #F8F5EE;   /* warm cream — main light surface */
  --paper-100:#EFE9DB;
  --paper-200:#E0D8C5;
  --paper-300:#C7BCA2;

  --grey-400: #9A9384;
  --grey-500: #6F6A5E;
  --grey-700: #423E37;

  /* ---------- SEMANTIC: foreground ---------- */
  --fg-on-dark:        #F6F3EA;   /* primary text on midnight */
  --fg-on-dark-muted:  #AEB4CB;   /* secondary text on midnight */
  --fg-on-dark-faint:  #7C849F;   /* WCAG AA 5.03:1 — labels, placeholders */
  --fg-on-light:       #1B1B17;   /* primary text on cream */
  --fg-on-light-muted: #5C574B;   /* secondary text on cream */

  /* ---------- SEMANTIC: surfaces ---------- */
  --bg-dark:       var(--ink-900);
  --bg-dark-2:     var(--ink-800);
  --surface-dark:  var(--ink-700);   /* cards on dark */
  --bg-light:      var(--paper-50);
  --surface-light: var(--paper-0);   /* cards on light */

  /* ---------- SEMANTIC: brand roles ---------- */
  --brand:         var(--gold-500);
  --brand-strong:  var(--gold-600);
  --brand-soft:    var(--gold-100);
  --accent:        var(--wine-500);
  --accent-soft:   var(--wine-300);

  /* ---------- BORDERS ---------- */
  --border-on-dark:  rgba(203,164,55,.30);
  --border-on-dark-soft: rgba(255,255,255,.10);
  --border-on-light: rgba(66,62,55,.16);
  --hairline-gold:   rgba(203,164,55,.45);

  /* ---------- ELEVATION ---------- */
  --glow-gold:    0 0 40px rgba(203,164,55,.28);
  --glow-gold-sm: 0 0 18px rgba(203,164,55,.30);
  --shadow-dark:  0 18px 50px rgba(0,0,0,.55);
  --shadow-light: 0 14px 40px rgba(66,52,18,.12);
  --shadow-light-sm: 0 4px 14px rgba(66,52,18,.10);

  /* ---------- GRADIENTS ---------- */
  --grad-midnight: radial-gradient(120% 90% at 70% 0%, #1A2249 0%, #0C1126 45%, #070A16 100%);
  --grad-gold:     linear-gradient(135deg, #E9D38C 0%, #CBA437 45%, #AC8722 100%);
  --grad-flame:    linear-gradient(180deg, #E9D38C 0%, #CBA437 55%, #836611 100%);

  /* ---------- TYPE FAMILIES ---------- */
  --font-display: 'Familjen Grotesk', system-ui, sans-serif;
  --font-body:    'Instrument Sans', system-ui, sans-serif;
  --font-serif:   'Cormorant Garamond', Georgia, serif;

  /* ---------- TYPE SCALE (semantic) ---------- */
  --tracking-display: -0.02em;
  --tracking-caps:    0.14em;   /* all-caps labels & service items */

  /* ---------- RADIUS ---------- */
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;   /* signature capsule */

  /* ---------- SPACING (4px base) ---------- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;
}

:root { --fg-on-dark-faint: #7C849F; } /* WCAG AA — 5.03:1 on ink-900 */

/* ============================================================
   SEMANTIC TEXT STYLES — apply with a class
   ============================================================ */

.cl-eyebrow {            /* capsule / section label */
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.cl-display {            /* hero headline */
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(40px, 6vw, 84px);
  line-height: 0.98;
  letter-spacing: var(--tracking-display);
}

.cl-h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(30px, 4vw, 48px);
  line-height: 1.05;
  letter-spacing: -0.01em;
}

.cl-h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.1;
}

.cl-h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 20px;
  line-height: 1.2;
}

.cl-body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.65;
}

.cl-body-sm {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.55;
}

.cl-scripture {          /* verses & reverent pull-quotes */
  font-family: var(--font-serif);
  font-weight: 500;
  font-style: italic;
  font-size: clamp(22px, 3vw, 34px);
  line-height: 1.3;
}

.cl-scripture-ref {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--brand);
}

.cl-service {            /* SEMINARIOS / CONFERENCIAS list items */
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}