/* Lato (Static weights for exact rendering) */
@font-face {
  font-family: 'Lato';
  src: url('./fonts/lato-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Lato';
  src: url('./fonts/lato-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Lato';
  src: url('./fonts/lato-400-italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Lato';
  src: url('./fonts/lato-700-italic.woff2') format('woff2');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* EB Garamond (Full Variable) */
@font-face {
  font-family: 'EB Garamond';
  src: url('./fonts/eb-garamond-var.woff2') format('woff2');
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'EB Garamond';
  src: url('./fonts/eb-garamond-var-italic.woff2') format('woff2');
  font-weight: 400 800;
  font-style: italic;
  font-display: swap;
}

/* Fira Code (Static weights for exact rendering) */
@font-face {
  font-family: 'Fira Code';
  src: url('./fonts/fira-code-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Fira Code';
  src: url('./fonts/fira-code-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Fira Code';
  src: url('./fonts/fira-code-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@import 'tailwindcss';
@import 'tw-animate-css';

@custom-variant dark (&:where(.dark, .dark *));

@theme {
  --font-sans: 'Lato', sans-serif;
  --font-serif: 'EB Garamond', serif;
  --font-mono: 'Fira Code', monospace;
}

@theme {
  --rb-color-red-50: #fef4f2;
  --rb-color-red-100: #ffe7e1;
  --rb-color-red-200: #ffd2c8;
  --rb-color-red-300: #ffb4a3;
  --rb-color-red-400: #fd876c;
  --rb-color-red-500: #f5603e;
  --rb-color-red-600: #e24420;
  --rb-color-red-700: #be3617;
  --rb-color-red-800: #9d3017;
  --rb-color-red-900: #822d1a;
  --rb-color-red-950: #471408;

  --rb-color-orange-50: #fff8ed;
  --rb-color-orange-100: #ffefd5;
  --rb-color-orange-200: #fedbaa;
  --rb-color-orange-300: #fdc175;
  --rb-color-orange-400: #fb9b3c;
  --rb-color-orange-500: #f97e16;
  --rb-color-orange-600: #ea630c;
  --rb-color-orange-700: #c24a0c;
  --rb-color-orange-800: #9a3b12;
  --rb-color-orange-900: #7c3212;
  --rb-color-orange-950: #431707;

  --rb-color-yellow-50: #fefde8;
  --rb-color-yellow-100: #fefdc3;
  --rb-color-yellow-200: #fef9a3;
  --rb-color-yellow-300: #fdec47;
  --rb-color-yellow-400: #f9db16;
  --rb-color-yellow-500: #e9c209;
  --rb-color-yellow-600: #ca9704;
  --rb-color-yellow-700: #a16c07;
  --rb-color-yellow-800: #85550e;
  --rb-color-yellow-900: #714512;
  --rb-color-yellow-950: #422406;

  --rb-color-green-50: #f8faeb;
  --rb-color-green-100: #edf4d3;
  --rb-color-green-200: #ddebab;
  --rb-color-green-300: #c4dc7a;
  --rb-color-green-400: #b6d167;
  --rb-color-green-500: #8daf33;
  --rb-color-green-600: #6e8b25;
  --rb-color-green-700: #546b20;
  --rb-color-green-800: #44551f;
  --rb-color-green-900: #3a491e;
  --rb-color-green-950: #1e280b;

  --rb-color-cyan-50: #effbfc;
  --rb-color-cyan-100: #d7f2f6;
  --rb-color-cyan-200: #b4e6ed;
  --rb-color-cyan-300: #81d3e0;
  --rb-color-cyan-400: #45b6cb;
  --rb-color-cyan-500: #2a9ab0;
  --rb-color-cyan-600: #257d95;
  --rb-color-cyan-700: #24657a;
  --rb-color-cyan-800: #265464;
  --rb-color-cyan-900: #234756;
  --rb-color-cyan-950: #122e3a;

  --rb-color-blue-50: #eff5ff;
  --rb-color-blue-100: #dbe8fe;
  --rb-color-blue-200: #bfd8fe;
  --rb-color-blue-300: #a2c9fe;
  --rb-color-blue-400: #5f9efb;
  --rb-color-blue-500: #3a79f7;
  --rb-color-blue-600: #2358ed;
  --rb-color-blue-700: #1c44d9;
  --rb-color-blue-800: #1d38b0;
  --rb-color-blue-900: #1d358b;
  --rb-color-blue-950: #172254;

  --rb-color-violet-50: #eef0ff;
  --rb-color-violet-100: #dfe3ff;
  --rb-color-violet-200: #bdc2ff;
  --rb-color-violet-300: #a3a8fe;
  --rb-color-violet-400: #837ffa;
  --rb-color-violet-500: #6e60f4;
  --rb-color-violet-600: #6043e8;
  --rb-color-violet-700: #5435cd;
  --rb-color-violet-800: #442ea5;
  --rb-color-violet-900: #3b2c83;
  --rb-color-violet-950: #231a4c;

  --rb-color-neutral-50: #f6f6f6;
  --rb-color-neutral-100: #e7e7e7;
  --rb-color-neutral-200: #d1d1d1;
  --rb-color-neutral-300: #b0b0b0;
  --rb-color-neutral-400: #888888;
  --rb-color-neutral-500: #737373;
  --rb-color-neutral-600: #5d5d5d;
  --rb-color-neutral-700: #4f4f4f;
  --rb-color-neutral-800: #454545;
  --rb-color-neutral-900: #3d3d3d;
  --rb-color-neutral-950: #262626;
}

:root {
  /* Core palette */
  --rb-base: var(--rb-color-neutral-50);
  --rb-background: var(--rb-base);
  --rb-outline: var(--rb-color-neutral-500);
  --rb-input: var(--rb-color-neutral-800);
  --rb-text: var(--rb-color-neutral-950);
  --rb-ring: var(--rb-color-cyan-700);

  /* Container */
  --rb-container-base: var(--rb-color-neutral-50);
  --rb-container-text: var(--rb-color-neutral-950);

  /* Semantic */
  --rb-primary-base: var(--rb-color-cyan-200);
  --rb-primary-text: var(--rb-color-cyan-950);
  --rb-secondary-base: var(--rb-color-green-200);
  --rb-secondary-text: var(--rb-color-green-950);
  --rb-tertiary-base: var(--rb-color-violet-200);
  --rb-tertiary-text: var(--rb-color-violet-950);
  --rb-error-base: var(--rb-color-red-200);
  --rb-error-text: var(--rb-color-red-950);
  --rb-muted-base: var(--rb-color-neutral-300);
  --rb-muted-text: var(--rb-color-neutral-600);

  /* Charts */
  --rb-chart-1: var(--rb-color-blue-500);
  --rb--chart-2: var(--rb-color-green-500);
  --rb-chart-3: var(--rb-color-yellow-500);
  --rb-chart-4: var(--rb-color-orange-500);
  --rb-chart-5: var(--rb-color-red-500);
}

.dark {
  /* Core palette flips */
  --rb-base: var(--rb-color-neutral-950);
  --rb-background: var(--rb-base);
  --rb-text: var(--rb-color-neutral-50);
  --rb-outline: var(--rb-color-neutral-500);
  --rb-input: var(--rb-color-neutral-300);
  --rb-ring: var(--rb-color-cyan-300);

  /* Container */
  --rb-container-base: var(--rb-color-neutral-950);
  --rb-container-text: var(--rb-color-neutral-50);

  /* Semantic */
  --rb-primary-base: var(--rb-color-cyan-800);
  --rb-primary-text: var(--rb-color-cyan-50);
  --rb-secondary-base: var(--rb-color-green-800);
  --rb-secondary-text: var(--rb-color-green-50);
  --rb-tertiary-base: var(--rb-color-violet-800);
  --rb-tertiary-text: var(--rb-color-violet-50);
  --rb-error-base: var(--rb-color-red-800);
  --rb-error-text: var(--rb-color-red-50);
  --rb-muted-base: var(--rb-color-neutral-600);
  --rb-muted-text: var(--rb-color-neutral-100);

  /* Charts */
  --rb-chart-1: var(--rb-color-blue-400);
  --rb-chart-2: var(--rb-color-green-400);
  --rb-chart-3: var(--rb-color-yellow-400);
  --rb-chart-4: var(--rb-color-orange-400);
  --rb-chart-5: var(--rb-color-red-400);
}

@layer base {
  body {
    background-color: var(--rb-base);
    color: var(--rb-text);
  }
}

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

@layer utilities {
  .animate-shimmer {
    background: linear-gradient(
      90deg,
      var(--rb-color-neutral-100) 25%,
      var(--rb-color-neutral-200) 50%,
      var(--rb-color-neutral-100) 75%
    );
    background-size: 200% 100%;
    animation: shimmer 2s infinite linear;
  }

  .dark .animate-shimmer {
    background: linear-gradient(
      90deg,
      var(--rb-color-neutral-800) 25%,
      var(--rb-color-neutral-700) 50%,
      var(--rb-color-neutral-800) 75%
    );
    background-size: 200% 100%;
  }
}