/* ================================================================
   Started — Design Tokens  (Website — permanent dark)
   Background:  #020103   Color.fromARGB(255,   2,  1,  3)
   Text:        #fdfafc   Color.fromARGB(255, 253, 250, 252)
   ================================================================ */


/* ----------------------------------------------------------------
   § 1 — Primitive Brand Palette
   ---------------------------------------------------------------- */

:root {
  /* Rose / Akzent 1 */
  --brand-a1-01:  #030102;
  --brand-a1-05:  #0e050a;
  --brand-a1-10:  #1c0a14;
  --brand-a1-20:  #381428;
  --brand-a1-30:  #541e3c;
  --brand-a1-40:  #702850;
  --brand-primary: #8c3264;  /* 50 % */
  --brand-a1-60:  #bb4386;
  --brand-a1-70:  #cc72a4;
  --brand-a1-80:  #dda1c2;
  --brand-a1-90:  #eed0e1;
  --brand-a1-95:  #f7e7f0;
  --brand-a1-99:  #fdfafc;

  /* Violet / Akzent 2 */
  --brand-a2-01:  #020103;
  --brand-a2-05:  #0b050e;
  --brand-a2-10:  #170a1c;
  --brand-a2-20:  #2e1438;
  --brand-a2-30:  #441e54;
  --brand-a2-40:  #5b296f;
  --brand-secondary: #72338b;  /* 50 % */
  --brand-a2-60:  #9844ba;
  --brand-a2-70:  #b272cc;
  --brand-a2-80:  #cca1dd;
  --brand-a2-90:  #e5d0ee;
  --brand-a2-95:  #f2e8f6;
  --brand-a2-99:  #fcfafd;

  /* Sonderfarben */
  --brand-warning-1:     #780a0a;
  --brand-warning-2:     #6c0909;
  --brand-check-1:       #0a640a;
  --brand-check-2:       #095a09;
  --brand-warning-neg-1: #ff5a5a;
  --brand-warning-neg-2: #ff6b6b;
  --brand-check-neg-1:   #5ae682;
  --brand-check-neg-2:   #6be98f;
  --brand-rating:        #eeac0a;
  --brand-join-1:        #f2a050;
  --brand-join-2:        #e07020;
  --brand-join-faded-1:  #f9be91;
  --brand-join-faded-2:  #f0aa7d;
}


/* ----------------------------------------------------------------
   § 2 — Semantic Tokens
   ---------------------------------------------------------------- */

:root {
  /* Standard */
  --color-background:             #030102;   /* accent101 · Color.fromARGB(255, 3, 1, 2)   */
  --color-text:                   #fcfafd;   /* accent299 · Color.fromARGB(255, 252, 250, 253) */
  --color-faded:                  #cca1dd;
  --color-dropdown-overlay:       rgba(253, 250, 252, 0.8);
  --color-warning:                #ff5a5a;
  --color-check:                  #5ae682;
  --color-shadow-1:               transparent;
  --color-shadow-2:               transparent;
  --color-icon-standard:          #fdfafc;

  /* Image Placeholders */
  --color-img-placeholder-1:      #8c3264;
  --color-img-placeholder-2:      #72338b;
  --color-img-placeholder-icon:   #381428;

  /* Nav Bar */
  --color-nav-bar-1:              #cc72a4;
  --color-nav-bar-2:              #b272cc;
  --color-nav-icon:               #eed0e1;
  --color-nav-icon-active-1:      #541e3c;
  --color-nav-icon-active-2:      #441e54;

  /* Profile Picture */
  --color-profile-pic-bg:         #2e1438;
  --color-profile-pic-icon:       #dda1c2;

  /* Brand Gradient */
  --color-brand-gradient-1:       #8c3264;
  --color-brand-gradient-2:       #72338b;

  /* Clickable */
  --color-text-clickable:         #fdfafc;

  /* Rating / Pressed */
  --color-rating:                 #eeac0a;
  --color-pressed:                #eed0e1;

  /* Join Buttons (Groups) */
  --color-join-btn-1:             #f2a050;
  --color-join-btn-2:             #e07020;
  --color-join-btn-requested-1:   #f9be91;
  --color-join-btn-requested-2:   #f0aa7d;

  /* Follower Buttons */
  --color-follower-btn-1:         #381428;
  --color-follower-btn-2:         #2e1438;

  /* Toggle */
  --color-toggle-button:          #fdfafc;
  --color-toggle-slide:           #cca1dd;

  /* Preview Cards */
  --color-text-preview-cards:     #fdfafc;
  --color-gradient-preview-cards: rgba(23, 10, 28, 0.5);
  --color-icon-preview-cards:     #fdfafc;

  /* Standard Bubble */
  --color-std-bubble-1:           #8c3264;
  --color-std-bubble-2:           #72338b;
  --color-std-bubble-pressed-1:   #eed0e1;
  --color-std-bubble-pressed-2:   #e5d0ee;
  --color-std-bubble-text:        #fdfafc;

  /* Chat Bubbles */
  --color-chat-you-1:             #8c3264;
  --color-chat-you-2:             #72338b;
  --color-chat-other-1:           #eed0e1;
  --color-chat-other-2:           #e5d0ee;
  --color-chat-unread:            #8c3264;
  --color-chat-text-you:          #fdfafc;
  --color-chat-text-other:        #020103;

  /* Icebreaker */
  --color-icebreaker-pitch-1:     #cc72a4;
  --color-icebreaker-pitch-2:     #b272cc;
  --color-icebreaker-line:        rgba(253, 250, 252, 0.7);
  --color-icebreaker-goal:        #8c3264;
  --color-icebreaker-ball:        #72338b;

  /* Misc */
  --color-not-editable:           #e5d0ee;

  /* TextField Classic */
  --color-textfield-border:         #e5d0ee;
  --color-textfield-border-focused: #cc72a4;
  --color-textfield-bg:             #020103;

  /* Liquid Slider Bubbles */
  --color-bubble-1:               #1c0a14;
  --color-bubble-2:               #170a1c;
  --color-bubble-border:          #1c0a14;

  /* Status Bubbles */
  --color-warning-bubble-1:       #ff5a5a;
  --color-warning-bubble-2:       #ff6b6b;
  --color-check-bubble-1:         #5ae682;
  --color-check-bubble-2:         #6be98f;

  /* Login Screen */
  --color-login-text:             #fdfafc;
  --color-login-text-faded:       #e5d0ee;
  --color-login-faded:            #e5d0ee;
  --color-login-warning:          #ff5a5a;
  --color-login-check:            #5ae682;
  --color-login-tf-border:        #eed0e1;
  --color-login-tf-border-focused:#e5d0ee;
  --color-login-btn-1:            #8c3264;
  --color-login-btn-2:            #72338b;
  --color-login-btn-pressed-1:    #dda1c2;
  --color-login-btn-pressed-2:    #cca1dd;
  --color-login-bg-1:             #381428;
  --color-login-bg-2:             #2e1438;
  --color-login-logo-bg:          #fdfafc;
}