/* ASIDEHU brand tokens. Values come from theme.json presets. */
:root {
  /* Palette — white and pale turquoise surfaces with institutional Azul. */
  --base:        var(--wp--preset--color--base);
  --surface:     var(--wp--preset--color--surface);
  --ink:         var(--wp--preset--color--contrast);
  --teal:        var(--wp--preset--color--primary);
  --teal-dark:   var(--wp--preset--color--primary-dark);
  /* Legacy accents resolve to the AA-safe dark-gold tone; vivid fills stay below. */
  --terracotta:  var(--wp--preset--color--accent-dark);
  --line:        var(--wp--preset--color--border);
  --muted:       var(--wp--preset--color--contrast-muted);
  --light:       var(--wp--preset--color--contrast-light);
  --teal-soft:   var(--wp--preset--color--primary-light);
  --azur:        var(--wp--preset--color--azur);
  --cyan:        var(--wp--preset--color--cyan);
  --naranja:     var(--wp--preset--color--naranja);
  --amarillo:    var(--wp--preset--color--amarillo);
  --lavanda:     var(--wp--preset--color--lavanda);
  --verde:       var(--wp--preset--color--verde);
  /* Programme colour; heroes and cards override it per programme. */
  --programme:   var(--azur);

  /* Brand forms (manual §Formas), monochrome masks: paint with background-color
     and mask-image so every form takes a palette token. forms-*.css place them. */
  --form-circle:   url("../brand/forms/circle.svg");
  --form-quarter:  url("../brand/forms/quarter.svg");
  --form-leaf:     url("../brand/forms/leaf.svg");
  --form-ring:     url("../brand/forms/ring.svg");
  --form-arch:     url("../brand/forms/arch.svg");
  --form-lens:     url("../brand/forms/lens.svg");
  --form-u:        url("../brand/forms/u.svg");
  --form-triangle: url("../brand/forms/triangle.svg");
  --form-bow:      url("../brand/forms/bow.svg");
  --form-diamond:  url("../brand/forms/diamond.svg");

  /* Type */
  --sans: var(--wp--preset--font-family--biryani);
  --serif: var(--wp--preset--font-family--montaga);

  /* Layout */
  --shell: min(calc(100% - 48px), 1180px);

  /* Spacing scale — consistent vertical rhythm */
  --space-1:  var(--wp--preset--spacing--20);
  --space-2:  var(--wp--preset--spacing--30);
  --space-3:  var(--wp--preset--spacing--40);
  --space-4:  var(--wp--preset--spacing--50);
  --space-5:  var(--wp--preset--spacing--60);
  --space-6:  var(--wp--preset--spacing--70);
  --space-7:  var(--wp--preset--spacing--80);

  /* Radii — square for institutional tone */
  --radius: 0;

  /* Gallery thumbnail box. The client asked for it "casi que hasta la mitad" of
     the old 320x230 (2026-08-31, 21:01:45); a literal halving lands near 160x115,
     where a centre-cropped portrait stops being readable, so it stops here.
     templates.css overrides both below 700px so three tiles stay in view. */
  --galeria-tile:        200px;
  --galeria-tile-height: 150px;

  /* Semantic aliases shared by dark surfaces and status treatments. */
  --ink-line:        var(--wp--preset--color--contrast-light);
  --ink-border:      var(--wp--preset--color--border);
  --teal-pale:       var(--wp--preset--color--primary-pale);
  --terracotta-soft: var(--wp--preset--color--accent-soft);
  --terracotta-dark: var(--wp--preset--color--accent-dark);
  --on-dark:         rgba(255, 255, 255, 0.9);
  --on-dark-muted:   rgba(255, 255, 255, 0.7);
  --on-dark-soft:    rgba(255, 255, 255, 0.85);
  --shadow-float:    0 6px 24px rgba(0, 31, 110, 0.28);
}