@import "tailwindcss";

/* ── one unified typeface across the entire site (overrides every inline monospace/Inter) ── */
*, *::before, *::after { font-family: 'Vazir', system-ui, sans-serif !important; }

/* shadcn-compatible CSS variables (mapped to project palette) */
:root {
  --background: #f3f4f6;
  --foreground: #032340;
  --card: #ffffff;
  --card-foreground: #032340;
  --primary: #CD9E53;
  --primary-foreground: #ffffff;
  --secondary: #e5e7eb;
  --secondary-foreground: #032340;
  --muted: #e5e7eb;
  --muted-foreground: #6b7280;
  --accent: #f5f0e8;
  --accent-foreground: #032340;
  --destructive: #ef4444;
  --destructive-foreground: #ffffff;
  --border: #e2e8f0;
  --input: #e2e8f0;
  --ring: #CD9E53;
}

@theme {
  --animate-border-beam: border-beam calc(var(--duration)*1s) infinite linear;
  /* shadcn-compatible color tokens */
  --color-background:          #f3f4f6;
  --color-foreground:          #032340;
  --color-card:                #ffffff;
  --color-card-foreground:     #032340;
  --color-primary:             #CD9E53;
  --color-primary-foreground:  #ffffff;
  --color-secondary:           #e5e7eb;
  --color-secondary-foreground:#032340;
  --color-muted:               #e5e7eb;
  --color-muted-foreground:    #6b7280;
  --color-accent:              #f5f0e8;
  --color-accent-foreground:   #032340;
  --color-destructive:         #ef4444;
  --color-destructive-foreground:#ffffff;
  --color-border:              #e2e8f0;
  --color-input:               #e2e8f0;
  --color-ring:                #CD9E53;
}
@keyframes border-beam {
  100% { offset-distance: 100%; }
}

@property --beam-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
@keyframes beam-rotate {
  to { --beam-angle: 360deg; }
}
.dock-beam-wrap {
  position: relative;
  border-radius: 30px;
}
.dock-beam-border {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  background: conic-gradient(from var(--beam-angle) at 50% 50%, #CD9E53 0%, transparent 35%, #032340 50%, transparent 65%, #CD9E53 100%);
  animation: beam-rotate 3s linear infinite;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

/* risk matrix: stack scatter + list on narrow screens */
@media (max-width: 860px) {
  .risk-grid { grid-template-columns: 1fr !important; }
  .plants-globe-grid { grid-template-columns: 1fr !important; }
  .gst-grid { grid-template-columns: 1fr !important; }
}

/* ── elegant ambient motion: breathing + blinking ── */
@keyframes breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.06); }
}
@keyframes soft-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}
@keyframes glow-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(205,158,83,0.0); }
  50%      { box-shadow: 0 0 0 4px rgba(205,158,83,0.25); }
}
.breathe     { animation: breathe 3s ease-in-out infinite; transform-origin: center; }
.soft-blink  { animation: soft-blink 1.8s ease-in-out infinite; }
.glow-pulse  { animation: glow-pulse 2.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .breathe, .soft-blink, .glow-pulse { animation: none; }
}

/* ═══════════════════════════════════════════════
   VAZIR FONT FACES
═══════════════════════════════════════════════ */
@font-face {
  font-family: 'Vazir';
  src: url('/fonts/Vazir-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Vazir';
  src: url('/fonts/Vazir-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Vazir';
  src: url('/fonts/Vazir-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Vazir';
  src: url('/fonts/Vazir-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Vazir';
  src: url('/fonts/Vazir-Black.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* ═══════════════════════════════════════════════
   BRAND PALETTE — design-system.md v1.0
   Navy 60% · Blue 25% · White 10% · Gray 4% · Orange 1%
═══════════════════════════════════════════════ */
:root {
  /* Raw brand colors */
  --color-navy:       #032340;
  --color-blue:       #00AEEF;
  --color-white:      #FFFFFF;
  --color-gray-light: #E9EEF5;
  --color-gray-steel: #7C8798;
  --color-orange:     #CD9E53;

  /* Semantic surface tokens */
  --paper:     #FFFFFF;          /* primary surface      */
  --paper-2:   #E9EEF5;          /* secondary surface    */
  --paper-3:   #d5dce8;          /* tertiary surface     */

  /* Semantic text tokens — all navy scale */
  --ink:       #032340;          /* primary text / headings     */
  --ink-2:     #0d2d6b;          /* strong secondary            */
  --ink-3:     #1a3f7a;          /* medium emphasis             */
  --ink-4:     #7C8798;          /* muted / secondary text      */
  --ink-5:     #a0aab4;          /* placeholder / disabled      */
  --ink-6:     #c8d0dc;          /* hairline / subtle           */

  /* Rules */
  --rule-thin: rgba(7,29,73,0.10);

  /* Accent — brand blue replaces red as the primary accent */
  --red:       #00AEEF;          /* accent (named --red for compat) */
  --red-2:     #29bdf2;          /* lighter accent               */

  /* Warning / limited use — 1% max */
  --amber:     #CD9E53;
  --green-ink: #059669;
}

/* ═══════════════════════════════════════════════
   TYPOGRAPHY SYSTEM

   Scale (clamp: mobile → desktop)
   --fs-display  hero headlines        32 → 72px
   --fs-h1       page-level headings   26 → 52px
   --fs-h2       section headings      20 → 38px
   --fs-h3       card/sub headings     15 → 22px
   --fs-h4       small headings        13 → 17px
   --fs-body-lg  lead paragraphs       14 → 16px
   --fs-body     body text             13 → 15px
   --fs-sm       secondary / meta      11 → 13px
   --fs-xs       labels / captions     9  → 11px
═══════════════════════════════════════════════ */
:root {
  /* Font sizes */
  --fs-display:  clamp(32px, 5.5vw, 72px);
  --fs-h1:       clamp(26px, 3.8vw, 52px);
  --fs-h2:       clamp(20px, 2.8vw, 38px);
  --fs-h3:       clamp(15px, 1.5vw, 22px);
  --fs-h4:       clamp(13px, 1.1vw, 17px);
  --fs-body-lg:  clamp(14px, 1.1vw, 16px);
  --fs-body:     clamp(13px, 0.9vw, 15px);
  --fs-sm:       clamp(11px, 0.75vw, 13px);
  --fs-xs:       clamp(9px,  0.6vw,  11px);

  /* Letter spacing (Persian typography uses normal spacing to keep cursive script connected) */
  --ls-display:  normal;
  --ls-h1:       normal;
  --ls-h2:       normal;
  --ls-h3:       normal;
  --ls-body:     normal;
  --ls-label:    normal;
  --ls-overline: normal;
  --ls-widest:   normal;

  /* Line heights (increased for Persian script to prevent accent collisions and overlap) */
  --lh-display:  1.25;
  --lh-heading:  1.3;
  --lh-subhead:  1.4;
  --lh-body:     1.8;
  --lh-relaxed:  1.85;
  --lh-label:    1.4;
}

/* ── Base element styles ────────────────────────
   Inside @layer base so Tailwind utilities (text-white, text-red, etc.)
   in the @utilities layer can override these defaults. */
@layer base {
  h1 {
    font-size:      var(--fs-h1);
    font-weight:    900;
    line-height:    var(--lh-heading);
    letter-spacing: normal;
    color:          var(--ink);
    margin:         0;
  }
  h2 {
    font-size:      var(--fs-h2);
    font-weight:    900;
    line-height:    var(--lh-heading);
    letter-spacing: normal;
    color:          var(--ink);
    margin:         0;
  }
  h3 {
    font-size:      var(--fs-h3);
    font-weight:    700;
    line-height:    var(--lh-subhead);
    letter-spacing: normal;
    color:          var(--ink);
    margin:         0;
  }
  h4 {
    font-size:      var(--fs-h4);
    font-weight:    700;
    line-height:    var(--lh-subhead);
    letter-spacing: normal;
    color:          var(--ink);
    margin:         0;
  }
  p {
    font-size:      var(--fs-body);
    font-weight:    400;
    line-height:    var(--lh-body);
    letter-spacing: normal;
    color:          var(--ink-3);
    margin:         0;
  }
}

/* ═══════════════════════════════════════════════
   BASE
═══════════════════════════════════════════════ */
/* NOTE: must live in @layer base — unlayered, this reset out-prioritises Tailwind's
   @layer utilities and silently kills every margin/padding utility (mb-8, p-6, …). */
@layer base {
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
}

/* McKinsey centered container margins (physical override of standard logical properties) */
.mx-auto {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* scroll-behavior:smooth removed — it fights Lenis JS smoothing. Lenis owns scroll now. */
/* overflow-x: clip (not hidden) — suppresses horizontal scroll WITHOUT making <html>
   a scroll container, which would break the sticky header. */
html { direction: rtl; overflow-x: clip; touch-action: pan-x pan-y; -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

body {
  font-family: 'Vazir', system-ui, sans-serif;
  background: var(--paper);
  color: var(--ink);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: normal;
  /* no overflow-x here — html already clips horizontal overflow; clip on <body>
     breaks position:sticky for the header on mobile (native scroll). */
  -webkit-font-smoothing: antialiased;
}

#root { min-height: 100dvh; display: flex; flex-direction: column; }

::-webkit-scrollbar { width: 3px; height: 3px; }
::-webkit-scrollbar-thumb { background: var(--ink); }

:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}

::selection { background: var(--ink); color: var(--paper); }

/* ═══════════════════════════════════════════════
   TYPOGRAPHY UTILITIES
═══════════════════════════════════════════════ */
/* Overline — small uppercase tracking label */
.t-overline {
  font-size:      var(--fs-xs);
  font-weight:    700;
  letter-spacing: normal;
  text-transform: uppercase;
  line-height:    var(--lh-label);
}

/* Caption / meta text */
.t-caption {
  font-size:   var(--fs-sm);
  font-weight: 500;
  line-height: var(--lh-label);
  color:       var(--ink-4);
}

/* Lead paragraph */
.t-lead {
  font-size:   var(--fs-body-lg);
  font-weight: 400;
  line-height: var(--lh-relaxed);
  color:       var(--ink-3);
}

/* ═══════════════════════════════════════════════
   TICKER ANIMATION (RTL direction)
═══════════════════════════════════════════════ */
@keyframes ticker-rtl {
  0%   { transform: translateX(-50%); }
  100% { transform: translateX(50%); }
}
.ticker-track { animation: ticker-rtl 34s linear infinite; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .ticker-track { animation: none; } }

/* ═══════════════════════════════════════════════
   STAMP TILT
═══════════════════════════════════════════════ */
.stamp-tilt { transform: rotate(-1.5deg); }

/* ═══════════════════════════════════════════════
   INFINITE SCROLL ANIMATION
═══════════════════════════════════════════════ */
@keyframes scroll {
  to { transform: translateX(calc(-50% - 0.5rem)); }
}
.animate-scroll {
  animation: scroll var(--animation-duration, 60s) var(--animation-direction, forwards) linear infinite;
}
.animate-scroll-risk {
  animation: scroll 72s forwards linear infinite;
}
/* ── Global breathing room ───────────────────────────── */
/* Cards, list items, table cells — give them air */
.card, [class*="card"] { padding: 1.5rem !important; }

/* Mobile: breathing room on all content containers */
@media (max-width: 767px) {
  .max-w-7xl,
  .max-w-6xl,
  section > div,
  section > .max-w-7xl {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }
  /* Extra vertical gap between stacked items */
  [class*="grid-cols-1"] > * + * {
    margin-top: 0.5rem;
  }
}

@keyframes riskCardIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .animate-scroll      { animation: none; }
  .animate-scroll-risk { animation: none; }
  [style*="riskCardIn"] { animation: none !important; }
}

/* ═══════════════════════════════════════════════
   MOBILE STACK OVERRIDE
   Inline `style={{ display:'grid', gridTemplateColumns: '...' }}`
   always beats Tailwind `max-md:grid-cols-1`. This utility forces
   any tagged grid container down to single/two columns below 768px,
   regardless of the inline declaration.
═══════════════════════════════════════════════ */
@media (max-width: 767px) {
  .mq-stack {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
  .mq-stack-tight {
    grid-template-columns: 1fr !important;
  }
  .mq-stack-2 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ═══════════════════════════════════════════════
   MARQUEE (horizontal infinite scroll)
═══════════════════════════════════════════════ */
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-100% - var(--gap, 1rem))); }
}
@keyframes marquee-reverse {
  from { transform: translateX(calc(-100% - var(--gap, 1rem))); }
  to   { transform: translateX(0); }
}
.animate-marquee         { animation: marquee         var(--duration, 40s) linear infinite; }
.animate-marquee-reverse { animation: marquee-reverse var(--duration, 40s) linear infinite; }
@media (prefers-reduced-motion: reduce) {
  .animate-marquee,
  .animate-marquee-reverse { animation: none; }
}

/* ═══════════════════════════════════════════════
   RTL ICON MIRROR FIX
   Lucide SVGs that represent directional concepts
   (arrows, chevrons, send, play) should flip in RTL
   so they point the correct way. Non-directional icons
   (phone, mail, pin, star…) must NOT flip.
═══════════════════════════════════════════════ */
[dir="rtl"] svg.lucide-arrow-right,
[dir="rtl"] svg.lucide-arrow-left,
[dir="rtl"] svg.lucide-chevron-right,
[dir="rtl"] svg.lucide-chevron-left,
[dir="rtl"] svg.lucide-send,
[dir="rtl"] svg.lucide-external-link,
[dir="rtl"] svg.lucide-log-in,
[dir="rtl"] svg.lucide-log-out {
  transform: scaleX(-1);
}

/* opt-out: keep an icon pointing exactly as authored, ignoring the RTL mirror */
[dir="rtl"] svg.lucide.no-rtl-flip { transform: none !important; }

/* ═══════════════════════════════════════════════
   PRINT
═══════════════════════════════════════════════ */
@media print { .no-print { display: none !important; } }
