@import "tailwindcss";

/* Custom theme configuration for Tailwind v4 */
@theme {
  /* Typography: Plus Jakarta Sans (modern, warm), Estedad for Persian, Instrument Serif for headlines */
  --font-sans: "Plus Jakarta Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-farsi: "Vazirmatn", "Tahoma", system-ui, sans-serif;
  --font-serif: "Instrument Serif", Georgia, "Times New Roman", serif;

  /* Swiss Modular Type Scale (1.25 ratio - Major Third) */
  --text-xs: 0.75rem;     /* 12px */
  --text-sm: 0.875rem;    /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-lg: 1.25rem;     /* 20px */
  --text-xl: 1.563rem;    /* 25px */
  --text-2xl: 1.953rem;   /* 31px */
  --text-3xl: 2.441rem;   /* 39px */
  --text-4xl: 3.052rem;   /* 49px */

  --color-primary: #0f766e;
  --color-brandDark: #111827;
  --color-cream: #faf8f5;

  --animate-marquee: marquee 40s linear infinite;
  --animate-marquee-reverse: marquee-reverse 40s linear infinite;

  @keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
  }

  @keyframes marquee-reverse {
    0% { transform: translateX(-50%); }
    100% { transform: translateX(0); }
  }
}

/* Base styles */
html,
body {
  overflow-x: hidden;
  max-width: 100vw;
}

body {
  background-color: #ffffff;
  color: #111827;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Ensure pointer cursor on all clickable elements */
button,
a,
[role="button"],
input[type="submit"],
input[type="button"],
select,
label[for],
.cursor-pointer {
  cursor: pointer;
}

.font-farsi {
  font-family: "Vazirmatn", "Tahoma", system-ui, sans-serif;
}

/* Farsi overrides - all typography uses Vazirmatn in Persian mode */
.font-farsi .swiss-headline,
.font-farsi .swiss-subhead,
.font-farsi .swiss-body,
.font-farsi .swiss-label,
.font-farsi .swiss-accent,
.font-farsi .swiss-number,
.font-farsi .type-display,
.font-farsi .type-display-italic,
.font-farsi h1,
.font-farsi h2,
.font-farsi h3,
.font-farsi h4,
.font-farsi h5,
.font-farsi h6,
.font-farsi p,
.font-farsi span,
.font-farsi button,
.font-farsi a,
.font-farsi label,
.font-farsi input,
.font-farsi textarea {
  font-family: "Vazirmatn", "Tahoma", system-ui, sans-serif;
}

.font-farsi .swiss-accent {
  font-style: normal;
}

/* Bolder headlines for Farsi - Vazirmatn looks better with more weight */
.font-farsi .swiss-headline,
.font-farsi .type-display,
.font-farsi .type-display-italic,
.font-farsi h1,
.font-farsi h2 {
  font-weight: 600;
}

/* =============================================================================
   SWISS TYPOGRAPHY SYSTEM
   International Typographic Style utilities
   ============================================================================= */

/* Headline: Instrument Serif - elegant, modern editorial */
.swiss-headline {
  font-family: "Instrument Serif", Georgia, serif;
  letter-spacing: -0.01em;
  line-height: 1.25; /* Increased from 1.15 to prevent descender clipping */
  font-weight: 400;
}

/* Subhead: Plus Jakarta Sans with refined tracking */
.swiss-subhead {
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  letter-spacing: 0.01em;
  line-height: 1.35;
  font-weight: 600;
}

/* Body: Plus Jakarta Sans with generous leading for readability */
.swiss-body {
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  letter-spacing: 0.015em; /* Increased from 0.01em for better legibility */
  line-height: 1.7;
  font-weight: 400;
}

/* Label: Uppercase, wide tracking (0.3em), refined */
.swiss-label {
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

/* Accent: Instrument Serif italic for emphasis moments */
.swiss-accent {
  font-family: "Instrument Serif", Georgia, serif;
  font-style: italic;
  letter-spacing: 0.01em;
}

/* Swiss Number: Large decorative numbers */
.swiss-number {
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
}

/* =============================================================================
   DISPLAY TYPOGRAPHY
   Elegant display type for headlines and hero sections
   ============================================================================= */

/* Display type - Instrument Serif for elegant headlines */
.type-display {
  font-family: "Instrument Serif", Georgia, serif;
  letter-spacing: -0.02em;
  line-height: 1.2; /* Increased from 1.1 to prevent descender clipping (g, y, p) */
  font-weight: 400;
}

.type-display-italic {
  font-family: "Instrument Serif", Georgia, serif;
  font-style: italic;
  letter-spacing: 0;
}

/* Custom text selection - Deep Teal bg, Cream text */
::selection {
  background-color: var(--color-primary);
  color: var(--color-cream);
}

::-moz-selection {
  background-color: var(--color-primary);
  color: var(--color-cream);
}

/* =============================================================================
   SWISS GRID SYSTEM
   12-column CSS Grid utilities
   ============================================================================= */

/* Base 12-column grid */
.swiss-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1.5rem;
}

/* Asymmetric layout: 1fr 2fr (signature Swiss style) */
.swiss-asymmetric {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 3rem;
}

@media (max-width: 768px) {
  .swiss-asymmetric {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

/* Container with responsive padding */
.swiss-container {
  max-width: 72rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

@media (min-width: 768px) {
  .swiss-container {
    padding-left: 3rem;
    padding-right: 3rem;
  }
}

/* Swiss Section Spacing */
.swiss-section {
  padding-top: 6rem;
  padding-bottom: 6rem;
}

@media (min-width: 768px) {
  .swiss-section {
    padding-top: 8rem;
    padding-bottom: 8rem;
  }
}

:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 4px;
}

/* Skip link for accessibility */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--color-primary);
  color: white;
  padding: 8px;
  z-index: 100;
  transition: top 0.2s;
}

.skip-link:focus {
  top: 0;
}

/* Hide scrollbar but allow scrolling */
.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Typography utilities */
.text-balance {
  text-wrap: balance;
}

.text-pretty {
  text-wrap: pretty;
}

/* Safe area padding for mobile */
.pb-safe {
  padding-bottom: env(safe-area-inset-bottom, 0);
}

/* Marquee animation - pause on hover */
.marquee-container:hover .animate-marquee,
.marquee-container:hover .animate-marquee-reverse {
  animation-play-state: paused;
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .animate-marquee,
  .animate-marquee-reverse {
    animation: none;
  }
}

/* =============================================================================
   SHADOW SCALE SYSTEM
   Swiss Design - subtle, functional shadows
   ============================================================================= */

.shadow-subtle {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

.shadow-default {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
}

.shadow-elevated {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.shadow-prominent {
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.10);
}

/* =============================================================================
   ANIMATED UNDERLINE UTILITY
   Premium link animation for Swiss design
   ============================================================================= */

.link-underline {
  position: relative;
}

.link-underline::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background: currentColor;
  transition: width 300ms ease-out;
}

.link-underline:hover::after {
  width: 100%;
}

@media (prefers-reduced-motion: reduce) {
  .link-underline::after {
    transition: none;
  }
  .link-underline:hover::after {
    width: 100%;
  }
}

/* =============================================================================
   CSS SPRING FOR HOVER (validated via Motion MCP)
   250ms with snappy spring easing
   ============================================================================= */

.transition-spring {
  transition-timing-function: linear(0, 0.6559, 1.005, 1.0216, 1.0032, 0.9992, 0.9997, 1);
  transition-duration: 250ms;
}

@layer components {
  .btn {
    @apply inline-flex items-center justify-center gap-2 rounded-full font-semibold transition-colors duration-200;
  }

  .btn-primary {
    @apply bg-primary text-white hover:bg-teal-700 shadow-lg shadow-primary/20;
    @apply transition-all duration-300;
    @apply hover:-translate-y-0.5 hover:shadow-xl hover:shadow-primary/30;
  }

  @media (prefers-reduced-motion: reduce) {
    .btn-primary {
      @apply hover:translate-y-0;
    }
  }

  .btn-secondary {
    @apply border border-gray-200 text-brandDark bg-white/80;
    @apply transition-all duration-200;
    @apply hover:border-primary hover:text-primary hover:bg-primary/5;
    @apply hover:shadow-md hover:-translate-y-0.5;
  }

  @media (prefers-reduced-motion: reduce) {
    .btn-secondary {
      @apply hover:translate-y-0 hover:shadow-none;
    }
  }

  .btn-ghost {
    @apply text-brandDark hover:text-primary transition-colors duration-200;
  }

  .btn-link {
    @apply text-primary hover:text-teal-700 transition-colors duration-200;
  }

  .btn-icon {
    @apply p-2 border border-gray-200 text-brandDark bg-white/80;
    @apply transition-all duration-200;
    @apply hover:border-primary hover:text-primary hover:bg-primary/5 hover:shadow-sm;
  }

  .btn-xs {
    @apply text-[10px] uppercase px-3 py-1.5;
    letter-spacing: 0.35em;
  }

  .btn-sm {
    @apply text-sm px-4 py-2;
  }

  .btn-md {
    @apply text-sm md:text-base px-6 py-3;
  }

  .btn-lg {
    @apply text-base md:text-lg px-8 py-4;
  }
}