/* Custom CSS Variables and Global Overrides for NewsTrp */
:root {
  --radius: 0.875rem;

  --background: oklch(0.985 0.003 250);
  --foreground: oklch(0.14 0.02 256);

  --surface: oklch(1 0 0);
  --surface-hover: oklch(0.965 0.005 250);
  --surface-elevated: oklch(0.99 0.003 250);
  --border-subtle: oklch(0.95 0.005 250);

  --card: oklch(1 0 0);
  --card-foreground: oklch(0.18 0.02 256);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.18 0.02 256);

  /* Primary Blue: #0079FF */
  --primary: oklch(0.62 0.21 257);
  --primary-foreground: oklch(1 0 0);
  --primary-soft: oklch(0.95 0.04 257);

  --secondary: oklch(0.96 0.007 250);
  --secondary-foreground: oklch(0.2 0.02 256);

  /* Secondary Pink: #FF0060 */
  --accent-pink: oklch(0.62 0.26 8);
  --accent-pink-soft: oklch(0.96 0.04 8);

  --muted: oklch(0.965 0.005 250);
  --muted-foreground: oklch(0.42 0.02 256);

  --accent: oklch(0.95 0.04 257);
  --accent-foreground: oklch(0.35 0.15 257);

  --destructive: oklch(0.62 0.26 8);
  --destructive-foreground: oklch(1 0 0);

  --success: oklch(0.68 0.17 155);

  --border: oklch(0.92 0.008 250);
  --input: oklch(0.92 0.008 250);
  --ring: oklch(0.62 0.21 257);
}

/* Dark mode overrides */
.dark {
  --background: oklch(0.14 0.01 250);
  --foreground: oklch(0.98 0.005 250);

  --surface: oklch(0.18 0.015 250);
  --surface-hover: oklch(0.22 0.015 250);
  --surface-elevated: oklch(0.20 0.015 250);
  --border-subtle: oklch(0.23 0.015 250);

  --card: oklch(0.18 0.015 250);
  --card-foreground: oklch(0.98 0.005 250);
  --popover: oklch(0.18 0.015 250);
  --popover-foreground: oklch(0.98 0.005 250);

  --primary: oklch(0.65 0.20 250);
  --primary-soft: oklch(0.22 0.05 250);

  --secondary: oklch(0.22 0.015 250);
  --secondary-foreground: oklch(0.98 0.005 250);

  --accent-pink-soft: oklch(0.22 0.05 8);

  --muted: oklch(0.22 0.015 250);
  --muted-foreground: oklch(0.65 0.01 250);

  --border: oklch(0.24 0.015 250);
  --input: oklch(0.24 0.015 250);
  --ring: oklch(0.65 0.20 250);
}

/* Tailwind Base Styles Overrides */
* {
  border-color: var(--border) !important;
}

body {
  font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
  background-color: var(--background);
  color: var(--foreground);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  overflow-x: clip;
}

h1, h2, h3, h4, .font-display {
  font-family: "Plus Jakarta Sans", "Inter", sans-serif;
  letter-spacing: -0.01em;
}

/* Scrollbar Utility */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Interaction Effects */
.tap-scale {
  transition: transform 150ms ease, background-color 150ms ease;
}
.tap-scale:active {
  transform: scale(0.96);
}

/* Keyframe Animations */
@keyframes page-enter {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes sheet-in {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes drawer-in {
  from { opacity: 0; transform: translateX(-100%); }
  to { opacity: 1; transform: translateX(0); }
}

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

/* Animation utilities */
.animate-page-enter {
  animation: page-enter 280ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.animate-fade-in-up {
  animation: page-enter 220ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.animate-sheet-in {
  animation: sheet-in 240ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.animate-drawer-in {
  animation: drawer-in 260ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Skeleton Loading styles */
.skeleton {
  background-color: var(--muted);
  position: relative;
  overflow: hidden;
  border-radius: 0.75rem;
}
.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  animation: shimmer 1.4s linear infinite;
}
.dark .skeleton::after {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.05), transparent);
}

/* Custom Background Accent Color utilities */
.bg-background { background-color: var(--background); }
.text-foreground { color: var(--foreground); }
.bg-surface { background-color: var(--surface); }
.bg-surface-hover:hover { background-color: var(--surface-hover); }
.bg-surface-elevated { background-color: var(--surface-elevated); }
.bg-primary-soft { background-color: var(--primary-soft); }
.bg-accent-pink-soft { background-color: var(--accent-pink-soft); }
.border-border { border-color: var(--border); }
.text-muted-foreground { color: var(--muted-foreground); }
.bg-muted { background-color: var(--muted); }

/* Color overrides for matching theme */
.text-primary-blue { color: #0079FF; }
.bg-primary-blue { background-color: #0079FF; }
.text-accent-pink { color: #FF0060; }
.bg-accent-pink { background-color: #FF0060; }