/* =========================================================================
   DESIGN TOKENS — "Masaje en Silla: El Manual Completo"
   Single source of truth for all visual values.
   Copy these into Canva Brand Kit or InDesign Paragraph/Character Styles.
   ========================================================================= */

:root {

  /* -----------------------------------------------------------------------
     1. COLOR PALETTE (9 colors)
     ----------------------------------------------------------------------- */
  --color-sage:           #7A9E7E;  /* Headers, brand elements, icons */
  --color-sage-claro:     #A8C4A2;  /* Soft backgrounds, separators, decorative numbers */
  --color-beige-arena:    #F5F0E8;  /* Page backgrounds, soft callouts */
  --color-crema:          #FAF7F2;  /* Base document background */
  --color-grafito:        #3A3A3A;  /* Primary text (not pure black) */
  --color-gris-medio:     #8A8A8A;  /* Secondary text, captions */
  --color-terracota:      #C17A5B;  /* Accents, CTA, urgency elements */
  --color-amarillo:       #E5C76B;  /* Pain-scale midpoint / warning transition */
  --color-blanco:         #FFFFFF;  /* Breathing space, cards */

  /* Derived tints for callout backgrounds */
  --color-terracota-tinte: #FBF0ED; /* Terracota at ~10% opacity for callout bg */
  --color-sage-tinte:      #EEF4EF; /* Sage at ~30% opacity for callout bg */

  /* -----------------------------------------------------------------------
     2. TYPOGRAPHY
     ----------------------------------------------------------------------- */

  /* Font families */
  --font-sans:  'Poppins', sans-serif;          /* Headers, navigation, UI */
  --font-serif: 'Lora', serif;                   /* Body text, callouts */

  /* Font weights */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* Typography styles (10 roles) */
  --type-chapter-title:    var(--weight-semibold) 36pt / 1.2  var(--font-sans);
  --type-subtitle:         var(--weight-medium)   20pt / 1.3  var(--font-sans);
  --type-section-header:   var(--weight-semibold) 16pt / 1.3  var(--font-sans);
  --type-body:             var(--weight-regular)  12pt / 1.6  var(--font-serif);
  --type-callout:          italic var(--weight-regular) 12pt / 1.5  var(--font-serif);
  --type-caption:          var(--weight-regular)  9pt  / 1.4  var(--font-sans);
  --type-decorative-num:   var(--weight-bold)     72pt / 1.0  var(--font-sans);
  --type-label:            var(--weight-medium)   10pt / 1.3  var(--font-sans);
  --type-legend:           var(--weight-regular)  11pt / 1.3  var(--font-sans);
  --type-benefit:          var(--weight-regular)  11pt / 1.4  var(--font-serif);
  --type-badge:            var(--weight-bold)     11pt / 1.0  var(--font-sans);

  /* Body text color */
  --text-color-primary:    var(--color-grafito);
  --text-color-secondary:  var(--color-gris-medio);

  /* -----------------------------------------------------------------------
     3. GRID & LAYOUT
     ----------------------------------------------------------------------- */

  /* Page dimensions (A4) */
  --page-width:   210mm;
  --page-height:  297mm;

  /* Margins */
  --margin-top:     25mm;
  --margin-bottom:  25mm;
  --margin-inner:   20mm;
  --margin-outer:   20mm;

  /* Bleed */
  --bleed: 3mm;

  /* Grid */
  --grid-columns:   12;
  --grid-gutter:    16px;
  --grid-baseline:   8px;

  /* -----------------------------------------------------------------------
     4. SPACING SCALE (8px baseline)
     ----------------------------------------------------------------------- */
  --space-xs:   4px;
  --space-sm:   8px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  32px;
  --space-2xl: 48px;
  --space-3xl: 64px;

  /* -----------------------------------------------------------------------
     5. ICONOGRAPHY
     ----------------------------------------------------------------------- */
  --icon-size-inline:  24px;  /* Icons within text */
  --icon-size-callout: 48px;  /* Icons in callout headers */
  --icon-size-card:    36px;  /* Icons in chapter visual grids (e.g. VIS-028) */
  --icon-stroke:       1.5px; /* Line weight for line-style icons */

  /* -----------------------------------------------------------------------
     6. CALLOUT SPECS
     ----------------------------------------------------------------------- */

  /* Consejo Profesional */
  --callout-consejo-bg:        var(--color-beige-arena);
  --callout-consejo-border:    4px solid var(--color-sage);
  --callout-consejo-label:     'CONSEJO PROFESIONAL';
  --callout-consejo-icon:      'lightbulb';

  /* Error Frecuente */
  --callout-error-bg:          var(--color-terracota-tinte);
  --callout-error-border:      4px solid var(--color-terracota);
  --callout-error-label:       'ERROR FRECUENTE';
  --callout-error-icon:        'warning';

  /* Ejercicio Practico */
  --callout-ejercicio-bg:      var(--color-sage-tinte);
  --callout-ejercicio-border:  4px solid var(--color-sage);
  --callout-ejercicio-label:   'EJERCICIO PRÁCTICO';
  --callout-ejercicio-icon:    'hands';

  /* Precaucion */
  --callout-precaucion-bg:     var(--color-terracota-tinte);
  --callout-precaucion-border: 2px solid var(--color-terracota);
  --callout-precaucion-label:  'PRECAUCIÓN';
  --callout-precaucion-icon:   'shield';

  /* Dato Clave */
  --callout-dato-bg:           var(--color-blanco);
  --callout-dato-shadow:       var(--shadow-sm);

  /* -----------------------------------------------------------------------
     7. SHADOWS
     ----------------------------------------------------------------------- */
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.08);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.10);

  /* -----------------------------------------------------------------------
     8. BORDERS & RADIUS
     ----------------------------------------------------------------------- */
  --border-width-subtle: 1px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 999px;
}