webmail-client/frontend/src/index.css

@tailwind base;
@tailwind components;
@tailwind utilities;

/* Lato (SIL OFL) — the UI font. Browsers only fetch the weights/styles actually
   rendered, so declaring the full family is cheap. */
@font-face {
  font-family: "Lato";
  src: url("../fonts/Lato-Thin.ttf") format("truetype");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Lato";
  src: url("../fonts/Lato-ThinItalic.ttf") format("truetype");
  font-weight: 100;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Lato";
  src: url("../fonts/Lato-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Lato";
  src: url("../fonts/Lato-LightItalic.ttf") format("truetype");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Lato";
  src: url("../fonts/Lato-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Lato";
  src: url("../fonts/Lato-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Lato";
  src: url("../fonts/Lato-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Lato";
  src: url("../fonts/Lato-BoldItalic.ttf") format("truetype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Lato";
  src: url("../fonts/Lato-Black.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Lato";
  src: url("../fonts/Lato-BlackItalic.ttf") format("truetype");
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

/* Semantic theme tokens as "R G B" triplets (consumed by tailwind.config.js as
   rgb(var(--x) / <alpha>)). Light is the default; .dark on <html> flips them. */
:root {
  --app-bg: 243 244 246; /* app chrome behind panels */
  --app-surface: 255 255 255; /* panels */
  --app-elevated: 255 255 255; /* popovers, composer */
  --app-border: 229 231 235;
  --app-fg: 24 27 32;
  --app-muted: 107 114 128;
  --app-faint: 156 163 175;
  --app-accent: 37 99 235;
  --app-accent-fg: 255 255 255;
  --app-hover: 243 244 246;
  --app-active: 224 233 254; /* selected row */
  color-scheme: light;
}

:root.dark {
  --app-bg: 27 30 32; /* main background */
  --app-surface: 33 36 39; /* panels (slightly elevated) */
  --app-elevated: 39 42 46; /* popovers, composer */
  --app-border: 58 62 68; /* dark dividers (brighter) */
  --app-fg: 226 228 231;
  --app-muted: 150 156 164;
  --app-faint: 108 114 122;
  --app-accent: 59 130 246;
  --app-accent-fg: 255 255 255;
  --app-hover: 42 46 50;
  --app-active: 44 54 70;
  color-scheme: dark;
}

html,
body,
#root {
  height: 100%;
  margin: 0;
}

body {
  font-family: "Lato", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background-color: rgb(var(--app-bg));
  color: rgb(var(--app-fg));
  -webkit-font-smoothing: antialiased;
}

/* Rich-text compose editor: quoted replies get depth-colored left borders
   (blue → green → amber), matching a Fastmail-style nested quote. */
.wmc-editor {
  line-height: 1.55;
}
.wmc-editor:empty::before {
  content: "";
}
.wmc-editor a {
  color: rgb(var(--app-accent));
  text-decoration: underline;
}
.wmc-editor ul {
  list-style: disc;
  padding-left: 1.4em;
}
.wmc-editor ol {
  list-style: decimal;
  padding-left: 1.4em;
}
.wmc-editor img {
  max-width: 100%;
  height: auto;
}
.wmc-editor blockquote {
  margin: 0.5em 0;
  padding: 0.35em 0.9em;
  border-left: 2px solid #5b7fb9;
  border-radius: 2px;
  background: rgba(120, 140, 170, 0.06);
}
.wmc-editor blockquote blockquote {
  border-left-color: #6a9955;
  background: rgba(120, 160, 120, 0.06);
}
.wmc-editor blockquote blockquote blockquote {
  border-left-color: #c08a4a;
  background: rgba(180, 150, 100, 0.06);
}

/* Thin, unobtrusive scrollbars that match the theme. */
* {
  scrollbar-width: thin;
  scrollbar-color: rgb(var(--app-border)) transparent;
}
*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
*::-webkit-scrollbar-thumb {
  background-color: rgb(var(--app-border));
  border-radius: 6px;
  border: 2px solid transparent;
  background-clip: content-box;
}