/* ==================================================================
   KARRESSME DESIGN TOKENS
   Direction: a jewelry-boutique / velvet-rope lounge feeling —
   deep aubergine-black, antique gold, and a rich wine accent.
   Deliberately not the generic dating-app pink/red.
   ================================================================== */

:root {
    /* Backgrounds */
    --kme-ink: #1B1024;            /* deep aubergine-black */
    --kme-surface: #2A1830;        /* card/panel surface */
    --kme-surface-light: #3A2440;  /* hover/lighter surface */

    /* Accents */
    --kme-gold: #C9A227;           /* antique gold */
    --kme-gold-soft: rgba(201, 162, 39, 0.35);
    --kme-gold-dim: rgba(201, 162, 39, 0.15);
    --kme-wine: #8C2F45;           /* deep wine — primary actions */
    --kme-wine-light: #B23A63;     /* hover state */
    --kme-emerald: #3F7A5C;        /* reserved: "open/available" state */

    /* Text */
    --kme-cream: #F3E9DC;          /* warm ivory, on dark surfaces */
    --kme-lilac: #A995AE;          /* muted secondary text */
    --kme-ink-text: #2A1830;       /* dark text, on light surfaces */

    /* Type */
    --kme-font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
    --kme-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* Radius / shadow, used consistently across all KME components */
    --kme-radius: 14px;
    --kme-shadow: 0 8px 28px rgba(27, 16, 36, 0.35);
}

/* ==================================================================
   SIGNATURE ELEMENT — gold divider with gem glyph
   Used between sections: milestone prompts, ring gallery headers,
   community feed header, anywhere a moment deserves a beat.
   ================================================================== */

.kme-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    max-width: 320px;
    margin: 24px auto;
}
.kme-divider-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--kme-gold), transparent);
    opacity: 0.7;
}
.kme-divider-gem {
    color: var(--kme-gold);
    font-size: 14px;
    line-height: 1;
}

/* ==================================================================
   SHARED HEADING TREATMENT
   Any element with .kme-heading picks up the display face.
   Individual component stylesheets reference these tokens directly.
   ================================================================== */

.kme-heading {
    font-family: var(--kme-font-display);
    font-weight: 700;
    color: var(--kme-cream);
    letter-spacing: 0.01em;
}

.kme-eyebrow {
    font-family: var(--kme-font-body);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--kme-gold);
}