/* ==========================================================================
   DHARMA — Design tokens
   Fuente: "DHARMA — Sistema de identidad de marca v1.0", sección 9.
   --------------------------------------------------------------------------
   BLOQUE 1 — entregado por el manual de marca. Se reemplaza tal cual cuando
   llegue una versión nueva del manual.
   BLOQUE 2 — tokens propios del sitio, derivados del manual. Ver notas.
   ========================================================================== */

:root {
  /* ========================================
     DHARMA — COLOR: BRAND
     ======================================== */
  --dh-color-primary-900: #17324D;
  --dh-color-primary-950: #10283F;

  --dh-color-gold-500: #C79A3B;
  --dh-color-gold-700: #9A6F20;

  --dh-color-sky-100: #DCEAF2;
  --dh-color-beige-100: #F3EBDD;
  --dh-color-clay-500: #B86B55;

  /* ========================================
     DHARMA — COLOR: NEUTRALS
     ======================================== */
  --dh-color-bg: #FBFAF7;
  --dh-color-surface: #FFFFFF;
  --dh-color-border: #D8DEE3;
  --dh-color-text: #1D2A33;
  --dh-color-text-secondary: #56636D;
  --dh-color-disabled: #8A949C;

  /* ========================================
     DHARMA — COLOR: SEMANTIC
     ======================================== */
  --dh-color-success: #376B52;
  --dh-color-warning: #9A6F20;
  --dh-color-error: #A34F3D;
  --dh-color-info: #2F6F8F;

  /* ========================================
     DHARMA — COLOR: DATA CATEGORICAL
     ======================================== */
  --dh-data-1: #17324D;
  --dh-data-2: #56B4E9;
  --dh-data-3: #009E73;
  --dh-data-4: #E69F00;
  --dh-data-5: #D55E00;
  --dh-data-6: #CC79A7;

  /* ========================================
     DHARMA — COLOR: DATA SEQUENTIAL
     ======================================== */
  --dh-seq-1: #EAF1F5;
  --dh-seq-2: #C6D9E4;
  --dh-seq-3: #8EB3C8;
  --dh-seq-4: #4E7F9E;
  --dh-seq-5: #17324D;

  /* ========================================
     DHARMA — TYPOGRAPHY
     ======================================== */
  --dh-font-display: "Manrope", "Arial", sans-serif;
  --dh-font-body: "Source Sans 3", "Arial", sans-serif;

  --dh-font-weight-regular: 400;
  --dh-font-weight-medium: 500;
  --dh-font-weight-semibold: 600;
  --dh-font-weight-bold: 700;

  --dh-font-size-h1: 3.25rem;
  --dh-font-size-h2: 2.5rem;
  --dh-font-size-h3: 1.875rem;
  --dh-font-size-h4: 1.5rem;
  --dh-font-size-body-lg: 1.25rem;
  --dh-font-size-body: 1rem;
  --dh-font-size-small: 0.875rem;
  --dh-font-size-caption: 0.75rem;

  --dh-line-height-h1: 1.15;
  --dh-line-height-h2: 1.20;
  --dh-line-height-h3: 1.27;
  --dh-line-height-h4: 1.33;
  --dh-line-height-body-lg: 1.50;
  --dh-line-height-body: 1.60;
  --dh-line-height-small: 1.55;
  --dh-line-height-caption: 1.50;

  --dh-letter-spacing-h1: -0.02em;
  --dh-letter-spacing-h2: -0.02em;
  --dh-letter-spacing-h3: -0.01em;
  --dh-letter-spacing-h4: -0.01em;
  --dh-letter-spacing-body: 0;
  --dh-letter-spacing-label: 0.06em;

  /* ========================================
     DHARMA — SPACING
     ======================================== */
  --dh-space-1: 0.25rem;  /* 4px */
  --dh-space-2: 0.5rem;   /* 8px */
  --dh-space-3: 0.75rem;  /* 12px */
  --dh-space-4: 1rem;     /* 16px */
  --dh-space-6: 1.5rem;   /* 24px */
  --dh-space-8: 2rem;     /* 32px */
  --dh-space-12: 3rem;    /* 48px */
  --dh-space-16: 4rem;    /* 64px */
  --dh-space-24: 6rem;    /* 96px */

  /* ========================================
     DHARMA — RADII
     ======================================== */
  --dh-radius-xs: 0.25rem;  /* 4px */
  --dh-radius-sm: 0.5rem;   /* 8px */
  --dh-radius-md: 0.75rem;  /* 12px */
  --dh-radius-lg: 1rem;     /* 16px */

  /* ========================================
     DHARMA — BORDERS
     ======================================== */
  --dh-border-width: 1px;
  --dh-border-width-focus: 2px;
  --dh-border-default: 1px solid #D8DEE3;
  --dh-border-focus: 2px solid #2F6F8F;

  /* ========================================
     DHARMA — SHADOWS
     ======================================== */
  --dh-shadow-1: 0 1px 2px rgba(16, 40, 63, 0.08);
  --dh-shadow-2: 0 6px 18px rgba(16, 40, 63, 0.10);
  --dh-shadow-3: 0 16px 40px rgba(16, 40, 63, 0.12);

  /* ========================================
     DHARMA — CONTENT WIDTHS
     ======================================== */
  --dh-width-page: 75rem;       /* 1200px */
  --dh-width-content: 52rem;    /* 832px */
  --dh-width-reading: 42rem;    /* 672px */
  --dh-width-form: 36rem;       /* 576px */

  /* ========================================
     DHARMA — COMPONENT BASICS
     ======================================== */
  --dh-control-height: 2.75rem;  /* 44px */
  --dh-control-height-lg: 3rem;  /* 48px */
  --dh-focus-ring: 0 0 0 3px rgba(47, 111, 143, 0.28);

  /* ========================================
     DHARMA — MOTION
     ======================================== */
  --dh-duration-fast: 120ms;
  --dh-duration-base: 180ms;
  --dh-ease-standard: cubic-bezier(0.2, 0, 0, 1);
}

@media (max-width: 48rem) {
  :root {
    --dh-font-size-h1: 2.25rem;
    --dh-font-size-h2: 2rem;
    --dh-font-size-h3: 1.625rem;
    --dh-font-size-h4: 1.375rem;
    --dh-font-size-body-lg: 1.125rem;
  }
}

/* ==========================================================================
   BLOQUE 2 — Tokens propios del sitio
   No están en el manual, pero se derivan de sus reglas. Documentados uno a uno
   para que cualquiera entienda de dónde salen.
   ========================================================================== */

:root {

  /* ---- Dorado por tipo de fondo -------------------------------------------
     El manual prohíbe el oro 500 como texto sobre blanco (2.59:1) y solo
     permite el oro tinta "con moderación". Verificado aparte, el oro tinta
     tampoco alcanza AA sobre los dos fondos que el propio manual prescribe:
       oro tinta / fondo cálido #FBFAF7 = 4.31   (AA exige 4.5)
       oro tinta / beige #F3EBDD        = 3.80
     Por eso el dorado se expone según el fondo, y no como un color suelto:
     así la regla no se puede romper por descuido. */
  --dh-accent-on-light: var(--dh-color-gold-700); /* filetes y detalles sobre fondo claro */
  --dh-accent-on-dark:  var(--dh-color-gold-500); /* sobre azul 900: 5.07:1, AA para texto */

  /* ---- Ritmo vertical -----------------------------------------------------
     El manual fija 96px entre grandes secciones y 48-64px entre internas.
     Se interpola entre ambos extremos para que móvil no quede sobre-espaciado. */
  --dh-section-y: clamp(var(--dh-space-12), 2.5rem + 4.5vw, var(--dh-space-24));
  --dh-gutter: clamp(var(--dh-space-4), 0.9rem + 1.75vw, var(--dh-space-8));

  /* ---- Medida de línea ----------------------------------------------------
     Manual: 65-72 caracteres en lectura extensa; 56-64 en piezas dirigidas
     a las trabajadoras. */
  --dh-measure: 70ch;
  --dh-measure-narrow: 60ch;

  /* ---- Radio circular -----------------------------------------------------
     El manual prohíbe botones tipo píldora. Esto NO es para botones: se usa
     solo en los numeradores circulares de los pasos del programa. */
  --dh-radius-round: 50%;

  /* ---- Beige más claro ----------------------------------------------------
     El manual define un solo beige. Para bloques cálidos sobre fondo beige
     hace falta un escalón intermedio; se aclara el beige del manual sin
     inventar un tono nuevo. */
  --dh-color-beige-050: color-mix(in srgb, var(--dh-color-beige-100) 45%, var(--dh-color-surface));
}