@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  html {
    @apply scroll-smooth antialiased;
  }

  /* Light — مینیمال و تمیز */
  html:not(.dark) {
    --noro-bg: 250 252 252;
    --noro-surface: 255 255 255;
    --noro-border: 226 232 232;
    --noro-text: 15 20 20;
    --noro-muted: 100 116 116;
    --noro-brand: 57 192 196;
    --noro-brand-hover: 46 179 183;
    --noro-brand-light: 147 224 226;
    --noro-glow-primary: 57 192 196;
    --noro-glow-secondary: 93 206 209;
    --noro-hero-gradient-from: 57 192 196;
    --noro-hero-gradient-via: 93 206 209;
    --noro-hero-gradient-to: 46 179 183;
    --noro-btn-primary-bg: 57 192 196;
    --noro-btn-primary-text: 255 255 255;
    --noro-btn-secondary-bg: 255 255 255;
    --noro-btn-secondary-text: 15 20 20;
    --noro-btn-secondary-border: 226 232 232;
    --noro-accent-btn-bg: 57 192 196;
    --noro-accent-btn-hover: 46 179 183;
    --noro-header-bg: 250 252 252;
    --noro-glass-bg: 255 255 255;
    --noro-glass-opacity: 0.58;
    --noro-glass-border: 255 255 255;
    --noro-glass-border-opacity: 0.72;
    --noro-glass-blur: 24px;
  }

  /* Dark — futuristic & premium */
  html.dark {
    --noro-bg: 5 8 8;
    --noro-surface: 10 14 14;
    --noro-border: 30 41 41;
    --noro-text: 250 252 252;
    --noro-muted: 148 163 163;
    --noro-brand: 57 192 196;
    --noro-brand-hover: 93 206 209;
    --noro-brand-light: 147 224 226;
    --noro-glow-primary: 57 192 196;
    --noro-glow-secondary: 46 179 183;
    --noro-hero-gradient-from: 57 192 196;
    --noro-hero-gradient-via: 147 224 226;
    --noro-hero-gradient-to: 93 206 209;
    --noro-btn-primary-bg: 57 192 196;
    --noro-btn-primary-text: 5 8 8;
    --noro-btn-secondary-bg: 255 255 255;
    --noro-btn-secondary-text: 5 8 8;
    --noro-btn-secondary-border: 255 255 255;
    --noro-accent-btn-bg: 57 192 196;
    --noro-accent-btn-hover: 93 206 209;
    --noro-header-bg: 5 8 8;
    --noro-glass-bg: 255 255 255;
    --noro-glass-opacity: 0.05;
    --noro-glass-border: 255 255 255;
    --noro-glass-border-opacity: 0.09;
    --noro-glass-blur: 24px;
  }

  body {
    @apply bg-noro-bg font-sans text-noro-text transition-[background-color,color] duration-500;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-family: Rokh, Peyda, Tahoma, system-ui, sans-serif;
  }
}

@layer components {
  .font-heading {
    font-family: Rokh, Peyda, Tahoma, system-ui, sans-serif;
  }

  .noro-container {
    @apply mx-auto max-w-6xl px-4 sm:px-6;
  }

  .noro-glass {
    border-color: rgb(var(--noro-glass-border) / var(--noro-glass-border-opacity));
    background-color: rgb(var(--noro-glass-bg) / var(--noro-glass-opacity));
    -webkit-backdrop-filter: blur(var(--noro-glass-blur)) saturate(180%);
    backdrop-filter: blur(var(--noro-glass-blur)) saturate(180%);
  }

  html:not(.dark) .noro-glass {
    box-shadow:
      inset 0 1px 0 0 rgb(255 255 255 / 0.85),
      0 1px 2px rgb(15 20 20 / 0.04);
  }

  html.dark .noro-glass {
    box-shadow: inset 0 1px 0 0 rgb(255 255 255 / 0.07);
  }

  .noro-glass-header {
    @apply noro-glass sticky top-0 z-50 border-b;
  }

  .noro-section {
    @apply py-20 sm:py-28;
  }

  .noro-glow {
    @apply pointer-events-none absolute rounded-full blur-[120px];
  }

  .noro-service-card {
    @apply relative overflow-hidden rounded-2xl border border-noro-border bg-transparent transition duration-300 hover:-translate-y-1 hover:shadow-lg;
  }

  .noro-service-card:hover {
    border-color: rgb(var(--noro-brand) / 0.3);
  }

  html.dark .noro-service-card:hover {
    box-shadow:
      0 10px 15px -3px rgb(0 0 0 / 0.1),
      0 4px 6px -4px rgb(var(--noro-brand) / 0.1);
  }

  .noro-card {
    @apply rounded-2xl border border-noro-border bg-noro-surface transition duration-300;
  }

  .noro-card-hover {
    @apply noro-card hover:-translate-y-1 hover:shadow-lg;
  }

  .noro-card-hover:hover {
    border-color: rgb(var(--noro-brand) / 0.3);
  }

  html.dark .noro-card-hover:hover {
    box-shadow:
      0 10px 15px -3px rgb(0 0 0 / 0.1),
      0 4px 6px -4px rgb(var(--noro-brand) / 0.1);
  }

  .noro-gradient-text {
    @apply bg-gradient-to-l from-[rgb(var(--noro-hero-gradient-from))] via-[rgb(var(--noro-hero-gradient-via))] to-[rgb(var(--noro-hero-gradient-to))] bg-clip-text text-transparent;
  }

  .text-noro-brand {
    color: rgb(var(--noro-brand));
  }

  .bg-noro-brand {
    background-color: rgb(var(--noro-brand));
  }

  .border-noro-brand {
    border-color: rgb(var(--noro-brand));
  }

  .noro-btn-primary {
    @apply inline-flex items-center justify-center rounded-xl bg-[rgb(var(--noro-btn-primary-bg))] px-6 py-3 text-sm font-semibold text-[rgb(var(--noro-btn-primary-text))] transition hover:bg-[rgb(var(--noro-brand-hover))];
  }

  .noro-btn-secondary {
    @apply inline-flex items-center justify-center rounded-xl border border-[rgb(var(--noro-btn-secondary-border))] bg-[rgb(var(--noro-btn-secondary-bg))] px-6 py-3 text-sm font-semibold text-[rgb(var(--noro-btn-secondary-text))] transition hover:opacity-90;
  }

  .blog-article-html h2 {
    @apply pt-4 text-2xl font-bold text-noro-text;
  }

  .blog-article-html h3 {
    @apply pt-2 text-xl font-bold text-noro-text;
  }

  .blog-article-html h4 {
    @apply pt-1 text-lg font-semibold text-noro-text;
  }

  .blog-article-html p {
    @apply my-3 whitespace-pre-line;
  }

  .blog-article-html ul {
    @apply my-4 list-disc space-y-2 pr-6 marker:text-noro-brand;
  }

  .blog-article-html ol {
    @apply my-4 list-decimal space-y-2 pr-6 marker:text-noro-brand;
  }

  .blog-article-html blockquote {
    @apply my-6 border-r-4 border-noro-brand/30 bg-noro-surface/60 px-4 py-3 italic;
  }

  .blog-article-html a {
    @apply text-noro-brand underline decoration-noro-brand/30 underline-offset-2 transition hover:decoration-noro-brand;
  }

  .blog-article-html hr {
    @apply my-8 border-noro-border;
  }

  .blog-article-html img {
    @apply my-6 w-full rounded-2xl border border-noro-border object-cover;
  }

  .blog-article-html figure {
    @apply my-6 overflow-hidden rounded-2xl border border-noro-border bg-noro-surface;
  }

  .blog-article-html figcaption {
    @apply px-4 py-3 text-center text-sm text-noro-muted;
  }
}