Enhance color scheme and readability with warmer tones and better contrast

src/streamlit_app.py

@@ -19,113 +19,140 @@ st.markdown("""
     
     /* Main container styling */
     .stApp {
-        background-color: #F5F3F0;  /* Soft cream background */
+        background-color: #FAF6F2;  /* Warmer, lighter background */
     }
     
     /* Headers */
     h1, h2, h3 {
         font-family: 'Inter', sans-serif;
-        color: #5C4B51;  /* Warm gray */
+        color: #3D3235;  /* Darker, more readable warm gray */
         font-weight: 600;
+        margin-bottom: 1.2rem;
     }
     
     /* Text areas and inputs */
     .stTextArea, .stTextInput {
         background-color: #FFFFFF;
-        border-radius: 1rem;
-        border: 1px solid #E0D5C8;  /* Soft clay */
-        padding: 1rem;
-        box-shadow: 0 2px 4px rgba(0,0,0,0.05);
+        border-radius: 0.8rem;
+        border: 1px solid #D4C5B9;  /* Darker border for better definition */
+        padding: 1.2rem;
+        box-shadow: 0 2px 6px rgba(0,0,0,0.05);
     }
     
     /* Buttons */
     .stButton > button {
-        background-color: #8B9D83;  /* Sage green */
+        background-color: #7A8B73;  /* Slightly darker sage for better contrast */
         color: white;
-        border-radius: 1rem;
-        padding: 0.5rem 1.5rem;
+        border-radius: 0.8rem;
+        padding: 0.6rem 1.8rem;
         border: none;
-        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+        box-shadow: 0 2px 4px rgba(0,0,0,0.15);
         font-family: 'Inter', sans-serif;
         font-weight: 500;
         transition: all 0.3s ease;
     }
     
     .stButton > button:hover {
-        background-color: #7A8B73;  /* Darker sage */
+        background-color: #697A62;  /* Even darker on hover */
         transform: translateY(-1px);
     }
     
     /* Tone badges */
     .tone-badge {
-        padding: 0.25rem 0.75rem;
-        border-radius: 1rem;
+        padding: 0.4rem 1rem;
+        border-radius: 0.8rem;
         font-size: 0.9em;
         display: inline-block;
-        margin-bottom: 0.5rem;
+        margin-bottom: 0.8rem;
+        font-weight: 500;
     }
     
     .tone-warm {
-        background-color: #FFF3E0;  /* Pale gold */
-        color: #B7935F;
+        background-color: #FFE4CC;  /* Warmer gold */
+        color: #96642D;  /* Darker text for better contrast */
     }
     
     .tone-reflective {
-        background-color: #E8F5E9;  /* Soft green */
-        color: #6B9080;
+        background-color: #D7E8D5;  /* Deeper green */
+        color: #4B6D5F;
     }
     
     .tone-encouraging {
-        background-color: #E8EAF6;  /* Light lavender */
-        color: #7986CB;
+        background-color: #E0E4F5;  /* Deeper lavender */
+        color: #505FA6;
     }
     
     .tone-direct {
-        background-color: #ECEFF1;  /* Slate gray */
-        color: #546E7A;
+        background-color: #E2E7EC;  /* Deeper slate */
+        color: #3F525C;
     }
     
     /* Expander styling */
     .streamlit-expanderHeader {
-        background-color: #F9F7F4;  /* Light cream */
-        border-radius: 0.75rem;
-        border: 1px solid #E0D5C8;
+        background-color: #FFFFFF;  /* White background for better contrast */
+        border-radius: 0.8rem;
+        border: 1px solid #D4C5B9;
+        padding: 0.8rem;
     }
     
     /* Sidebar */
     .css-1d391kg {  /* Sidebar */
-        background-color: #F9F7F4;
-        border-right: 1px solid #E0D5C8;
+        background-color: #FFFFFF;  /* White background */
+        border-right: 1px solid #D4C5B9;
     }
     
     /* Markdown text */
     p, li {
         font-family: 'Inter', sans-serif;
-        color: #5C4B51;  /* Warm gray */
-        line-height: 1.6;
+        color: #3D3235;  /* Darker text for better readability */
+        line-height: 1.8;
+        font-size: 1rem;
+        margin-bottom: 1rem;
     }
     
     /* Custom containers */
     .warm-container {
         background-color: #FFFFFF;
-        border-radius: 1rem;
-        padding: 1.5rem;
-        border: 1px solid #E0D5C8;
-        margin: 1rem 0;
-        box-shadow: 0 2px 8px rgba(0,0,0,0.05);
+        border-radius: 0.8rem;
+        padding: 2rem;
+        border: 1px solid #D4C5B9;
+        margin: 1.5rem 0;
+        box-shadow: 0 3px 10px rgba(0,0,0,0.05);
     }
 
     /* Alert styling */
     .alert {
-        padding: 1rem;
-        border-radius: 0.5rem;
-        margin: 1rem 0;
+        padding: 1.2rem;
+        border-radius: 0.8rem;
+        margin: 1.2rem 0;
         border-left: 4px solid;
     }
     
     .alert-warning {
-        background-color: #FFF3E0;
-        border-left-color: #FFB74D;
+        background-color: #FFF8E8;  /* Lighter warning background */
+        border-left-color: #F4A261;  /* Warmer warning color */
+        color: #8B5E3C;  /* Darker text for better contrast */
+    }
+
+    /* Selectbox styling */
+    .stSelectbox {
+        background-color: #FFFFFF;
+        border-radius: 0.8rem;
+        border: 1px solid #D4C5B9;
+    }
+
+    /* Text area label */
+    .stTextArea label {
+        color: #3D3235;
+        font-weight: 500;
+        margin-bottom: 0.5rem;
+    }
+
+    /* Prompt styling */
+    .prompt-text {
+        color: #666666;
+        font-style: italic;
+        margin-bottom: 1rem;
     }
 </style>
 """, unsafe_allow_html=True)