/* ============================================================
   Reality Breaker — Color tokens
   Twilight-forward. Warm accent against a cool base.
   One loud color per view; never stack loud colors.
   ============================================================ */

:root {
  /* ---- Brand palette (raw) ---------------------------------- */
  --rb-ink-indigo: #1C1838;   /* base, deepest surface          */
  --rb-plum:       #4B2E63;   /* raised surface, card ground    */
  --rb-coral:      #F06A8B;   /* PRIMARY accent                 */
  --rb-amber:      #F0A24E;   /* warm highlight, secondary glow */
  --rb-lavender:   #B9A3D9;   /* soft secondary                 */
  --rb-teal:       #4FA89C;   /* soft secondary                 */
  --rb-cream:      #F5ECDC;   /* text on dark, light section bg */
  --rb-muted:      #B3A9C9;   /* muted text on dark             */

  /* ---- Tonal extensions (derived, harmonious) --------------- */
  --rb-ink-900: #14102A;      /* darker than base, deep shadow  */
  --rb-ink-800: #1C1838;      /* = ink indigo                   */
  --rb-ink-700: #2A2350;      /* hairline / divider on dark     */
  --rb-plum-700: #3A2350;     /* pressed plum                   */
  --rb-plum-600: #4B2E63;     /* = plum                         */
  --rb-plum-500: #5E3C7B;     /* hover plum                     */

  --rb-coral-600: #D9577A;    /* coral pressed                  */
  --rb-coral-500: #F06A8B;    /* = coral                        */
  --rb-coral-400: #F58BA4;    /* coral hover / tint             */
  --rb-coral-100: #FBD8E1;    /* coral wash on light            */

  --rb-amber-600: #DB8C3A;    /* amber pressed                  */
  --rb-amber-500: #F0A24E;    /* = amber                        */
  --rb-amber-300: #F6C089;    /* amber tint                     */

  --rb-cream-200: #ECE0CB;    /* slightly deeper cream surface  */
  --rb-cream-300: #DED0B6;    /* cream border on light          */

  /* ---- Semantic: dark mode is the brand default ------------- */
  --surface-base:   var(--rb-ink-indigo); /* page background    */
  --surface-sunken: var(--rb-ink-900);    /* wells, code, insets*/
  --surface-card:   var(--rb-plum-600);   /* raised card        */
  --surface-card-hover: var(--rb-plum-500);
  --surface-overlay: #241C44;             /* popovers, menus    */

  --border-subtle: rgba(245,236,220,0.10);/* hairline on dark   */
  --border-strong: rgba(245,236,220,0.20);
  --border-focus:  var(--rb-coral-500);

  --text-strong:  var(--rb-cream);        /* headlines, primary */
  --text-body:    #E4DBEC;                /* body copy on dark  */
  --text-muted:   var(--rb-muted);        /* captions, meta     */
  --text-on-accent: #2A0E18;              /* text on coral btn  */
  --text-on-amber:  #2A1606;              /* text on amber      */

  --accent:        var(--rb-coral-500);   /* the one loud color */
  --accent-hover:  var(--rb-coral-400);
  --accent-press:  var(--rb-coral-600);
  --accent-wash:   rgba(240,106,139,0.14);

  --glow-warm:     var(--rb-amber-500);   /* warm light source  */

  /* ---- Light section (cream ground) ------------------------- */
  --light-surface:   var(--rb-cream);
  --light-surface-2: var(--rb-cream-200);
  --light-border:    var(--rb-cream-300);
  --light-text:      var(--rb-ink-indigo);
  --light-text-muted:#6A5E7E;

  /* ---- Status (muted, kept off the loud palette) ------------ */
  --status-go:    var(--rb-teal);
  --status-warn:  var(--rb-amber-500);
  --status-stop:  var(--rb-coral-500);
  --status-info:  var(--rb-lavender);
}

/* Opt-in light scope: wrap a cream section in .rb-on-light */
.rb-on-light {
  --surface-base:   var(--light-surface);
  --surface-card:   #FFFFFF;
  --surface-card-hover: var(--rb-cream-200);
  --surface-overlay:#FFFFFF;
  --border-subtle:  rgba(28,24,56,0.10);
  --border-strong:  rgba(28,24,56,0.18);
  --text-strong:    var(--rb-ink-indigo);
  --text-body:      #2C2543;
  --text-muted:     var(--light-text-muted);
}