/* ═══════════════════════════════════════════════════════════════
   FIND·MY·FRIARS — LCARS Theme (Star Trek: The Next Generation)
   To create a new theme, copy this file, rename it, and update
   the variables below. All structural layout lives in index.html.
   ═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Antonio:wght@400;700&display=swap');

:root {
  /* ── Core palette ─────────────────────────────────────── */
  --orange:    #FF9900;
  --peach:     #FF9966;
  --lavender:  #CC99CC;
  --blue:      #9999FF;
  --ltblue:    #66CCFF;
  --yellow:    #FFCC00;
  --cream:     #FFFF99;
  --red:       #FF6666;
  --green:     #99FF99;
  --pink:      #CC6699;
  --bg:        #000000;

  /* ── Layout ───────────────────────────────────────────── */
  --gap:       7px;
  --radius:    30px;
  --font:      'Antonio', sans-serif;

  /* ── Semantic surface colors ──────────────────────────── */
  --bg-raised:       #0d0d0d;
  --bg-subtle:       #1a1a1a;
  --bg-modal:        #0c0c0c;
  --map-bg:          #080808;
  --border-dim:      #331a00;
  --border-subtle:   #333333;
  --border-modal:    #2a1400;
  --divider:         #222222;
  --text-dim:        #888888;
  --text-muted:      #aaaaaa;

  /* ── Component-specific ───────────────────────────────── */
  --dot-offline-bg:  #3a3a3a;
  --slug-offline-bg: #383838;
  --emg-bg:          #110000;
  --emg-dim:         #440000;
  --emg-meta:        #886644;
  --bubble-bg:       rgba(0,0,0,.82);
  --bubble-border:   rgba(255,255,255,.22);
  --safeword-bg:     #226622;
  --safeword-dim:    #446644;
  --trail-color:     #9999FF;

  /* ── LCARS shape overrides ────────────────────────────── */
  --btn-radius:      0 16px 16px 0;
  --slug-radius:     0 22px 22px 0;
  --label-radius:    0 16px 16px 0;
}

/* LCARS pill shapes */
.sb-btn    { border-radius: var(--btn-radius);   }
.sb-label  { border-radius: var(--label-radius); }
.device-slug { border-radius: var(--slug-radius); }

/* Friar map bubble — LCARS font */
.friar-bubble {
  font-family: var(--font);
}