style.css

/* Material 3 Expressive — Dark Theme Tokens for Clarity1 */
:root {
  --brand-primary: #6750A4;       /* Material 3 Tonal Primary ( expressive purple ) */
  --brand-on-primary: #FFFFFF;
  --brand-secondary: #625B71;     /* Material 3 Tonal Secondary ( expressive neutral ) */
  --brand-on-secondary: #FFFFFF;
  --brand-tertiary: #7D5260;

  /* Surfaces */
  --md-sys-color-surface: #1B1B1F;
  --md-sys-color-surface-variant: #2B2B31;
  --md-sys-color-surface-container-low: #202026;
  --md-sys-color-surface-container-high: #292931;

  /* Text */
  --md-sys-color-on-surface: #E3E1E6;
  --md-sys-color-on-surface-variant: #C8C5D0;
  --md-sys-color-outline: #56565E;
  --md-sys-color-outline-variant: #696973;

  /* Special */
  --md-sys-color-error: #B3261E;
  --md-sys-color-on-error: #FFFFFF;
  --md-sys-color-scrim: #000000;
  --md-sys-color-inverse-surface: #E6E0E9;
  --md-sys-color-inverse-on-surface: #1B1B1F;
}

html.dark {
  color-scheme: dark;
}

body {
  background: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
}

.bg-surface { background-color: var(--md-sys-color-surface); }
.bg-surfaceVariant { background-color: var(--md-sys-color-surface-variant); }
.bg-surface-container-low { background-color: var(--md-sys-color-surface-container-low); }
.bg-surface-container-high { background-color: var(--md-sys-color-surface-container-high); }

.bg-primary { background-color: var(--brand-primary); }
.bg-onPrimary { color: var(--brand-on-primary); }
.text-onPrimary { color: var(--brand-on-primary); }

.bg-secondary { background-color: var(--brand-secondary); }
.text-onSecondary { color: var(--brand-on-secondary); }

.bg-error { background-color: var(--md-sys-color-error); }
.text-onError { color: var(--md-sys-color-on-error); }

.text-onSurface { color: var(--md-sys-color-on-surface); }
.text-onSurfaceVariant { color: var(--md-sys-color-on-surface-variant); }

.border-outlineVariant { border-color: var(--md-sys-color-outline-variant); }
.ring-outlineVariant\/40 { --tw-ring-color: color-mix(in srgb, var(--md-sys-color-outline-variant) 40%, transparent); }
.ring-outlineVariant\/20 { --tw-ring-color: color-mix(in srgb, var(--md-sys-color-outline-variant) 20%, transparent); }

.bg-scrim { background-color: var(--md-sys-color-scrim); }

.text-error { color: var(--md-sys-color-error); }

/* Scrollbars */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--md-sys-color-outline) transparent;
}
*::-webkit-scrollbar { height: 8px; width: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background-color: var(--md-sys-color-outline);
  border-radius: 9999px;
}
*::-webkit-scrollbar-thumb:hover {
  background-color: var(--md-sys-color-outline-variant);
}

/* Elevation-like surfaces for expressive flair */
.card {
  border-radius: 1.25rem;
  background: var(--md-sys-color-surface);
  border: 1px solid var(--md-sys-color-outline-variant);
  box-shadow: 0 8px 24px rgba(0,0,0,0.28);
}

/* Prose tweaks for readability in dark mode */
.prose :where(a, strong, em, code, pre, blockquote) { color: inherit; }
.prose :where(h1, h2, h3, h4) { color: var(--md-sys-color-on-surface); }

/* Animations */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.animate-fadeUp {
  animation: fadeUp 240ms ease;
}

/* Focus rings for accessibility */
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--brand-primary);
}