/* ============================================================================
   AWAQN — MATERIALS & COMPONENT TOKENS  (LAYER 3)
   Liquid glass, glow, and per-element aliases. Built on the semantic layer so
   a single semantic change cascades everywhere.
   ============================================================================ */

:root {
  /* --- Material: liquid glass & glow (harvested from the PWA dark-mode) --- */
  --glass-fill:        rgba(255, 255, 255, 0.045);
  --glass-fill-hover:  rgba(255, 255, 255, 0.09);
  --glass-border:      rgba(255, 255, 255, 0.05);
  --glass-blur:        24px;
  --shadow-glass:      0 8px 32px rgba(0,0,0,0.36), inset 0 1px 1px rgba(255,255,255,0.15);
  --shadow-elevated:   0 8px 32px rgba(0,0,0,0.5),  inset 0 1px 1px rgba(255,255,255,0.2);
  --glow-cyan:         0 0 24px 0 rgba(0, 242, 254, 0.4);
  --glow-magenta:      0 0 24px 0 rgba(209, 71, 163, 0.4);
  --glow-orange:       0 0 24px 0 rgba(242, 113, 33, 0.4);

  /* --- Gold glows (SALES ONLY — pair with the --color-gold-* family) --- */
  --glow-gold-btn:    0 0 30px rgba(249,224,118,0.35), inset 0 1px 1px rgba(255,255,255,0.55);
  --glow-gold-card:   0 0 44px rgba(249,224,118,0.2);   /* + var(--shadow-glass) */
  --glow-gold-badge:  0 0 20px rgba(249,224,118,0.5);
  --glow-gold-sticky: 0 0 22px rgba(249,224,118,0.35);  /* sticky-mobile buy CTA */

  /* --- Primary button (TEAL fill, black ink — the conversion CTA) --- */
  --button-bg:            var(--color-accent-fill);
  --button-ink:           var(--color-on-accent);
  --button-bg-hover:      var(--color-accent);   /* brightens toward cyan */
  --button-radius:        var(--radius-pill);
  --button-shadow:        0 0 24px 0 rgba(42, 184, 197, 0.35); /* teal glow */
  --button-pad-y:         var(--space-4);
  --button-pad-x:         var(--space-8);
  --button-weight:        var(--weight-bold);

  /* --- Secondary / ghost button (glass on the void) --- */
  --button-ghost-bg:      var(--glass-fill);
  --button-ghost-ink:     var(--color-ink);
  --button-ghost-border:  var(--color-border);

  /* --- Card / glass panel (lifted so it READS on the void) --- */
  --card-bg:              rgba(255, 255, 255, 0.07);
  --card-border:          rgba(255, 255, 255, 0.12);
  --card-radius:          var(--radius-spatial);
  --card-shadow:          var(--shadow-glass);
  --card-blur:            var(--glass-blur);
  --card-pad:             var(--space-8);
  --card-ambient:         var(--awaqn-ambient-glow); /* drop behind for "surface" look */

  /* --- Eyebrow / micro label --- */
  --eyebrow-color:        var(--color-ink-muted);
  --eyebrow-size:         var(--text-micro);
  --eyebrow-tracking:     var(--tracking-micro);
  --eyebrow-weight:       var(--weight-semibold);

  /* --- Inputs (glass field on the void) --- */
  --field-bg:             rgba(255, 255, 255, 0.04);
  --field-bg-focus:       rgba(255, 255, 255, 0.07);
  --field-border:         var(--color-border);
  --field-border-focus:   var(--color-accent);
  --field-ink:            var(--color-ink);
  --field-placeholder:    var(--color-ink-faint);
  --field-radius:         var(--radius-inner);
  --field-pad-y:          var(--space-3);
  --field-pad-x:          var(--space-4);
}