/* public/styles/global.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* ---------------------------------------------------
   BASE LAYER (GLOBAL)
--------------------------------------------------- */
@layer base {
  :root {
    /* 🔥 MOST STYLISH SYSTEM FONTS (NO DOWNLOADS) */
    --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
      system-ui, sans-serif;
    --font-display: "New York", "Times New Roman", ui-serif, Georgia, serif;

    /* 🌞 LIGHT THEME */
    --background: oklch(97% 0.005 250);
    --foreground: oklch(20% 0.01 250);

    --card: oklch(99% 0.004 250);
    --card-foreground: var(--foreground);

    --primary: oklch(53.323% 0.20718 350.555);
    --primary-foreground: oklch(98% 0.01 255);

    --secondary: oklch(93% 0.01 250);
    --secondary-foreground: var(--foreground);

    --muted: oklch(90% 0.01 250);
    --muted-foreground: oklch(42% 0.012 250);

    --accent: var(--primary);
    --accent-foreground: var(--primary-foreground);

    --border: oklch(82% 0.01 250);
    --input: var(--border);
    --ring: var(--primary);

    --radius: 0.55rem;

    /* Vertical rhythm */
    --rhythm-xs: 0.25rem;
    --rhythm-sm: 0.5rem;
    --rhythm-md: 0.75rem;
    --rhythm-lg: 1.25rem;
    --rhythm-xl: 1.75rem;
  }

  /* 🌙 DARK THEME */
  .dark {
    --background: oklch(0.2 0 0);
    --foreground: oklch(98% 0.01 250);

    --card: oklch(22% 0.01 250);
    --card-foreground: var(--foreground);

    --primary: oklch(70% 0.14 250);
    --primary-foreground: oklch(15% 0.02 250);

    --secondary: oklch(28% 0.01 250);
    --secondary-foreground: var(--foreground);

    --muted: oklch(32% 0.008 250);
    --muted-foreground: oklch(85% 0.01 250);

    --accent: var(--primary);
    --accent-foreground: var(--primary-foreground);

    --border: oklch(35% 0.01 250);
    --input: var(--border);
    --ring: var(--primary);
  }

  html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  /* ---------------------------------------------------
     BODY (Clean, Stylish Sans)
  --------------------------------------------------- */
  body {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 1.06rem;
    line-height: 1.78;
    letter-spacing: 0.002em;
    padding-top: 4rem;
    @apply bg-background text-foreground antialiased;
  }

  /* ---------------------------------------------------
     HEADINGS — MODERN SERIF (Premium)
  --------------------------------------------------- */
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  .brand-logo {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: -0.01em;
    margin-top: 0;
    margin-bottom: var(--rhythm-md);
  }

  h1 {
    font-size: 2.55rem;
    line-height: 1.1;
    font-weight: 800;
  }

  h2 {
    font-size: 2rem;
    line-height: 1.18;
  }

  h3 {
    font-size: 1.55rem;
    line-height: 1.26;
  }

  /* Blog card heading */
  .blog-title {
    font-family: var(--font-display);
    letter-spacing: -0.012em;
    @apply text-[1.38rem] font-semibold leading-snug;
  }

  .blog-meta {
    @apply text-sm text-muted-foreground font-medium;
  }

  /* ---------------------------------------------------
     PROSE (Article content)
  --------------------------------------------------- */
  .prose {
    font-family: var(--font-body);
    font-size: 1.08rem;
    line-height: 1.82;
    letter-spacing: 0.0015em;

    --tw-prose-body: var(--foreground);
    --tw-prose-headings: var(--foreground);
    --tw-prose-links: var(--primary);
    --tw-prose-bold: var(--foreground);
    --tw-prose-quotes: var(--primary);
    --tw-prose-quote-borders: var(--primary);
  }

  :where(.prose) pre {
    margin-top: var(--rhythm-sm) !important;
    margin-bottom: var(--rhythm-md) !important;
  }

  :where(.prose) h1 {
    font-family: var(--font-display);
    font-size: 2.55rem;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: var(--rhythm-md);
  }

  :where(.prose) h2 {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.17;
    margin-top: var(--rhythm-lg);
    margin-bottom: var(--rhythm-sm);
  }

  :where(.prose) h3 {
    font-size: 1.55rem;
    font-weight: 600;
    line-height: 1.26;
    margin-top: var(--rhythm-md);
    margin-bottom: var(--rhythm-sm);
  }

  :where(.prose) hr {
    margin: 1.5rem 0 !important;
    border-color: var(--border);
    opacity: 0.5;
  }

  :where(.prose) h1,
  :where(.prose) h2,
  :where(.prose) h3,
  :where(.prose) h4 {
    scroll-margin-top: 6rem;
  }

  .accordion-content {
    will-change: height, opacity;
  }
}

/* ---------------------------------------------------
   COMPONENTS LAYER
--------------------------------------------------- */
@layer components {
  .breadcrumbs-wrapper {
    max-width: 72rem;
    margin-inline: auto;
    padding-inline: 1rem;
    margin-top: 1.25rem;
  }

  @media (min-width: 640px) {
    .breadcrumbs-wrapper {
      padding-inline: 1.5rem;
      margin-top: 2rem;
    }
  }

  @media (min-width: 1024px) {
    .breadcrumbs-wrapper {
      margin-top: 2.5rem;
    }
  }

  .smooth-card {
    @apply bg-card rounded-xl border border-border shadow-sm
           hover:shadow-lg hover:-translate-y-[3px]
           transition-all duration-300;
  }

  .smooth-image {
    @apply w-full h-48 md:h-56 object-cover rounded-lg;
  }

  .post-row {
    transition: opacity 0.25s ease, transform 0.25s ease;
  }

  .no-scroll {
    overflow: hidden;
  }

  .cmd-inner.is-active {
    background-color: var(--muted);
  }
}

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