Moku/src/app.css

@import '$lib/components/settings/Settings.css';
@import '$lib/styles/themes.css';

:root {
  --bg-void:      #080808;
  --bg-base:      #0c0c0c;
  --bg-surface:   #101010;
  --bg-raised:    #151515;
  --bg-overlay:   #1a1a1a;
  --bg-subtle:    #202020;

  --border-dim:    #1c1c1c;
  --border-base:   #242424;
  --border-strong: #2e2e2e;
  --border-focus:  #4a5c4a;

  --text-primary:   #f0efec;
  --text-secondary: #c8c6c0;
  --text-muted:     #8a8880;
  --text-faint:     #4e4d4a;
  --text-disabled:  #2a2a28;

  --accent:        #6b8f6b;
  --accent-dim:    #2a3d2a;
  --accent-muted:  #1a251a;
  --accent-fg:     #a8c4a8;
  --accent-bright: #8fb88f;

  --color-error:    #c47a7a;
  --color-error-bg: #1f1212;
  --color-success:  #7aab7a;
  --color-info:     #7a9ec4;
  --color-info-bg:  #121a1f;
  --color-read:     #2e2e2c;

  --dot-active:   var(--accent);
  --dot-inactive: var(--text-faint);

  --t-fast: 0.08s ease;
  --t-base: 0.14s ease;
  --t-slow: 0.22s ease;

  --radius-sm:   3px;
  --radius-md:   5px;
  --radius-lg:   7px;
  --radius-xl:   10px;
  --radius-2xl:  14px;
  --radius-full: 9999px;

  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;

  --sidebar-width:   52px;
  --titlebar-height: 36px;

  --font-ui:   "DM Mono", "Fira Mono", ui-monospace, monospace;
  --font-sans: "DM Sans", ui-sans-serif, system-ui, sans-serif;

  --text-2xs:  10px;
  --text-xs:   11px;
  --text-sm:   12px;
  --text-base: 13px;
  --text-md:   14px;
  --text-lg:   15px;
  --text-xl:   17px;
  --text-2xl:  20px;
  --text-3xl:  24px;

  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semi:   600;

  --leading-none:  1;
  --leading-tight: 1.3;
  --leading-snug:  1.45;
  --leading-base:  1.6;

  --tracking-tight:  -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.06em;
  --tracking-wider:   0.1em;

  --z-reader:   50;
  --z-modal:    100;
  --z-settings: 150;
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
  overflow: hidden;
  background: var(--bg-void);
  color: var(--text-primary);
}

#svelte {
  height: 100%;
}

button {
  cursor: pointer;
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  padding: 0;
}

input, textarea, select {
  font: inherit;
  color: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

ul, ol { list-style: none; }

img, svg { display: block; max-width: 100%; }

p { margin: 0; }

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--weight-normal);
  line-height: var(--leading-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

* {
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}

*::-webkit-scrollbar         { width: 4px; height: 4px; }
*::-webkit-scrollbar-track   { background: transparent; }
*::-webkit-scrollbar-thumb   { background: transparent; border-radius: 99px; }
*::-webkit-scrollbar-thumb:hover { background: transparent; }

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeDown {
  from { opacity: 0; transform: translateY(-5px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.97); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.35; }
}

@keyframes shimmer {
  from { background-position: -200% 0; }
  to   { background-position:  200% 0; }
}

.anim-fade-in   { animation: fadeIn   0.14s ease both; }
.anim-fade-up   { animation: fadeUp   0.18s ease both; }
.anim-fade-down { animation: fadeDown 0.18s ease both; }
.anim-scale-in  { animation: scaleIn  0.14s ease both; }
.anim-pulse     { animation: pulse    1.6s  ease infinite; }
.anim-spin      { animation: spin     0.7s  linear infinite; }

.skeleton {
  background: linear-gradient(90deg, var(--bg-raised) 25%, var(--bg-overlay) 50%, var(--bg-raised) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s ease infinite;
  border-radius: var(--radius-sm);
}