/**
 * Cynsera Design System — 3-Tier DTCG CSS Variables & Bilingual (LTR/RTL) UI Refinements
 * Generated from tokens/design-tokens.json & DESIGN.md
 */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
  /* Layer 1: Primitive Tokens */
  --cyn-cyan-400: #00E5FF;
  --cyn-cyan-500: #00B8D4;
  --cyn-cyan-600: #0284C7;
  --cyn-cyan-700: #0369A1;
  --cyn-indigo-500: #6366F1;
  --cyn-indigo-600: #4F46E5;
  --cyn-indigo-700: #4338CA;
  --cyn-emerald-500: #10B981;
  --cyn-slate-50: #F8FAFC;
  --cyn-slate-100: #F1F5F9;
  --cyn-slate-200: #E2E8F0;
  --cyn-slate-600: #475569;
  --cyn-slate-800: #1E293B;
  --cyn-slate-900: #0F172A;
  --cyn-slate-950: #0B0F19;
  --cyn-white: #FFFFFF;

  /* Layer 2: Semantic Tokens */
  --color-primary: var(--cyn-cyan-600);
  --color-primary-hover: var(--cyn-cyan-700);
  --color-primary-highlight: var(--cyn-cyan-400);
  --color-secondary: var(--cyn-indigo-600);
  --color-accent: var(--cyn-cyan-500);
  --color-success: var(--cyn-emerald-500);
  --color-background: var(--cyn-slate-50);
  --color-foreground: var(--cyn-slate-900);
  --color-card: var(--cyn-white);
  --color-muted-foreground: var(--cyn-slate-600);
  --color-border: var(--cyn-slate-200);
  --color-surface-dark: var(--cyn-slate-950);

  /* Layer 3: Theme & Component Mappings (Overriding Legacy Template Defaults) */
  --tp-theme-primary: #0284C7 !important;
  --tp-common-red: #4F46E5 !important;
  --tp-common-red-2: #0284C7 !important;
  --tp-common-red-3: #0284C7 !important;
  --tp-common-yellow-green: #00E5FF !important;
  --tp-common-green-light: #00E5FF !important;
  --tp-common-green-regular: #00B8D4 !important;
  --tp-theme-green: #00B8D4 !important;
  --tp-theme-pink: #6366F1 !important;
  --tp-common-blue: #4F46E5 !important;
  --tp-theme-shop: #0B0F19 !important;
  --tp-common-brown: #0F172A !important;
  --tp-ff-heading: 'Plus Jakarta Sans', 'Inter', sans-serif;
  --tp-ff-body: 'Inter', 'Plus Jakarta Sans', sans-serif;
}

/* RTL Arabic Typography & Layout Refinements */
html[dir="rtl"],
html[lang="ar"] body {
  --tp-ff-heading: 'Cairo', 'Plus Jakarta Sans', sans-serif !important;
  --tp-ff-body: 'Cairo', 'Inter', sans-serif !important;
  --tp-ff-p: 'Cairo', 'Inter', sans-serif !important;
  --tp-ff-inter: 'Cairo', 'Inter', sans-serif !important;
  --tp-ff-grotesk: 'Cairo', 'Space Grotesk', sans-serif !important;
  --tp-ff-clash-regular: 'Cairo', sans-serif !important;
  --tp-ff-clash-medium: 'Cairo', sans-serif !important;
  --tp-ff-clash-semibold: 'Cairo', sans-serif !important;
  --tp-ff-clash-bold: 'Cairo', sans-serif !important;
  --tp-ff-teko: 'Cairo', sans-serif !important;
  --tp-ff-mango: 'Cairo', sans-serif !important;
  --tp-ff-mango-medium: 'Cairo', sans-serif !important;
  --tp-ff-mango-semibold: 'Cairo', sans-serif !important;
  --tp-ff-mango-bold: 'Cairo', sans-serif !important;
  font-family: 'Cairo', 'Inter', sans-serif !important;
}

html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] h4,
html[dir="rtl"] h5,
html[dir="rtl"] h6,
html[dir="rtl"] p,
html[dir="rtl"] a,
html[dir="rtl"] span,
html[dir="rtl"] li,
html[dir="rtl"] button,
html[dir="rtl"] input,
html[dir="rtl"] textarea {
  font-family: 'Cairo', 'Inter', sans-serif;
  letter-spacing: 0 !important;
}

/* Prevent oversized Teko/Mango display headings from clipping in Arabic Cairo script */
html[dir="rtl"] .tp-hero-title,
html[dir="rtl"] .tp-hero-5-title {
  font-size: clamp(2.35rem, 5.2vw, 4.5rem) !important;
  line-height: 1.28 !important;
  letter-spacing: 0 !important;
  word-break: keep-all;
}

html[dir="rtl"] .tp-section-title-5,
html[dir="rtl"] .ar-hero-title,
html[dir="rtl"] .tp-footer-2-big-title {
  font-size: clamp(2rem, 4.4vw, 3.75rem) !important;
  line-height: 1.3 !important;
  letter-spacing: 0 !important;
}

/* Accessible Focus States & Reduced Motion Compliance (/ui-ux-pro-max) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--cyn-cyan-600);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}