Tresjs/docs/app/assets/css/main.css

@import 'tailwindcss';
@import '@nuxt/ui-pro';

@source "../../../content/**/*";

@theme static {
  --font-display: 'Manrope', sans-serif;
  --font-sans: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --breakpoint-3xl: 1920px;
  --ui-pattern-fg: color-mix(in oklab, var(--ui-text) 5%, transparent);
  --ui-pattern-bg: repeating-linear-gradient(
    315deg,
    var(--ui-pattern-fg) 0,
    var(--ui-pattern-fg) 1px,
    transparent 0,
    transparent 50%
  );
  --ui-pattern-dot-fg: color-mix(in oklab, oklch(0.18 0.04 266.75) 5%, transparent);
  --ui-pattern-dot-bg: radial-gradient(var(--ui-pattern-dot-fg) 1px, transparent 0);
  --ui-header-height: 3rem;
  /* Technical blueprint styles */
  --ui-line-gap: 5px;
  --ui-line-width: 1px;
  --ui-line-offset: 172px;
  --ui-line-color: var(--color-gray-200);

  /* Teal Palette */
  --color-teal-50: #f2fbf8;
  --color-teal-100: #d3f4ea;
  --color-teal-200: #a6e9d6;
  --color-teal-300: #82dbc5;
  --color-teal-400: #44bda2;
  --color-teal-500: #2ba189;
  --color-teal-600: #20816f;
  --color-teal-700: #1d685b;
  --color-teal-800: #1c534b;
  --color-teal-900: #1b463f;
  --color-teal-950: #0a2925;

  /* Yellow/Brown Palette */
  --color-yellow-50: #fff8eb;
  --color-yellow-100: #feeac7;
  --color-yellow-200: #fdd48a;
  --color-yellow-300: #fbb03b;
  --color-yellow-400: #fa9e25;
  --color-yellow-500: #f47a0c;
  --color-yellow-600: #b85607;
  --color-yellow-700: #b3390a;
  --color-yellow-800: #922b0e;
  --color-yellow-900: #78250f;
  --color-yellow-950: #451003;
}

.dark {
  --ui-line-color: var(--color-gray-800);
  --ui-pattern-dot-fg: color-mix(in oklab, var(--color-gray-200) 5%, transparent);
}

.pattern-bg {
  background-image: var(--ui-pattern-bg);
  background-size: 10px 10px;
  background-attachment: fixed;
}

.pattern-dot-bg {
  background-image: var(--ui-pattern-dot-bg);
  background-size: 10px 10px;
  background-attachment: fixed;
}