/* ============================================================
   Hola Books — Color tokens  (OFFICIAL brand palette)
   Source: Hola Books Brand Guidelines (Colors, Font Colors).
   Copied verbatim from the Hola Books design system.
   The palette is intentionally SOFT, light & bright — do NOT
   over-saturate. Brand color names are internal & for fun.
   ============================================================ */

:root {
  /* ---- Core soft palette (the five rays + the Sol arch) ---- */
  --hb-agave:  #9ADCB4;   /* green  — ray 1            */
  --hb-sol:    #FFC91F;   /* gold   — the sun / arch   */
  --hb-petalo: #DAC2E0;   /* purple — ray 3            */
  --hb-agua:   #96DFF0;   /* blue   — ray 4            */
  --hb-adobe:  #FCB497;   /* coral  — ray 5            */

  /* ---- Light tints (backgrounds / washes) ---- */
  --hb-agave-light:  #E3F5EA;   /* (also #EFFAF9, palest) */
  --hb-agave-pale:   #EFFAF9;
  --hb-sol-light:    #FDF0B1;
  --hb-petalo-light: #F6F2F7;
  --hb-agua-light:   #C8F0FA;
  --hb-adobe-light:  #FFE2D6;

  /* ---- Accessible "Text" colors (saturated) ----
     For marketing text on white (18pt / 14pt bold+) AND for
     icon shape-fills outlined in Chalkboard. NOT for large areas. */
  --hb-text-agave:  #1F8447;   /* saturated green  */
  --hb-text-petalo: #9A60AF;   /* saturated purple */
  --hb-text-agua:   #177F96;   /* saturated teal   */
  --hb-text-adobe:  #FF5E24;   /* saturated coral  */
  --hb-sol-deep:    #E0A800;   /* darkened Sol for text/hover on light */

  /* ---- Neutrals ---- */
  --hb-chalkboard: #363535;   /* primary text — softer than true black */
  --hb-ink-soft:   #5C5A59;   /* secondary text                       */
  --hb-muted:      #8A8785;   /* captions, meta                       */
  --hb-line:       #ECE8E3;   /* hairline borders (warm, light)       */
  --hb-cream:      #FFFFFF;   /* deprecated — cream is not used; resolves to white */
  --hb-paper:      #FFFFFF;
  --hb-cloud:      #F5F3EF;   /* subtle filled surface                */
  --hb-cloud-soft: #FCFBF7;   /* barely-there surface: hover rows, zebra, quiet boxes */

  /* ---- Ink on tint ----
     The text color that sits ON each light tint (chips, badges, banners).
     Darker than the "Text" colors above so 11px text still reads on the
     pastel. Every tool used to pick its own; these are the one set. */
  --hb-agave-ink:  #1F8447;
  --hb-sol-ink:    #8A6A00;
  --hb-petalo-ink: #8A4DA0;
  --hb-agua-ink:   #136B7E;
  --hb-adobe-ink:  #B23E12;

  /* ============================================================
     Semantic aliases — prefer these in components
     ============================================================ */
  --color-bg-page:       var(--hb-paper);
  --color-bg-page-warm:   var(--hb-paper); /* cream removed — always white */
  --color-surface-card:   var(--hb-paper);
  --color-surface-sunk:   var(--hb-cloud);

  --color-text:           var(--hb-chalkboard);
  --color-text-soft:      var(--hb-ink-soft);
  --color-text-muted:     var(--hb-muted);
  --color-text-on-brand:  var(--hb-chalkboard); /* dark text on soft fills */
  --color-link:           var(--hb-text-agua);
  --color-link-hover:     #0F5F71;

  --color-border:         var(--hb-line);
  --color-border-strong:  #D9D4CC;

  /* Primary CTA: Agave green with chalkboard text (soft, AA on dark text) */
  --color-brand:          var(--hb-agave);
  --color-brand-hover:    var(--hb-text-agave);
  --color-brand-ink:      var(--hb-chalkboard);

  --color-success:        var(--hb-text-agave);
  --color-info:           var(--hb-text-agua);
  --color-warning:        var(--hb-sol-deep);
  --color-danger:         var(--hb-text-adobe);
  --color-sale:           var(--hb-text-adobe);

  /* focus ring (outline color + the soft halo fields use) */
  --color-focus:          var(--hb-text-agua);
  --color-focus-ring:     rgba(150, 223, 240, 0.45);   /* Agua at 45% */

  /* modal / sheet backdrop */
  --color-scrim:          rgba(54, 53, 53, 0.40);

  /* ---- Back-compat aliases (older token names) ---- */
  --hb-ink:      var(--hb-chalkboard);
  --hb-green:    var(--hb-agave);
  --hb-yellow:   var(--hb-sol);
  --hb-purple:   var(--hb-petalo);
  --hb-blue:     var(--hb-agua);
  --hb-red:      var(--hb-adobe);
  --hb-gold:     var(--hb-sol);
  --hb-green-700:var(--hb-text-agave);
  --hb-purple-700:var(--hb-text-petalo);
  --hb-blue-700: var(--hb-text-agua);
  --hb-red-700:  var(--hb-text-adobe);
  --hb-gold-700: var(--hb-sol-deep);
  --hb-mint:     var(--hb-agave-light);
  --hb-butter:   var(--hb-sol-light);
  --hb-lavender: var(--hb-petalo-light);
}