/* ==========================================================================
   Voces de Nashville — design tokens
   Lifted from the brand's design system. Spanish names are canonical;
   English aliases exist as a convenience for callers in main.css /
   utilities.css that pre-date the brand swap.
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap");

@font-face {
  font-family: "Recoleta";
  src: url("/assets/recoleta-regular-f6c72ed9.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Recoleta";
  src: url("/assets/recoleta-bold-4b441ea5.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Recoleta";
  src: url("/assets/recoleta-black-e501cdb3.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ===== BRAND COLOR PALETTE ============================================ */

  /* Neutrals */
  --nieve:        #ffffff;   /* snow       — page background */
  --nieve-sucia:  #eeeeee;   /* dirty snow — subtle dividers */
  --brisa:        #aad4e6;   /* breeze     — soft sky blue */
  --hierro:       #888888;   /* iron       — meta / member titles */
  --hollin:       #343434;   /* soot       — heading color alt */
  --carbon:       #222222;   /* carbon     — body text */
  --negro:        #000000;

  /* Warm / accent family — orange + yellow sunflower core */
  --tomate:          #f3510b;  /* tomato */
  --calabaza:        #f4741d;  /* pumpkin */
  --toranja:         #fab725;  /* grapefruit */
  --autobus-escolar: #ffd91d;  /* schoolbus yellow — page ribbon */
  --trigo:           #fdfcdf;  /* wheat — footer bg, bilingual ES text */
  --chocolate:       #4b1b00;

  /* Cool / water family — blue sky */
  --niebla:         #e4f6fc;  /* mist — callout backgrounds */
  --gota-de-lluvia: #269cd6;  /* raindrop — button/link hover */
  --pajaro-azul:    #007ed9;  /* bluebird — links + buttons */
  --crepusculo:     #23547b;  /* dusk — heading color, full-width blocks */

  /* English aliases (back-compat for legacy callers) */
  --vn-white:      var(--nieve);
  --vn-text:       var(--carbon);
  --vn-text-muted: var(--hierro);
  --vn-heading:    var(--crepusculo);
  --vn-link:       var(--pajaro-azul);
  --vn-link-hover: var(--gota-de-lluvia);
  --vn-cream:      var(--trigo);
  --vn-mist:       var(--niebla);
  --vn-sunflower:  var(--toranja);
  --vn-school-bus: var(--autobus-escolar);

  /* ===== SEMANTIC TEXT + SURFACES ====================================== */
  --color-text:           var(--carbon);
  --color-text-muted:     var(--hierro);
  --color-background:     var(--nieve);
  --color-border:         var(--nieve-sucia);
  --color-input-border:   #ccc;
  --color-link:           var(--pajaro-azul);
  --color-link-hover:     var(--gota-de-lluvia);

  /* Form chrome for the richer controls (the collection picker). Pale tints
     pulled off niebla — a plain grey border reads as dead next to the blue. */
  --color-field-border:    #d7ecf6;
  --color-field-fill:      #fbfdff;
  --color-checkbox-border: #c7e2ef;
  --color-popover-divider: #eef7fb;
  --color-caret:           #7fa9c0;

  /* A lighter step of niebla — the hover tint for a line-item row. Niebla
     itself is too saturated to sweep under the cursor down a 200-row list. */
  --color-surface-row-hover: #f4fbfe;

  --color-surface-muted:       var(--niebla);
  --color-surface-muted-hover: #d4eef8;

  --page-background:          var(--nieve);
  --page-background-gradient: linear-gradient(180deg, var(--niebla) 0%, rgba(228, 246, 252, 0) 27.81%), var(--page-background);
  --page-marginal-border:     0.5rem solid var(--autobus-escolar);
  --footer-top-border:        1rem solid var(--autobus-escolar);
  --footer-background:        var(--trigo);

  /* Flash messages */
  --color-status-background: var(--niebla);
  --color-status-border:     var(--brisa);
  --color-status-text:       var(--crepusculo);

  --color-alert-background: #fdecea;
  --color-alert-border:     #f5b7a8;
  --color-alert-text:       #9a2a0a;

  --flash-message-background-color: var(--pajaro-azul);
  --flash-message-color:            var(--trigo);

  /* ===== BUTTONS ======================================================== */
  --button-background-color:        var(--pajaro-azul);
  --button-background-hover-color:  var(--gota-de-lluvia);
  --button-color:                   var(--trigo);
  --button-hover-color:             var(--trigo);

  --secondary-button-background-color:       var(--niebla);
  --secondary-button-background-hover-color: #d4eef8;
  --secondary-button-color:                  var(--crepusculo);

  --tertiary-button-background-color:        transparent;
  --tertiary-button-background-hover-color:  var(--niebla);
  --tertiary-button-color:                   var(--pajaro-azul);

  --danger-button-background-color: var(--tomate);
  --danger-button-color:            var(--trigo);

  --button-background-disabled-color: var(--nieve-sucia);
  --button-disabled-color:            var(--hierro);
  --button-disabled-border:           1px solid var(--nieve-sucia);

  --button-shadow: 1px 3px 2px rgba(0, 0, 0, 0.15);

  /* ===== NAVIGATION ===================================================== */
  --nav-button-background-color:          transparent;
  --nav-button-color:                     var(--hollin);
  --nav-button-hover-color:               var(--toranja);
  --nav-button-selected-background-color: var(--autobus-escolar);
  --nav-button-selected-color:            var(--carbon);

  /* ===== PROFILE DOT ==================================================== */
  --profile-dot-background-color: var(--niebla);
  --profile-dot-border-color:     var(--autobus-escolar);
  --profile-dot-color:            var(--crepusculo);

  --profile-dot-tooltip-background-color: var(--carbon);
  --profile-dot-tooltip-text-color:       var(--nieve);

  /* ===== TYPOGRAPHY ===================================================== */
  --font-family-base:    "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-family-display: "Recoleta", Georgia, "Times New Roman", serif;

  --fw-light:   300;
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-bold:    700;
  --fw-black:   900;

  --fs-h1:    3.125rem;   /* 50px */
  --fs-h2:    2.25rem;    /* 36px */
  --fs-h3:    1.5rem;     /* 24px */
  --fs-h4:    1.25rem;    /* 20px */
  --fs-body:  1.125rem;   /* 18px */
  --fs-small: 1rem;
  --fs-meta:  0.875rem;
  --font-size-small: var(--fs-meta);

  --lh-heading: 1.2;
  --lh-body:    1.8;
  --line-height-base: var(--lh-body);

  /* ===== SPACING + SHAPE =============================================== */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;

  --radius-base: 0.5rem;
  --radius-sm:   0.25rem;
  --radius-md:   0.5rem;
  --radius-lg:   1rem;
  --radius-xl:   1.25rem;
  --radius-full: 50%;
  --radius-pill: 999px;

  /* Elevation. The card shadow is wide and faint — it separates a card from
     the page gradient without reading as a border. */
  --shadow-card:      0 4px 30px rgba(0, 0, 0, 0.08);
  --shadow-thumbnail: 0 2px 10px rgba(0, 0, 0, 0.10);

  /* The hairline that makes a file thumbnail read as a sheet of paper. The
     slot's fill is white and so is its border, so without an inner edge a
     rendered page dissolves into its own frame. Drawn as an inset shadow
     rather than a border because the slot's height is fixed — a real border
     would eat 2px of the page. */
  --shadow-thumbnail-edge: inset 0 0 0 1px color-mix(in srgb, var(--crepusculo) 16%, transparent);
  --shadow-popover:   0 4px 30px rgba(0, 0, 0, 0.15);

  /* Surface behind a callout-style block (the secondary nav card). */
  --callout-box-background-color: var(--niebla);

  --content-max-width: 83rem;   /* brand desktop max */
  --input-max-width:   30rem;

  --focus-ring-color: var(--toranja);

  /* ===== RICH TEXT EDITOR =============================================== */
  /* Lexxy's own tokens (lexxy-variables.css, in the gem), pointed at the
     palette above. Its stylesheet is linked before this directory, so these
     win on order. Only the ones its editor and content styles actually draw
     with are set; the code-token and highlight colours are for features the
     toolbar does not offer. */
  --lexxy-color-ink:          var(--carbon);
  --lexxy-color-ink-medium:   var(--hierro);
  --lexxy-color-ink-light:    var(--hierro);
  --lexxy-color-ink-lighter:  var(--color-input-border);   /* editor frame, toolbar rule, blockquote bar */
  --lexxy-color-ink-lightest: var(--nieve-sucia);          /* button hover */
  --lexxy-color-ink-inverted: var(--nieve);

  --lexxy-color-accent-dark:     var(--pajaro-azul);
  --lexxy-color-accent-medium:   var(--gota-de-lluvia);
  --lexxy-color-accent-light:    var(--color-surface-muted-hover);  /* pressed button, hovered */
  --lexxy-color-accent-lightest: var(--niebla);                     /* pressed button */

  --lexxy-color-link: var(--color-link);

  --lexxy-font-base: var(--font-family-base);
  --lexxy-content-margin: var(--space-4);   /* the gap between two paragraphs */

  --lexxy-radius: var(--radius-md);
  --lexxy-shadow: var(--shadow-popover);
  --lexxy-focus-ring-color: var(--focus-ring-color);

  /* Lexxy sizes its buttons in lh, which at this site's 1.8 body leading
     would make them 65px squares. A fixed size instead, a step under the
     3rem of the site's own buttons. */
  --lexxy-toolbar-button-size: 2.5rem;
}

/* Mobile typography overrides — match the brand scale at ≤768px */
@media (max-width: 48rem) {
  :root {
    --fs-h1:   2.5rem;
    --fs-h2:   2rem;
    --fs-h3:   1.25rem;
    --fs-h4:   1.125rem;
    --fs-body: 1rem;
  }
}

@media (prefers-reduced-motion) {
  :root {
    scroll-behavior: auto;
  }
}