@import "tailwindcss";

@theme {
  --color-brand-primary: #b8c7d1;
  --color-brand-contrast: #070707;
  --color-dark-bg: #070707;
  --color-dark-card: #141414;
  --color-dark-header: #101010;
  --color-dark-sidebar: #111111;
  --color-dark-border: #282828;
  --color-dark-input: #1c1c1c;
  --color-dark-text: #f0f0ee;
  --color-dark-muted: #929292;
  --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

@layer base {
  :root {
    --chart-grid: #222222;
    --chart-axis: #888888;
    --chart-cursor: rgba(255, 255, 255, 0.055);
    --chart-label: #ededed;
    --chart-tooltip-bg: #141414;
    --chart-tooltip-text: #ededed;
    --chart-tooltip-border: transparent;
    --chart-detail-bar: #9ECAE1;
  }

  html[data-theme='offwhite'] {
    --color-brand-primary: #3f535a;
    --color-brand-contrast: #fbf8f1;
    --color-dark-bg: #f3f0e9;
    --color-dark-card: #fbf8f1;
    --color-dark-header: #f0ece4;
    --color-dark-sidebar: #ebe6dc;
    --color-dark-border: #d8d0c3;
    --color-dark-input: #f1ede5;
    --color-dark-text: #242321;
    --color-dark-muted: #6f6a61;
    --chart-grid: rgba(63, 58, 49, 0.14);
    --chart-axis: #756f66;
    --chart-cursor: rgba(63, 58, 49, 0.08);
    --chart-label: #242321;
    --chart-tooltip-bg: #fbf8f1;
    --chart-tooltip-text: #242321;
    --chart-tooltip-border: #d8d0c3;
    --chart-detail-bar: #3f535a;
  }

  body {
    font-family: 'Inter', sans-serif;
    background:
      radial-gradient(circle at 18% -8%, rgba(255, 255, 255, 0.035), transparent 30rem),
      radial-gradient(circle at 88% 4%, rgba(184, 199, 209, 0.025), transparent 34rem),
      #070707;
    @apply text-dark-text;
  }

  html[data-theme='offwhite'] body {
    background:
      radial-gradient(circle at 16% -8%, rgba(255, 255, 255, 0.82), transparent 32rem),
      radial-gradient(circle at 88% 0%, rgba(116, 107, 91, 0.10), transparent 36rem),
      #f3f0e9;
  }
  
  ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }
  
  ::-webkit-scrollbar-thumb {
    background: #333333;
    border-radius: 3px;
  }
}

@layer components {
  .skeleton {
    position: relative;
    overflow: hidden;
    border-radius: 0.75rem;
    background: color-mix(in srgb, var(--color-dark-input) 82%, var(--color-dark-text) 18%);
  }

  .skeleton::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(
      90deg,
      transparent,
      color-mix(in srgb, var(--color-dark-text) 14%, transparent),
      transparent
    );
    animation: skeleton-shimmer 1.45s ease-in-out infinite;
  }

  @keyframes skeleton-shimmer {
    100% {
      transform: translateX(100%);
    }
  }

  .refresh-progress {
    animation: refresh-progress-slide 1.05s ease-in-out infinite;
    box-shadow: 0 0 12px color-mix(in srgb, var(--color-brand-primary) 38%, transparent);
  }

  .refreshing-content {
    opacity: 0.72;
    transition: opacity 180ms ease;
  }

  @keyframes refresh-progress-slide {
    0% {
      transform: translateX(-120%);
    }

    100% {
      transform: translateX(320%);
    }
  }

  .app-shell {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.018), rgba(255, 255, 255, 0) 24rem),
      radial-gradient(circle at 28% -18%, rgba(255, 255, 255, 0.035), transparent 34rem),
      radial-gradient(circle at 88% 8%, rgba(184, 199, 209, 0.024), transparent 38rem),
      #070707;
  }

  html[data-theme='offwhite'] .app-shell {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.52), rgba(255, 255, 255, 0) 24rem),
      radial-gradient(circle at 28% -18%, rgba(255, 255, 255, 0.74), transparent 34rem),
      radial-gradient(circle at 88% 8%, rgba(116, 107, 91, 0.10), transparent 38rem),
      #f3f0e9;
  }

  .app-content {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.012), rgba(255, 255, 255, 0) 16rem),
      transparent;
  }

  html[data-theme='offwhite'] .app-content {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0) 16rem),
      transparent;
  }
}