garage-ui/frontend/src/index.css

@import 'tailwindcss';

@font-face {
  font-family: 'Geist Sans';
  src: url('/fonts/geist-sans-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Geist Sans';
  src: url('/fonts/geist-sans-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Geist Sans';
  src: url('/fonts/geist-sans-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Geist Mono';
  src: url('/fonts/geist-mono-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Geist Mono';
  src: url('/fonts/geist-mono-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@layer base {
  :root {
    --background: #faf7f2;
    --foreground: #1c1917;
    --card: #fffdf9;
    --card-foreground: #1c1917;
    --popover: #fffdf9;
    --popover-foreground: #1c1917;
    --primary: #ff9447;
    --primary-foreground: #ffffff;
    --secondary: #f3efe8;
    --secondary-foreground: #1c1917;
    --muted: #f3efe8;
    --muted-foreground: #78716c;
    --accent: #f3efe8;
    --accent-foreground: #1c1917;
    --destructive: #ef4444;
    --destructive-foreground: #ffffff;
    --border: #e7e2d8;
    --input: #e7e2d8;
    --ring: #ff9447;
    --radius: 0.5rem;

    --accent-primary-soft: rgba(255, 148, 71, 0.10);
    --accent-primary-border: rgba(255, 148, 71, 0.22);
    --danger-soft: rgba(239, 68, 68, 0.10);
    --danger-border: rgba(239, 68, 68, 0.28);
    --success-soft: rgba(34, 197, 94, 0.10);
    --surface-sunken: rgba(120, 90, 40, 0.05);

    --chart-blue: #1f77b4;
    --chart-orange: #ff7f0e;
    --chart-green: #2ca02c;
    --chart-red: #d62728;
    --chart-purple: #9467bd;
    --chart-brown: #8c564b;
    --chart-pink: #e377c2;
    --chart-gray: #7f7f7f;
    --chart-olive: #bcbd22;
    --chart-cyan: #17becf;
  }

  .dark {
    --background: #1a1d29;
    --foreground: #e8eaed;
    --card: #252834;
    --card-foreground: #e8eaed;
    --popover: #2d3142;
    --popover-foreground: #e8eaed;
    --primary: #ff9447;
    --primary-foreground: #1a1d29;
    --secondary: #3a3f52;
    --secondary-foreground: #e8eaed;
    --muted: #4a5064;
    --muted-foreground: #a0a4b8;
    --accent: #3a3f52;
    --accent-foreground: #e8eaed;
    --destructive: #ef5350;
    --destructive-foreground: #1a1d29;
    --border: #3a3f52;
    --input: #3a3f52;
    --ring: #ff9447;

    --accent-primary-soft: rgba(255, 148, 71, 0.12);
    --accent-primary-border: rgba(255, 148, 71, 0.22);
    --danger-soft: rgba(239, 83, 80, 0.14);
    --danger-border: rgba(239, 83, 80, 0.32);
    --success-soft: rgba(115, 191, 105, 0.10);
    --surface-sunken: rgba(0, 0, 0, 0.18);

    --chart-blue: #3eb0ff;
    --chart-orange: #ff9830;
    --chart-green: #73bf69;
    --chart-red: #f2495c;
    --chart-purple: #b581d8;
    --chart-brown: #c4a2e0;
    --chart-pink: #ff9d96;
    --chart-gray: #9ba3af;
    --chart-olive: #fac858;
    --chart-cyan: #37b7c3;
  }

  * {
    border-color: var(--border);
  }

  html {
    font-family: 'Geist Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
  }

  body {
    background-color: var(--background);
    color: var(--foreground);
    font-feature-settings: 'rlig' 1, 'calt' 1, 'ss01' 1;
  }

  code, pre, kbd, samp, .font-mono {
    font-family: 'Geist Mono', ui-monospace, 'SF Mono', 'Menlo', Consolas, monospace;
  }
}

@layer utilities {
  .scrollbar-thin::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }

  .scrollbar-thin::-webkit-scrollbar-track {
    background: transparent;
  }

  .scrollbar-thin::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--muted-foreground) 20%, transparent);
    border-radius: 0.375rem;
  }

  .scrollbar-thin::-webkit-scrollbar-thumb:hover {
    background: color-mix(in srgb, var(--muted-foreground) 30%, transparent);
  }
}

/* Syntax highlighting tokens for the object preview. The dark overrides ride
   the same root class the theme provider toggles. */
.hljs-comment,
.hljs-quote {
  color: #6a737d;
}
.hljs-keyword,
.hljs-selector-tag,
.hljs-subst {
  color: #d73a49;
}
.hljs-number,
.hljs-literal,
.hljs-variable,
.hljs-template-variable {
  color: #005cc5;
}
.hljs-string,
.hljs-doctag,
.hljs-regexp {
  color: #032f62;
}
.hljs-title,
.hljs-section,
.hljs-name {
  color: #6f42c1;
}
.hljs-attr,
.hljs-attribute,
.hljs-built_in {
  color: #005cc5;
}
.hljs-meta,
.hljs-selector-id,
.hljs-selector-class {
  color: #e36209;
}

.dark .hljs-comment,
.dark .hljs-quote {
  color: #8b949e;
}
.dark .hljs-keyword,
.dark .hljs-selector-tag,
.dark .hljs-subst {
  color: #ff7b72;
}
.dark .hljs-number,
.dark .hljs-literal,
.dark .hljs-variable,
.dark .hljs-template-variable {
  color: #79c0ff;
}
.dark .hljs-string,
.dark .hljs-doctag,
.dark .hljs-regexp {
  color: #a5d6ff;
}
.dark .hljs-title,
.dark .hljs-section,
.dark .hljs-name {
  color: #d2a8ff;
}
.dark .hljs-attr,
.dark .hljs-attribute,
.dark .hljs-built_in {
  color: #79c0ff;
}
.dark .hljs-meta,
.dark .hljs-selector-id,
.dark .hljs-selector-class {
  color: #ffa657;
}