/*
 * ─────────────────────────────────────────────────────────────
 *  DESIGN TOKENS — single source of truth for the colour system
 *
 *  To retheme the entire site, change values here only.
 *  Everything in layouts, views and components references
 *  these variables via var(--token-name).
 * ─────────────────────────────────────────────────────────────
 */

:root {

  /* ── Base backgrounds ─────────────────────────────────────── */
  --bg-base:          #EDEEF0;   /* page / body */
  --bg-elevated:      #F3F4F5;   /* nav, footer, slightly raised surfaces */
  --bg-input:         #F6F7F8;   /* text inputs and textareas */
  --bg-subtle:        rgba(0,0,0,0.03);   /* inset panels, chat sidebar */
  --bg-subtle-md:     rgba(0,0,0,0.05);   /* slightly more distinct panels */

  /* ── Glass surface system ─────────────────────────────────── */
  --glass-bg:         rgba(240,241,243,0.82);
  --glass-blur:       10px;
  --glass-border-top: rgba(255,255,255,0.60);  /* bright top edge */
  --glass-border-bot: rgba(0,0,0,0.05);         /* subtle dark bottom edge */
  --glass-shadow:
    0 4px 20px rgba(0,0,0,0.06),
    0 1px 3px  rgba(0,0,0,0.03),
    inset 0 1px 0 rgba(255,255,255,0.65);

  /* ── Text ─────────────────────────────────────────────────── */
  --text-primary:     #1C1917;   /* headings, strong body copy */
  --text-secondary:   #2C2E30;   /* slightly softer headings */
  --text-body:        #484A4C;   /* standard body / nav inactive */
  --text-soft:        #5A5C5E;   /* softer body, descriptions */
  --text-muted:       #6B6D70;   /* secondary labels, captions */
  --text-label:       #57595C;   /* small-caps section labels */
  --text-faint:       #8A8B8D;   /* decorative / truly secondary */

  /* ── Borders ──────────────────────────────────────────────── */
  --border:           rgba(0,0,0,0.12);
  --border-subtle:    rgba(0,0,0,0.08);
  --border-strong:    rgba(0,0,0,0.16);
  --border-light:     rgba(255,255,255,0.44);   /* glass top-edge */

  /* ── Inputs ───────────────────────────────────────────────── */
  --input-border:     #C8CACC;
  --input-focus:      #9A9C9E;

  /* ── Accents ──────────────────────────────────────────────── */
  --teal:             #3D8885;
  --teal-light:       #5AADAA;
  --teal-lighter:     #7BBFBD;   /* progress bar end stop */
  --teal-pale:        rgba(172,210,208,0.28);
  --teal-glow:        rgba(61,136,133,0.20);
  --pink-glow:        rgba(232,197,212,0.46);

  /* ── Semantic: Error / Danger ────────────────────────────── */
  --color-error-bg:           #FDF5F5;
  --color-error-border:       #E9B8B8;
  --color-error-text:         #7C2D2D;
  --color-error-text-strong:  #991B1B;
  --color-danger:             #DC2626;   /* delete / destructive action buttons */

  /* ── Semantic: Success ────────────────────────────────────── */
  --color-success-bg:         #F5FDF9;
  --color-success-border:     #B8D9C8;
  --color-success-text:       #1A4731;

  /* ── Semantic: Warning ────────────────────────────────────── */
  --color-warning-bg:         #FFFBEB;
  --color-warning-border:     #FDE68A;
  --color-warning-text:       #92400E;
  --color-warning-strong:     #B45309;   /* full-event label, required asterisks */

  /* ── Sponsor / tier accents ───────────────────────────────── */
  --tier-community:   #8A8B8D;
  --tier-bronze:      #CD7F32;
  --tier-silver:      #9BA4B5;
  --tier-gold:        #C9A84C;

  /* ── Misc ─────────────────────────────────────────────────── */
  --color-white:      #FFFFFF;
  --gradient-dark:    #2E2C2A;   /* dark stop in btn-primary gradient */

  /* ── Cookie banner (intentional dark surface) ─────────────── */
  --cookie-bg:        #1C1917;
  --cookie-text:      #F6F3EE;
  --cookie-link:      #C7C3BC;

  /* ── Landing page gradient stops ─────────────────────────── */
  --landing-grad-0:   #D5D7DA;
  --landing-grad-1:   #DDDEE1;
  --landing-grad-2:   #E3E4E7;
  --landing-grad-3:   #E9EAEC;
  --landing-grad-4:   #EDEEF0;
}


/*
 * ─────────────────────────────────────────────────────────────
 *  COMPONENT UTILITIES
 *  Reusable classes that views can apply instead of
 *  repeating long inline style strings.
 * ─────────────────────────────────────────────────────────────
 */

/* Glass panel — matches cards & contact boxes */
.glass {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border-top);
  border-bottom-color: var(--glass-border-bot);
  border-radius: 12px;
  box-shadow: var(--glass-shadow);
}

/* Small-caps section label (e.g. "FEATURE", "Sections") */
.label {
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-label);
  font-weight: 600;
  margin: 0;
}

/* Horizontal rule / section divider */
.divider { border-bottom: 1px solid var(--border); }

/* Convenience text colours */
.t-primary  { color: var(--text-primary);   }
.t-body     { color: var(--text-body);      }
.t-soft     { color: var(--text-soft);      }
.t-muted    { color: var(--text-muted);     }
.t-label    { color: var(--text-label);     }
.t-faint    { color: var(--text-faint);     }