/* ── Vibin Portal — Design Tokens ─────────────────────────────────────── */
/* Shared across all portal pages                                          */

:root {
  /* Surface layers — 5 distinct depth levels */
  --bg-page:        #080810;   /* canvas, richest black              */
  --bg-card:        #0F0F18;   /* card surfaces                      */
  --bg-cream:       #161621;   /* input fills, slightly elevated     */
  --bg-input:       #161621;   /* alias for bg-cream                 */
  --bg-raised:      #1D1D2A;   /* picker panels, dropdowns           */
  --bg-overlay:     #252535;   /* tooltips, accent cards, modals     */

  /* Hover & active fill tints */
  --bg-hover:       rgba(255,255,255,0.035);   /* subtle row hover   */
  --bg-hover-md:    rgba(255,255,255,0.065);   /* medium hover       */
  --bg-active:      rgba(255,255,255,0.10);    /* pressed/active bg  */

  /* Text — 4-step opacity hierarchy */
  --text-primary:   #EDEEF5;                   /* near-white, body   */
  --text-sec:       rgba(237,238,245,0.62);    /* labels, subtitles  */
  --text-muted:     rgba(237,238,245,0.38);    /* captions, hints    */
  --text-dim:       rgba(237,238,245,0.20);    /* ghost / disabled   */

  /* Borders — 3 weights */
  --border:         rgba(255,255,255,0.07);    /* structural dividers  */
  --border-input:   rgba(255,255,255,0.11);    /* input outlines       */
  --border-hover:   rgba(255,255,255,0.18);    /* hover / mid-weight   */
  --border-focus:   rgba(255,255,255,0.34);    /* focused / active     */

  /* Accent: pure white — ONLY for selected/active states */
  --accent:         #FFFFFF;

  /* Status colours */
  --green:          #00E87D;
  --amber:          #FFB300;
  --red:            #FF3B3B;
}

html { scroll-behavior: smooth; }