/* ============================================================================
   Buen Pastor — Design System Foundations
   Congregación de Nuestra Señora de la Caridad del Buen Pastor
   Provincia Bolivia/Chile
   Tokens derived from the Manual de Imagen Corporativa (versión 2025).
   ============================================================================ */

/* --- Webfonts -------------------------------------------------------------
   Manual specifies Arial (primary) and Calibri (secondary, papelería).
   Both are proprietary system fonts. We load the metric-compatible open
   substitutes from Google Fonts so layouts render identically everywhere:
     Arial    -> Arimo
     Calibri  -> Carlito
   Pinyon Script approximates the flowing manuscript wordmark of the logo;
   use it ONLY for small decorative accents — the real wordmark is the logo
   image asset, never reset type.
   -------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Arimo:ital,wght@0,400;0,500;0,600;0,700;1,400;1,700&family=Carlito:ital,wght@0,400;0,700;1,400;1,700&family=Pinyon+Script&display=swap');

:root {
  /* ---- Corporate blues (exact manual values) ---------------------------- */
  --bp-blue-7689: #498FBA;   /* Pantone 7689 U · primary / 1ª variación */
  --bp-blue-7688: #5A99BF;   /* Pantone 7688 U */
  --bp-blue-631:  #55B3D8;   /* Pantone 631 U  · highlight */

  /* ---- Extended blue scale (harmonised around the corporate blues) ------ */
  --bp-blue-900: #1E435C;
  --bp-blue-800: #2A5F80;
  --bp-blue-700: #357499;
  --bp-blue-600: #498FBA;    /* = 7689 U, primary */
  --bp-blue-500: #5A99BF;    /* = 7688 U */
  --bp-blue-400: #55B3D8;    /* = 631 U, highlight */
  --bp-blue-300: #8DCBE5;
  --bp-blue-200: #BDDFEF;
  --bp-blue-100: #E2F0F7;
  --bp-blue-50:  #F2F8FB;

  /* ---- Neutrals --------------------------------------------------------- */
  --bp-white:    #FFFFFF;
  --bp-ink:      #2B333A;    /* primary text */
  --bp-gray-700: #4C545B;
  --bp-gray-500: #7C858C;
  --bp-gray-400: #999999;    /* manual's 40% black for grayscale logo */
  --bp-gray-300: #C4CACE;
  --bp-gray-200: #E4E8EB;
  --bp-gray-100: #F2F4F6;

  /* ---- Semantic colour roles -------------------------------------------- */
  --fg-1:        var(--bp-ink);        /* primary text */
  --fg-2:        var(--bp-gray-500);   /* secondary text */
  --fg-brand:    var(--bp-blue-700);   /* brand-coloured text / headings */
  --fg-on-brand: var(--bp-white);      /* text on blue fills */

  --bg-1:        var(--bp-white);      /* page */
  --bg-2:        var(--bp-blue-50);    /* tinted section */
  --bg-3:        var(--bp-blue-100);   /* card tint / hover */
  --bg-brand:    var(--bp-blue-600);   /* primary fill */
  --bg-brand-strong: var(--bp-blue-800);

  --border-1:    var(--bp-gray-200);   /* hairline dividers */
  --border-2:    var(--bp-gray-300);   /* stronger borders */
  --border-brand:var(--bp-blue-300);

  --focus-ring:  var(--bp-blue-400);

  /* ---- Type families ---------------------------------------------------- */
  --font-sans:   'Arimo', Arial, 'Liberation Sans', Helvetica, sans-serif;     /* primary */
  --font-doc:    'Carlito', Calibri, 'Segoe UI', sans-serif;                    /* papelería / docs */
  --font-script: 'Pinyon Script', 'Brush Script MT', cursive;                  /* decorative only */

  /* ---- Type scale (semantic) -------------------------------------------- */
  --text-display: 600 56px/1.08 var(--font-sans);
  --text-h1:      600 40px/1.14 var(--font-sans);
  --text-h2:      600 30px/1.2  var(--font-sans);
  --text-h3:      600 23px/1.3  var(--font-sans);
  --text-h4:      700 18px/1.35 var(--font-sans);
  --text-body-lg: 400 19px/1.65 var(--font-sans);
  --text-body:    400 16px/1.65 var(--font-sans);
  --text-small:   400 14px/1.55 var(--font-sans);
  --text-caption: 400 12.5px/1.4 var(--font-sans);
  --text-eyebrow: 600 12.5px/1.2 var(--font-sans);   /* uppercase, tracked */
  --tracking-eyebrow: 0.14em;

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

  /* ---- Radii ------------------------------------------------------------ */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --radius-circle: 50%;

  /* ---- Elevation (soft, cool-tinted shadows) ---------------------------- */
  --shadow-1: 0 1px 2px rgba(30, 67, 92, 0.06), 0 1px 3px rgba(30, 67, 92, 0.08);
  --shadow-2: 0 2px 6px rgba(30, 67, 92, 0.08), 0 6px 16px rgba(30, 67, 92, 0.10);
  --shadow-3: 0 8px 24px rgba(30, 67, 92, 0.12), 0 16px 40px rgba(30, 67, 92, 0.12);
  --shadow-focus: 0 0 0 3px rgba(85, 179, 216, 0.45);

  /* ---- Motion ----------------------------------------------------------- */
  --ease-soft: cubic-bezier(0.22, 0.61, 0.36, 1);  /* @kind other */
  --dur-fast: 140ms;  /* @kind other */
  --dur: 220ms;       /* @kind other */
  --dur-slow: 360ms;  /* @kind other */
}

/* --- Semantic element defaults (optional reset layer) --------------------- */
.bp-prose h1 { font: var(--text-h1); color: var(--fg-brand); margin: 0 0 var(--space-4); }
.bp-prose h2 { font: var(--text-h2); color: var(--fg-brand); margin: var(--space-7) 0 var(--space-3); }
.bp-prose h3 { font: var(--text-h3); color: var(--fg-1); margin: var(--space-6) 0 var(--space-2); }
.bp-prose p  { font: var(--text-body); color: var(--fg-1); margin: 0 0 var(--space-4); max-width: 68ch; }
.bp-prose a  { color: var(--fg-brand); text-underline-offset: 2px; }

.bp-eyebrow {
  font: var(--text-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--bp-blue-500);
}