:root{
  /* =====================================================
     GRUVME PROJECT VISUAL IDENTITY

     Project appearance belongs here.
     Shared component construction, dimensions, behaviour,
     functional alerts, plans and status systems belong
     in ui.css.
     ===================================================== */


  /* =====================================================
     BACKGROUND COLOR NAMES
     ===================================================== */

  --ui-bg-black:            #000102;
  --ui-bg-tone-purple:      #6B4D8F;

  --ui-bg-gradient-light:   var(--ui-rust);
  --ui-bg-gradient-dark:    var(--ui-bg-black);


  /* =====================================================
     PROJECT COLOR SET
     ===================================================== */

  --ui-rust:            #8A5A44;
  --ui-grey:            #AFAFAF;
  --ui-olive:           #7A7F62;
  --ui-charcoal:        #3B3C36;
  --ui-mist:            #C2D6D8;
  --ui-mauve:           #8C7B7B;
  --ui-stone:           #D3CFC8;
  --ui-viridian:        #65877F;
  --ui-slate-blue:      #6E7F99;
  --ui-antique-brass:   #84724A;


  /* =====================================================
     BACKGROUND / ATMOSPHERE
     ===================================================== */

  --ui-bg-base:             var(--ui-bg-black);
  --ui-bg-tone:             var(--ui-bg-tone-purple);

  --ui-panel-bg-light:      var(--ui-bg-gradient-light);
  --ui-panel-bg-dark:       var(--ui-bg-gradient-dark);


  /* =====================================================
     TYPOGRAPHY COLOR ASSIGNMENTS

     The sub/body names intentionally remain basic for now.
     Their naming can be reconsidered separately later.
     ===================================================== */

  --ui-title-color:         var(--ui-rust);

  --ui-main-color:          var(--ui-antique-brass);

  --ui-popup-title-color:   var(--ui-antique-brass);

  --ui-sub-1-color:         var(--ui-viridian);
  --ui-sub-2-color:         var(--ui-viridian);
  --ui-sub-3-color:         var(--ui-rust);
  --ui-sub-4-color:         var(--ui-slate-blue);
  --ui-sub-5-color:         var(--ui-slate-blue);

  --ui-body-1-color:        var(--ui-slate-blue);
  --ui-body-2-color:        var(--ui-slate-blue);
  --ui-body-3-color:        var(--ui-slate-blue);
  --ui-body-4-color:        var(--ui-slate-blue);


  /* =====================================================
     LINKS
     ===================================================== */

  --ui-link-color:                  var(--ui-antique-brass);
  --ui-link-hover-color:            var(--ui-rust);
  --ui-link-press-feedback-color:   var(--ui-viridian);


  /* =====================================================
     BUTTONS
     ===================================================== */

  --ui-btn-bg:                      var(--ui-antique-brass);
  --ui-btn-hover-bg:                var(--ui-rust);
  --ui-btn-text-color:              var(--ui-stone);
  --ui-btn-press-feedback-color:    var(--ui-slate-blue);


  /* =====================================================
     BORDERS / DIVIDERS
     ===================================================== */

  --ui-border-1-color:      var(--ui-stone);
  --ui-border-2-color:      var(--ui-charcoal);

  --ui-divider-1-color:     var(--ui-stone);
  --ui-divider-2-color:     var(--ui-charcoal);

  --ui-border-color:        var(--ui-border-1-color);
  --ui-divider-color:       var(--ui-divider-1-color);


  /* =====================================================
     INPUTS
     ===================================================== */

  --ui-input-border-color:  var(--ui-border-color);
  --ui-input-text-color:    var(--ui-charcoal);
  --ui-input-bg-color:      var(--ui-stone);


  /* =====================================================
     POPUPS / SURFACES
     ===================================================== */

  --ui-popup-bg:            var(--ui-charcoal);
  --ui-popup-close-color:   var(--ui-charcoal);


  /* =====================================================
     BUBBLES

     One shared speech-bubble system.
     Size and geometry remain in ui.css.
     ===================================================== */

  --ui-bubble-bg:           var(--ui-viridian);
  --ui-bubble-border:       var(--ui-stone);
  --ui-bubble-text:         var(--ui-stone);


  /* =====================================================
     CHIP INTERACTION

     Press feedback only.
     Alert/status chip colours remain part of the shared
     functional system.
     ===================================================== */

  --ui-chip-press-feedback-color: var(--ui-mauve);


  /* =====================================================
     SOURCE / SELECTION ACCENTS
     ===================================================== */

  --ui-source-file-accent:  var(--ui-antique-brass);
  --ui-selected-row-accent: var(--ui-antique-brass);


  /* =====================================================
     PRICING CARD APPEARANCE

     Card construction, dimensions and responsiveness
     remain in shared ui.css.
     ===================================================== */

  --ui-price-card-bg-light:       var(--ui-panel-bg-light);
  --ui-price-card-bg-dark:        var(--ui-panel-bg-dark);
  --ui-price-card-border-color:   var(--ui-border-2-color);
  --ui-price-card-divider-color:  var(--ui-divider-2-color);
}