diff --git a/frontend/src/components/AppHeader.vue b/frontend/src/components/AppHeader.vue index a975ba2..2a3ea94 100644 --- a/frontend/src/components/AppHeader.vue +++ b/frontend/src/components/AppHeader.vue @@ -174,7 +174,7 @@ router.afterEach(() => { font-family: 'Fraunces', Georgia, serif; font-style: italic; font-optical-sizing: auto; - font-weight: 600; + font-weight: 500; font-size: 1rem; letter-spacing: -0.01em; color: #c4b0f0; @@ -219,7 +219,7 @@ router.afterEach(() => { } .nav-link.router-link-active { color: var(--color-primary-solid); - font-weight: 600; + font-weight: 500; background: rgba(91, 74, 138, 0.25); box-shadow: 0 0 16px rgba(91, 74, 138, 0.3); } @@ -294,7 +294,7 @@ router.afterEach(() => { } .admin-badge { font-size: 0.65rem; - font-weight: 700; + font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-primary); diff --git a/frontend/src/components/EventSlideOver.vue b/frontend/src/components/EventSlideOver.vue index e5cd769..0569f5f 100644 --- a/frontend/src/components/EventSlideOver.vue +++ b/frontend/src/components/EventSlideOver.vue @@ -390,7 +390,7 @@ async function doDelete() { .so-title { font-size: 1.05rem; - font-weight: 600; + font-weight: 500; margin: 0; color: var(--color-text, #e8e9f0); } @@ -420,7 +420,7 @@ async function doDelete() { .so-label { font-size: 0.78rem; - font-weight: 600; + font-weight: 500; color: var(--color-text-muted, #888); text-transform: uppercase; letter-spacing: 0.04em; @@ -492,53 +492,61 @@ async function doDelete() { margin-top: auto; } +/* Save (in slide-over): Moss action-primary */ .btn-primary { - background: var(--gradient-cta); + background: var(--color-action-primary); color: #fff; border: none; border-radius: 8px; padding: 0.55rem 1.2rem; font-size: 0.9rem; - font-weight: 600; + font-weight: 500; cursor: pointer; - transition: opacity 0.15s; + transition: background 0.15s; } .btn-primary:disabled { opacity: 0.5; cursor: not-allowed; } -.btn-primary:hover:not(:disabled) { opacity: 0.88; } +.btn-primary:hover:not(:disabled) { background: var(--color-action-primary-hover); } +/* Cancel: Bronze action-secondary */ .btn-secondary { - background: var(--color-input-bg, #111113); - border: 1px solid var(--color-border, #2a2b30); - color: var(--color-text-muted, #888); + background: var(--color-action-secondary); + border: none; + color: #fff; border-radius: 8px; padding: 0.55rem 1rem; font-size: 0.9rem; cursor: pointer; + transition: background 0.15s; } -.btn-secondary:hover { background: var(--color-hover, rgba(255,255,255,0.06)); } +.btn-secondary:hover { background: var(--color-action-secondary-hover); } +/* Delete (entry-point): Oxblood action-destructive ghost */ .btn-danger-ghost { margin-left: auto; background: none; - border: 1px solid #ef4444; - color: #ef4444; + border: 1px solid var(--color-action-destructive); + color: var(--color-action-destructive); border-radius: 8px; padding: 0.55rem 1rem; font-size: 0.9rem; cursor: pointer; + transition: background 0.15s, color 0.15s; } -.btn-danger-ghost:hover { background: rgba(239, 68, 68, 0.1); } +.btn-danger-ghost:hover { background: var(--color-action-destructive); color: #fff; } +/* Confirm-delete: Oxblood filled */ .btn-danger { - background: #ef4444; + background: var(--color-action-destructive); color: #fff; border: none; border-radius: 8px; padding: 0.55rem 1rem; font-size: 0.9rem; - font-weight: 600; + font-weight: 500; cursor: pointer; + transition: background 0.15s; } +.btn-danger:hover:not(:disabled) { background: var(--color-action-destructive-hover); } .btn-danger:disabled { opacity: 0.5; cursor: not-allowed; } .delete-confirm-label { diff --git a/frontend/src/views/CalendarView.vue b/frontend/src/views/CalendarView.vue index 082e4e7..065347b 100644 --- a/frontend/src/views/CalendarView.vue +++ b/frontend/src/views/CalendarView.vue @@ -426,23 +426,24 @@ const upcomingGrouped = computed(() => { .cal-title { font-size: 1.5rem; - font-weight: 700; + font-weight: 500; margin: 0; color: var(--color-text, #e8e9f0); } +/* New event: Moss action-primary — workflow action, not a brand moment */ .btn-new-event { - background: var(--gradient-cta); + background: var(--color-action-primary); color: #fff; border: none; border-radius: 8px; padding: 0.55rem 1.1rem; font-size: 0.9rem; - font-weight: 600; + font-weight: 500; cursor: pointer; - transition: opacity 0.15s; + transition: background 0.15s; } -.btn-new-event:hover { opacity: 0.88; } +.btn-new-event:hover { background: var(--color-action-primary-hover); } .fc-wrapper { background: var(--color-surface); @@ -459,7 +460,7 @@ const upcomingGrouped = computed(() => { } :deep(.fc-toolbar-title) { font-size: 1.1rem; - font-weight: 600; + font-weight: 500; cursor: pointer; border-radius: 6px; padding: 2px 8px; @@ -530,7 +531,7 @@ const upcomingGrouped = computed(() => { .picker-year-label { font-size: 0.95rem; - font-weight: 700; + font-weight: 500; color: var(--color-text, #e8e9f0); } @@ -573,7 +574,7 @@ const upcomingGrouped = computed(() => { .picker-month.active { background: rgba(91, 74, 138,0.22); color: var(--color-primary); - font-weight: 700; + font-weight: 500; } /* ── Upcoming strip ─────────────────────────────────────────────────────── */ @@ -583,7 +584,7 @@ const upcomingGrouped = computed(() => { .upcoming-title { font-size: 1rem; - font-weight: 600; + font-weight: 500; color: var(--color-text-muted, #888); text-transform: uppercase; letter-spacing: 0.06em; @@ -599,7 +600,7 @@ const upcomingGrouped = computed(() => { .upcoming-day-label { font-size: 0.8rem; - font-weight: 700; + font-weight: 500; color: var(--color-text-muted, #888); text-transform: uppercase; letter-spacing: 0.05em; @@ -642,7 +643,7 @@ const upcomingGrouped = computed(() => { .upcoming-card-title { font-size: 0.9rem; - font-weight: 600; + font-weight: 500; color: var(--color-text, #e8e9f0); white-space: nowrap; overflow: hidden; @@ -697,7 +698,7 @@ const upcomingGrouped = computed(() => { .popover-title { font-size: 0.95rem; - font-weight: 700; + font-weight: 500; color: var(--color-text, #e8e9f0); margin-bottom: 0.35rem; } @@ -741,7 +742,7 @@ const upcomingGrouped = computed(() => { border: none; border-radius: 6px; font-size: 0.82rem; - font-weight: 600; + font-weight: 500; cursor: pointer; transition: opacity 0.15s; } diff --git a/frontend/src/views/GraphView.vue b/frontend/src/views/GraphView.vue index 07d02a2..9d8508f 100644 --- a/frontend/src/views/GraphView.vue +++ b/frontend/src/views/GraphView.vue @@ -759,7 +759,7 @@ onUnmounted(() => { .tooltip-title { font-size: 0.875rem; - font-weight: 600; + font-weight: 500; color: var(--color-text); margin-bottom: 0.25rem; } @@ -821,7 +821,7 @@ onUnmounted(() => { .peek-type-badge { font-size: 0.68rem; - font-weight: 600; + font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; padding: 0.15rem 0.45rem; @@ -860,7 +860,7 @@ onUnmounted(() => { margin: 0; padding: 0.75rem 0.75rem 0.4rem; font-size: 1rem; - font-weight: 600; + font-weight: 500; color: var(--color-text); flex-shrink: 0; } @@ -898,7 +898,7 @@ onUnmounted(() => { .peek-linked-label { font-size: 0.7rem; - font-weight: 600; + font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-muted); @@ -933,7 +933,7 @@ onUnmounted(() => { .peek-linked-type { font-size: 0.65rem; - font-weight: 700; + font-weight: 500; width: 1.1rem; height: 1.1rem; border-radius: 50%; diff --git a/frontend/src/views/HomeView.vue b/frontend/src/views/HomeView.vue index 8544d57..d366dc1 100644 --- a/frontend/src/views/HomeView.vue +++ b/frontend/src/views/HomeView.vue @@ -585,14 +585,14 @@ function formatUpcomingTime(event: EventEntry): string { } .hero-label { font-size: 0.7rem; - font-weight: 700; + font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-text-muted); } .hero-title { font-size: 1.4rem; - font-weight: 700; + font-weight: 500; color: var(--color-text); text-decoration: none; letter-spacing: -0.02em; @@ -610,7 +610,7 @@ function formatUpcomingTime(event: EventEntry): string { border-radius: var(--radius-sm); text-decoration: none; font-size: 0.9rem; - font-weight: 600; + font-weight: 500; white-space: nowrap; box-shadow: 0 1px 6px rgba(91, 74, 138, 0.3); transition: opacity 0.15s, box-shadow 0.15s; @@ -625,7 +625,7 @@ function formatUpcomingTime(event: EventEntry): string { .hero-section-label { font-size: 0.68rem; - font-weight: 700; + font-weight: 500; text-transform: uppercase; letter-spacing: 0.07em; color: var(--color-text-muted); @@ -688,7 +688,7 @@ function formatUpcomingTime(event: EventEntry): string { justify-content: space-between; margin-bottom: 0.75rem; } -.section-header h2 { margin: 0; font-size: 1rem; font-weight: 600; } +.section-header h2 { margin: 0; font-size: 1rem; font-weight: 500; } .see-all { font-size: 0.85rem; color: var(--color-primary); text-decoration: none; } .see-all:hover { text-decoration: underline; } @@ -718,7 +718,7 @@ function formatUpcomingTime(event: EventEntry): string { } .project-card-title { font-size: 0.9rem; - font-weight: 600; + font-weight: 500; color: var(--color-text); text-decoration: none; flex: 1; @@ -799,7 +799,7 @@ function formatUpcomingTime(event: EventEntry): string { .inbox-header h2 { margin: 0; font-size: 0.95rem; - font-weight: 600; + font-weight: 500; display: flex; align-items: center; gap: 0.4rem; @@ -911,7 +911,7 @@ function formatUpcomingTime(event: EventEntry): string { } .upcoming-event-title { font-size: 0.85rem; - font-weight: 600; + font-weight: 500; color: var(--color-text); white-space: nowrap; overflow: hidden;