diff --git a/src/styles/components.css b/src/styles/components.css index 5238313..c331b75 100644 --- a/src/styles/components.css +++ b/src/styles/components.css @@ -1,4 +1,4 @@ -/* Card - Glass Effect */ +/* Card */ .card { background-color: var(--color-card); border-radius: var(--radius-lg); @@ -6,12 +6,9 @@ padding: var(--spacing-lg); margin-bottom: var(--spacing-lg); border: 1px solid var(--color-border); - transition: all var(--transition-normal); - backdrop-filter: blur(var(--blur-md)); - -webkit-backdrop-filter: blur(var(--blur-md)); + transition: border-color var(--transition-normal); } -/* Remove top margin for h2 elements in cards */ .card h2 { margin-top: 0; } @@ -81,7 +78,7 @@ textarea.feed-description-edit, .button-success:hover, .button-success:focus { - background-color: rgba(10, 132, 255, 0.9); + opacity: 0.88; } .button-success.saved { @@ -89,12 +86,11 @@ textarea.feed-description-edit, transition: all 0.5s ease; } -/* Force saved button to stay green on hover */ .button-success.saved:hover { background-color: var(--color-success); } -/* Button container with space-between layout */ +/* Button container */ .feed-buttons { display: flex; justify-content: space-between; @@ -106,16 +102,14 @@ textarea.feed-description-edit, gap: var(--spacing-sm); } -/* Fixed width for action buttons to prevent layout shifts during state changes */ .feed-buttons-left .button { - width: 140px; /* Fixed exact width instead of min-width */ - justify-content: center; /* Ensure text is centered */ - box-sizing: border-box; /* Ensure padding is included in width calculation */ + width: 140px; + justify-content: center; + box-sizing: border-box; } -/* Ensure anchor tags in button containers match button styling exactly */ .feed-buttons-left a.button { - width: 140px; /* Same fixed width */ + width: 140px; box-sizing: border-box; text-align: center; } @@ -124,195 +118,85 @@ textarea.feed-description-edit, margin-left: auto; } -/* Button - VisionOS Style with consistent height */ +/* Button — primary orange */ .button { display: inline-flex; align-items: center; justify-content: center; position: relative; - overflow: hidden; - height: 44px; /* Fixed height for consistency */ + height: 40px; padding: 0 var(--spacing-lg); border-radius: var(--radius-md); - font-size: var(--font-size-md); - font-weight: var(--font-weight-medium); + font-size: var(--font-size-sm); + font-weight: var(--font-weight-semibold); + font-family: var(--font-family); text-decoration: none; cursor: pointer; transition: - all var(--transition-fast), - color 0.3s ease, - background-color 0.3s ease; + opacity var(--transition-fast), + transform var(--transition-fast), + box-shadow var(--transition-fast); white-space: nowrap; - opacity: 1; - - /* Liquid-glass depth: layered gradients + inner highlights */ - background-color: rgba(10, 132, 255, 0.78); - background-image: - radial-gradient( - 140% 120% at 18% 0%, - rgba(255, 255, 255, 0.38), - transparent 48% - ), - linear-gradient( - 180deg, - rgba(10, 132, 255, 0.98) 0%, - rgba(10, 132, 255, 0.68) 100% - ); - backdrop-filter: blur(var(--blur-sm)); - -webkit-backdrop-filter: blur(var(--blur-sm)); - border: 1px solid rgba(255, 255, 255, 0.16); - box-shadow: - 0 14px 34px rgba(0, 0, 0, 0.22), - 0 2px 6px rgba(0, 0, 0, 0.14), - inset 0 1px 0 rgba(255, 255, 255, 0.22), - inset 0 -1px 0 rgba(0, 0, 0, 0.26); + letter-spacing: -0.01em; + background-color: var(--color-primary); + border: 1px solid transparent; + box-shadow: var(--shadow-sm); color: var(--color-text-on-primary); } -.button::after { - content: ""; - position: absolute; - inset: 0; - border-radius: inherit; - pointer-events: none; - box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); - opacity: 0.9; -} - .button:hover, .button:focus { - background-color: rgba(10, 132, 255, 0.86); - background-image: - radial-gradient( - 140% 120% at 18% 0%, - rgba(255, 255, 255, 0.45), - transparent 50% - ), - linear-gradient( - 180deg, - rgba(10, 132, 255, 1) 0%, - rgba(10, 132, 255, 0.74) 100% - ); - box-shadow: - 0 18px 46px rgba(0, 0, 0, 0.26), - 0 6px 14px rgba(0, 0, 0, 0.16), - inset 0 1px 0 rgba(255, 255, 255, 0.22), - inset 0 -1px 0 rgba(0, 0, 0, 0.28); + opacity: 0.88; transform: translateY(-1px); + box-shadow: var(--shadow-md); } .button:active { transform: translateY(0); - box-shadow: - 0 10px 26px rgba(0, 0, 0, 0.22), - 0 2px 6px rgba(0, 0, 0, 0.12), - inset 0 1px 0 rgba(255, 255, 255, 0.18), - inset 0 -1px 0 rgba(0, 0, 0, 0.3); + opacity: 1; + box-shadow: var(--shadow-sm); } .button-secondary { - background-color: rgba(60, 60, 67, 0.12); - background-image: - radial-gradient( - 140% 120% at 18% 0%, - rgba(255, 255, 255, 0.26), - transparent 52% - ), - linear-gradient( - 180deg, - rgba(60, 60, 67, 0.22) 0%, - rgba(60, 60, 67, 0.08) 100% - ); + background-color: transparent; + border: 1px solid var(--color-border); color: var(--color-text-primary); - border: 1px solid rgba(255, 255, 255, 0.12); +} + +@media (prefers-color-scheme: light) { + .button-secondary { + background-color: rgba(0, 0, 0, 0.04); + } } .button-secondary:hover, .button-secondary:focus { - background-color: rgba(60, 60, 67, 0.18); - background-image: - radial-gradient( - 140% 120% at 18% 0%, - rgba(255, 255, 255, 0.3), - transparent 52% - ), - linear-gradient( - 180deg, - rgba(60, 60, 67, 0.28) 0%, - rgba(60, 60, 67, 0.1) 100% - ); + background-color: rgba(255, 255, 255, 0.06); + border-color: rgba(255, 255, 255, 0.2); } -/* Light mode specific button styling */ @media (prefers-color-scheme: light) { - .button-secondary { - background-color: rgba(60, 60, 67, 0.06); - background-image: - radial-gradient( - 140% 120% at 18% 0%, - rgba(255, 255, 255, 0.55), - transparent 55% - ), - linear-gradient( - 180deg, - rgba(60, 60, 67, 0.1) 0%, - rgba(60, 60, 67, 0.04) 100% - ); - border: 1px solid rgba(60, 60, 67, 0.14); - } - .button-secondary:hover, .button-secondary:focus { - background-color: rgba(60, 60, 67, 0.08); - background-image: - radial-gradient( - 140% 120% at 18% 0%, - rgba(255, 255, 255, 0.62), - transparent 55% - ), - linear-gradient( - 180deg, - rgba(60, 60, 67, 0.12) 0%, - rgba(60, 60, 67, 0.06) 100% - ); + background-color: rgba(0, 0, 0, 0.08); + border-color: rgba(0, 0, 0, 0.16); } } -/* Logout button styling */ +/* Logout button — same orange family */ .button-logout { - background-color: rgba(255, 159, 10, 0.78); - background-image: - radial-gradient( - 140% 120% at 18% 0%, - rgba(255, 255, 255, 0.34), - transparent 50% - ), - linear-gradient( - 180deg, - rgba(255, 159, 10, 0.98) 0%, - rgba(255, 159, 10, 0.66) 100% - ); - color: var(--color-text-on-primary); - border: 1px solid rgba(255, 255, 255, 0.1); + background-color: transparent; + border: 1px solid var(--color-border); + color: var(--color-text-secondary); } .button-logout:hover, .button-logout:focus { - background-color: rgba(255, 159, 10, 0.86); - background-image: - radial-gradient( - 140% 120% at 18% 0%, - rgba(255, 255, 255, 0.42), - transparent 52% - ), - linear-gradient( - 180deg, - rgba(255, 159, 10, 1) 0%, - rgba(255, 159, 10, 0.72) 100% - ); + color: var(--color-primary); + border-color: var(--color-primary); } -/* Back button styling */ +/* Back button */ .button-back { display: inline-flex; align-items: center; @@ -327,41 +211,22 @@ textarea.feed-description-edit, } .button-danger { - background-color: rgba(255, 69, 58, 0.78); - background-image: - radial-gradient( - 140% 120% at 18% 0%, - rgba(255, 255, 255, 0.34), - transparent 50% - ), - linear-gradient( - 180deg, - rgba(255, 69, 58, 0.98) 0%, - rgba(255, 69, 58, 0.66) 100% - ); + background-color: var(--color-danger); + color: var(--color-text-on-primary); + border-color: transparent; } .button-danger:hover, .button-danger:focus { - background-color: rgba(255, 69, 58, 0.86); - background-image: - radial-gradient( - 140% 120% at 18% 0%, - rgba(255, 255, 255, 0.42), - transparent 52% - ), - linear-gradient( - 180deg, - rgba(255, 69, 58, 1) 0%, - rgba(255, 69, 58, 0.72) 100% - ); + background-color: var(--color-danger); + opacity: 0.85; } -/* Small button variation */ +/* Small button */ .button-small { - height: 36px; /* Smaller height */ + height: 32px; padding: 0 var(--spacing-md); - font-size: var(--font-size-sm); + font-size: var(--font-size-xs); } /* Form Elements */ @@ -386,15 +251,26 @@ textarea { width: 100%; padding: var(--spacing-md); font-size: var(--font-size-md); + font-family: var(--font-family); border-radius: var(--radius-md); border: 1px solid var(--color-border); - background-color: rgba(60, 60, 67, 0.1); + background-color: rgba(255, 255, 255, 0.04); color: var(--color-text-primary); - transition: all var(--transition-fast); + transition: + border-color var(--transition-fast), + box-shadow var(--transition-fast); box-sizing: border-box; - font-family: var(--font-family); - backdrop-filter: blur(var(--blur-sm)); - -webkit-backdrop-filter: blur(var(--blur-sm)); +} + +@media (prefers-color-scheme: light) { + input[type="text"], + input[type="email"], + input[type="search"], + input[type="password"], + textarea { + background-color: rgba(0, 0, 0, 0.03); + border-color: rgba(0, 0, 0, 0.14); + } } input[type="search"] { @@ -413,7 +289,7 @@ input:focus, textarea:focus { outline: none; border-color: var(--color-primary); - box-shadow: 0 0 0 2px rgba(10, 132, 255, 0.2); + box-shadow: 0 0 0 2px rgba(246, 130, 31, 0.2); } /* Modal */ @@ -424,9 +300,9 @@ textarea:focus { left: 0; width: 100%; height: 100%; - background: rgba(0, 0, 0, 0.3); - backdrop-filter: blur(var(--blur-lg)); - -webkit-backdrop-filter: blur(var(--blur-lg)); + background: rgba(0, 0, 0, 0.6); + backdrop-filter: blur(var(--blur-md)); + -webkit-backdrop-filter: blur(var(--blur-md)); justify-content: center; align-items: center; z-index: 1000; @@ -450,8 +326,6 @@ textarea:focus { opacity: 0; transition: all var(--transition-normal); border: 1px solid var(--color-border); - backdrop-filter: blur(var(--blur-md)); - -webkit-backdrop-filter: blur(var(--blur-md)); } .modal-bg.visible .modal { @@ -528,17 +402,16 @@ textarea:focus { .email-iframe { width: 100%; - height: 500px; /* Smaller default height */ + height: 500px; border: none; background-color: #ffffff; transition: height 0.3s ease; } -/* Dark mode specific styling for email iframe */ @media (prefers-color-scheme: dark) { .email-iframe-container { background-color: #1c1c1e; - border-color: #3a3a3c; + border-color: #2a2a2a; } .email-iframe { background-color: #1c1c1e; @@ -548,15 +421,13 @@ textarea:focus { /* Email Raw View */ .email-raw { padding: var(--spacing-md); - background-color: rgba(30, 30, 32, 0.7); + background-color: #111111; border-radius: var(--radius-md); border: 1px solid var(--color-border); overflow: auto; - max-height: 500px; /* Match iframe default height */ - backdrop-filter: blur(var(--blur-sm)); + max-height: 500px; } -/* Light mode specific styling for Raw HTML view */ @media (prefers-color-scheme: light) { .email-raw { background-color: rgba(240, 240, 245, 0.9); @@ -571,7 +442,7 @@ textarea:focus { word-break: break-word; } -/* Email Metadata Styling */ +/* Email Metadata */ .email-meta { margin-bottom: var(--spacing-md); padding-bottom: var(--spacing-md); @@ -609,23 +480,25 @@ textarea:focus { .toggle-button { padding: var(--spacing-sm) var(--spacing-md); border-radius: var(--radius-md); - background-color: rgba(60, 60, 67, 0.1); + background-color: transparent; border: 1px solid var(--color-border); color: var(--color-text-secondary); cursor: pointer; transition: all var(--transition-fast); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); + font-family: var(--font-family); } .toggle-button:hover { - background-color: rgba(60, 60, 67, 0.2); + color: var(--color-text-primary); + border-color: rgba(255, 255, 255, 0.2); } .toggle-button.active { background-color: var(--color-primary); color: var(--color-text-on-primary); - border-color: var(--color-primary); + border-color: transparent; } /* Email content container */ @@ -635,7 +508,7 @@ textarea:focus { overflow: hidden; } -/* Toolbar + segmented control (Apple-ish) */ +/* Toolbar */ .toolbar { display: flex; align-items: center; @@ -659,21 +532,21 @@ textarea:focus { input.search { min-width: 280px; flex: 1; - height: 40px; + height: 36px; border-radius: var(--radius-pill); padding: 0 14px; padding-left: 38px; - background-color: rgba(60, 60, 67, 0.14); - background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%238e8e93'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='11'%20cy='11'%20r='7'/%3E%3Cpath%20d='M21%2021l-4.3-4.3'/%3E%3C/svg%3E"); + background-color: rgba(255, 255, 255, 0.04); + border: 1px solid var(--color-border); + background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23555555'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='11'%20cy='11'%20r='7'/%3E%3Cpath%20d='M21%2021l-4.3-4.3'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: 14px center; background-size: 16px 16px; - box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06); } @media (prefers-color-scheme: light) { input.search { - background-color: rgba(60, 60, 67, 0.08); + background-color: rgba(0, 0, 0, 0.03); } } @@ -690,15 +563,14 @@ input.search::placeholder { .pill { display: inline-flex; align-items: center; - height: 28px; + height: 24px; padding: 0 10px; border-radius: var(--radius-pill); border: 1px solid var(--color-border); - background-color: rgba(60, 60, 67, 0.12); + background-color: transparent; color: var(--color-text-secondary); - font-size: var(--font-size-sm); - backdrop-filter: blur(var(--blur-sm)); - -webkit-backdrop-filter: blur(var(--blur-sm)); + font-size: var(--font-size-xs); + font-weight: var(--font-weight-medium); } .segmented { @@ -706,9 +578,7 @@ input.search::placeholder { border-radius: var(--radius-pill); padding: 2px; border: 1px solid var(--color-border); - background-color: rgba(60, 60, 67, 0.12); - backdrop-filter: blur(var(--blur-sm)); - -webkit-backdrop-filter: blur(var(--blur-sm)); + background-color: transparent; box-shadow: var(--shadow-sm); } @@ -716,7 +586,7 @@ input.search::placeholder { display: inline-flex; align-items: center; justify-content: center; - padding: 8px 12px; + padding: 6px 14px; border-radius: var(--radius-pill); text-decoration: none; color: var(--color-text-secondary); @@ -732,14 +602,8 @@ input.search::placeholder { .segmented-item.is-active { color: var(--color-text-primary); - background-color: rgba(255, 255, 255, 0.12); - box-shadow: var(--shadow-sm); -} - -@media (prefers-color-scheme: light) { - .segmented-item.is-active { - background-color: rgba(255, 255, 255, 0.85); - } + background-color: var(--color-primary); + color: var(--color-text-on-primary); } /* Tables */ @@ -747,13 +611,6 @@ input.search::placeholder { overflow-x: auto; border-radius: var(--radius-lg); border: 1px solid var(--color-border); - background-color: rgba(60, 60, 67, 0.05); -} - -@media (prefers-color-scheme: light) { - .table-wrap { - background-color: rgba(255, 255, 255, 0.6); - } } table.table { @@ -835,7 +692,7 @@ th.th-resizable { } th.th-resizable:hover .col-resizer:after { - background: rgba(255, 255, 255, 0.2); + background: rgba(255, 255, 255, 0.15); } @media (prefers-color-scheme: light) { @@ -850,27 +707,28 @@ body.is-resizing { } table.table thead th { - font-size: var(--font-size-sm); + font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); - color: var(--color-text-secondary); - background-color: rgba(44, 44, 46, 0.35); - backdrop-filter: blur(var(--blur-sm)); - -webkit-backdrop-filter: blur(var(--blur-sm)); + letter-spacing: 0.04em; + text-transform: uppercase; + color: var(--color-text-tertiary); + background-color: rgba(255, 255, 255, 0.02); } @media (prefers-color-scheme: light) { table.table thead th { - background-color: rgba(255, 255, 255, 0.55); + background-color: rgba(0, 0, 0, 0.02); + color: var(--color-text-secondary); } } table.table tbody tr:hover { - background-color: rgba(255, 255, 255, 0.04); + background-color: rgba(255, 255, 255, 0.03); } @media (prefers-color-scheme: light) { table.table tbody tr:hover { - background-color: rgba(0, 0, 0, 0.03); + background-color: rgba(0, 0, 0, 0.02); } } @@ -932,7 +790,7 @@ table.table code { background-color: rgba(255, 69, 58, 0.22); border-color: rgba(255, 69, 58, 0.65); color: #fff; - box-shadow: 0 12px 28px rgba(255, 69, 58, 0.18); + box-shadow: 0 8px 20px rgba(255, 69, 58, 0.18); transform: translateY(-1px); } @@ -964,7 +822,7 @@ table.table code { padding 220ms ease; } -/* Spinner (buttons + toasts) */ +/* Spinner */ @keyframes spin { to { transform: rotate(360deg); @@ -975,8 +833,8 @@ table.table code { width: 14px; height: 14px; border-radius: 999px; - border: 2px solid rgba(255, 255, 255, 0.35); - border-top-color: rgba(255, 255, 255, 0.95); + border: 2px solid rgba(255, 255, 255, 0.25); + border-top-color: rgba(255, 255, 255, 0.9); display: inline-block; animation: spin 0.85s linear infinite; flex: 0 0 auto; @@ -984,8 +842,8 @@ table.table code { @media (prefers-color-scheme: light) { .spinner { - border-color: rgba(0, 0, 0, 0.16); - border-top-color: rgba(0, 0, 0, 0.55); + border-color: rgba(0, 0, 0, 0.14); + border-top-color: rgba(0, 0, 0, 0.5); } } @@ -1016,11 +874,11 @@ table.table code { opacity 180ms ease, transform 180ms ease; border-radius: var(--radius-lg); - border: 1px solid rgba(255, 255, 255, 0.12); - background-color: rgba(44, 44, 46, 0.72); + border: 1px solid var(--color-border); + background-color: #1a1a1a; backdrop-filter: blur(var(--blur-md)); -webkit-backdrop-filter: blur(var(--blur-md)); - box-shadow: 0 14px 40px rgba(0, 0, 0, 0.28); + box-shadow: var(--shadow-xl); padding: 12px 12px; display: flex; align-items: flex-start; @@ -1031,9 +889,9 @@ table.table code { @media (prefers-color-scheme: light) { .toast { - background-color: rgba(255, 255, 255, 0.78); - border-color: rgba(60, 60, 67, 0.18); - box-shadow: 0 14px 40px rgba(0, 0, 0, 0.14); + background-color: rgba(255, 255, 255, 0.95); + border-color: rgba(0, 0, 0, 0.1); + box-shadow: var(--shadow-xl); } } @@ -1085,7 +943,7 @@ table.table code { } .toast-info { - border-color: rgba(10, 132, 255, 0.35); + border-color: rgba(246, 130, 31, 0.35); } .toast-success { diff --git a/src/styles/layout.css b/src/styles/layout.css index 751c564..bda91b6 100644 --- a/src/styles/layout.css +++ b/src/styles/layout.css @@ -14,43 +14,37 @@ -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; - /* Liquid-glass-ish background (subtle, non-distracting) */ - background-image: - radial-gradient( - 1200px circle at 20% 10%, - rgba(10, 132, 255, 0.18), - transparent 55% - ), - radial-gradient( - 900px circle at 80% 20%, - rgba(94, 92, 230, 0.14), - transparent 60% - ), - radial-gradient( - 700px circle at 50% 100%, - rgba(48, 209, 88, 0.1), - transparent 60% - ), - linear-gradient( - 135deg, - rgba(255, 255, 255, 0.03) 0%, - rgba(0, 0, 0, 0.03) 100% - ); + /* Subtle orange glow matching landing page hero */ + background-image: radial-gradient( + 900px circle at 50% 0%, + rgba(246, 130, 31, 0.08), + transparent 60% + ); background-attachment: fixed; } -/* Main Container */ +@media (prefers-color-scheme: light) { + .page { + background-image: radial-gradient( + 900px circle at 50% 0%, + rgba(246, 130, 31, 0.06), + transparent 60% + ); + } +} + +/* Main Container — unified width for list and table views */ .container { width: 100%; - max-width: 980px; + max-width: 1200px; margin: 0 auto; padding: var(--spacing-xl); box-sizing: border-box; } -/* Wider layout for data-dense pages (tables) */ +/* Keep for compatibility but unused on dashboard */ .container-wide { - max-width: 1440px; + max-width: 1400px; } /* Header Styles */ @@ -95,8 +89,6 @@ box-shadow: var(--shadow-xl); border: 1px solid var(--color-border); transition: all var(--transition-normal); - backdrop-filter: blur(var(--blur-md)); - -webkit-backdrop-filter: blur(var(--blur-md)); } .auth-logo { @@ -118,8 +110,6 @@ margin-bottom: var(--spacing-lg); text-align: center; font-weight: var(--font-weight-medium); - backdrop-filter: blur(var(--blur-sm)); - -webkit-backdrop-filter: blur(var(--blur-sm)); } .auth-form { @@ -164,7 +154,7 @@ font-weight: var(--font-weight-bold); margin-bottom: var(--spacing-xs); line-height: 1.2; - color: var(--color-text-primary); /* Fallback color */ + color: var(--color-text-primary); background: var(--gradient-title); -webkit-background-clip: text; background-clip: text; diff --git a/src/styles/variables.css b/src/styles/variables.css index b632fd5..8db83d2 100644 --- a/src/styles/variables.css +++ b/src/styles/variables.css @@ -1,8 +1,8 @@ :root { - /* Typography - Prefer system UI fonts (Apple HIG-ish) */ + /* Typography — Inter matches the landing page style */ --font-family: - -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", - "Helvetica Neue", Arial, sans-serif; + "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, + sans-serif; --font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; @@ -18,40 +18,31 @@ --font-weight-semibold: 600; --font-weight-bold: 700; - /* Colors - Dark Mode (Default) */ - --color-primary: #0a84ff; - --color-primary-dark: #409cff; - --color-secondary: #5e5ce6; + /* Colors — Dark Mode (Default) — aligned with kill-the-news landing page */ + --color-primary: #f6821f; + --color-primary-dark: #ffa050; + --color-secondary: #f0b429; --color-success: #30d158; --color-warning: #ff9f0a; --color-danger: #ff453a; --color-danger-dark: #ff6961; - --color-background: rgba( - 28, - 28, - 30, - 0.95 - ); /* Semi-transparent for glass effect */ - --color-card: rgba(44, 44, 46, 0.8); /* Semi-transparent for glass effect */ - --color-border: rgba(255, 255, 255, 0.08); - --color-text-primary: #ffffff; - --color-text-secondary: #ebebf5; - --color-text-tertiary: #8e8e93; + --color-background: #0a0a0a; + --color-card: #111111; + --color-border: rgba(255, 255, 255, 0.1); + --color-text-primary: #f0f0f0; + --color-text-secondary: #888888; + --color-text-tertiary: #555555; --color-text-on-primary: #ffffff; - --color-logout: rgba(255, 159, 10, 0.8); /* Orange-tinted for logout */ + --color-logout: rgba(246, 130, 31, 0.85); /* Gradients */ - --gradient-title: linear-gradient( - 135deg, - var(--color-primary), - var(--color-secondary) - ); + --gradient-title: linear-gradient(135deg, #f6821f, #f0b429); - /* Shadows for dark mode */ - --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); - --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.2); - --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.2); - --shadow-xl: 0 12px 24px rgba(0, 0, 0, 0.2); + /* Shadows */ + --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4); + --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4); + --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); + --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5); /* Spacing */ --spacing-xs: 4px; @@ -62,64 +53,46 @@ --spacing-xxl: 48px; /* Radius */ - --radius-sm: 8px; - --radius-md: 12px; - --radius-lg: 16px; + --radius-sm: 6px; + --radius-md: 10px; + --radius-lg: 12px; --radius-pill: 9999px; - /* Animation - Subtle */ + /* Animation */ --transition-fast: 0.15s cubic-bezier(0.16, 1, 0.3, 1); --transition-normal: 0.2s cubic-bezier(0.16, 1, 0.3, 1); --transition-slow: 0.3s cubic-bezier(0.16, 1, 0.3, 1); - /* Blur for glass effect */ + /* Blur — only for modals and toasts */ --blur-sm: 8px; --blur-md: 12px; --blur-lg: 20px; } -/* Light Mode Support - Based on device preference */ +/* Light Mode */ @media (prefers-color-scheme: light) { :root { - --color-primary: #0070f3; - --color-primary-dark: #0051a8; - --color-secondary: #5e5ce6; + --color-primary: #e07010; + --color-primary-dark: #c05800; + --color-secondary: #d49800; --color-success: #34c759; --color-warning: #ff9500; --color-danger: #ff3b30; --color-danger-dark: #d70015; - --color-background: rgba( - 245, - 245, - 247, - 0.9 - ); /* Semi-transparent for glass effect */ - --color-card: rgba( - 255, - 255, - 255, - 0.8 - ); /* Semi-transparent for glass effect */ - --color-border: rgba(0, 0, 0, 0.06); - --color-text-primary: #000000; - --color-text-secondary: #666666; + --color-background: #f5f5f7; + --color-card: #ffffff; + --color-border: rgba(0, 0, 0, 0.1); + --color-text-primary: #111111; + --color-text-secondary: #555555; --color-text-tertiary: #999999; --color-text-on-primary: #ffffff; - --color-logout: rgba(255, 149, 0, 0.8); /* Orange-tinted for logout */ + --color-logout: rgba(224, 112, 16, 0.9); - /* Reset shadows for light mode */ - --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.03); - --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.05); - --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.06); - --shadow-xl: 0 12px 24px rgba(0, 0, 0, 0.08); + --gradient-title: linear-gradient(135deg, #e07010, #d49800); - /* Update gradient for light mode */ - --gradient-title: linear-gradient( - 135deg, - var(--color-primary), - var(--color-secondary) - ); + --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08); + --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1); + --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.1); + --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.12); } } - -/* No external font imports. */