/* @font-face for Orleen + DINPro lives in brand-fonts.css (also used by standalone pages). */

:root {
  --bg-primary: #FAFAFA;
  --bg-secondary: #F5F5F5;
  --bg-tertiary: #EAEAEA;
  --bg-light: #FAFAFA;
  --bg-card: #FFFFFF;
  --border-subtle: #E5E5E5;
  --border-strong: #D4D4D4;
  --text-primary: #0A0A0A;
  --text-secondary: #3F3F46;
  --text-muted: #71717A;
  /* ACSENDA identity palette (guideline 09-2026) with 80/60/40/20% tones */
  --brand-blue: #004399;
  --brand-blue-80: #3369AD;
  --brand-blue-60: #668EC2;
  --brand-blue-40: #99B4D6;
  --brand-blue-20: #CCD9EB;
  --brand-orange: #F27405;
  --brand-orange-80: #F59037;
  --brand-orange-60: #F7AC69;
  --brand-orange-40: #FAC79B;
  --brand-orange-20: #FCE3CD;
  --brand-cornflower: #8EB9FD;
  --brand-vermilion: #FF513E;
  --brand-canary: #FEF198;
  --font-brand: 'Orleen', 'DINPro', system-ui, -apple-system, 'Segoe UI', Tahoma, sans-serif;

  --accent: #004399;
  --accent-dark: #002A5E;
  --accent-hover: #00367A;
  --accent-pressed: #002F6C;
  --accent-soft: rgba(0,67,153,0.12);
  --accent-soft-border: rgba(0,67,153,0.28);
  --accent-glow: rgba(0,67,153,0.18);
  --accent-light: rgba(0,67,153,0.07);
  --on-accent: #FFFFFF;
  --highlight: #F27405;
  --highlight-soft: rgba(242,116,5,0.12);
  --success: #10B981;
  --warning: #F59E0B;
  --danger: #EF4444;
  --nav-bg: rgba(250,250,250,0.85);
  
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.04);
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.08);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.10);
  --shadow-xl: 0 16px 48px rgba(0,0,0,0.12);
  --shadow-accent: 0 4px 20px rgba(0,67,153,0.25);
  --shadow-accent-lg: 0 8px 32px rgba(0,67,153,0.30);
  
  --gradient-hero: linear-gradient(135deg, #004399 0%, #00367A 50%, #002A5E 100%);
  --gradient-card: linear-gradient(135deg, #FFFFFF 0%, #F5F9FF 100%);
  --gradient-accent-soft: linear-gradient(135deg, rgba(0,67,153,0.12) 0%, rgba(0,54,122,0.08) 100%);
  --gradient-glass: linear-gradient(135deg, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0.65) 100%);
}

[data-theme="dark"] {
  --bg-primary: #0A0A0A;
  --bg-secondary: #141414;
  --bg-tertiary: #1F1F1F;
  --bg-card: #1A1A1A;
  --bg-light: #FAFAFA;
  --border-subtle: #262626;
  --border-strong: #3A3A3A;
  --text-primary: #FFFFFF;
  --text-secondary: #D4D4D8;
  --text-muted: #A1A1AA;
  /* Deep Blue lacks contrast on near-black, so dark surfaces use the second primary (Vivid Orange). */
  --accent: #F27405;
  --accent-dark: #B85503;
  --accent-hover: #D96604;
  --accent-pressed: #B85503;
  --accent-soft: rgba(242,116,5,0.15);
  --accent-soft-border: rgba(242,116,5,0.32);
  --accent-glow: rgba(242,116,5,0.20);
  --accent-light: rgba(242,116,5,0.08);
  --on-accent: #FFFFFF;
  --highlight: #F27405;
  --highlight-soft: rgba(242,116,5,0.15);
  --success: #10B981;
  --warning: #F59E0B;
  --danger: #EF4444;
  --nav-bg: rgba(10,10,10,0.85);
  
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.20);
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.25);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.30);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.35);
  --shadow-xl: 0 16px 48px rgba(0,0,0,0.40);
  --shadow-accent: 0 4px 20px rgba(242,116,5,0.28);
  --shadow-accent-lg: 0 8px 32px rgba(242,116,5,0.32);
  
  --gradient-hero: linear-gradient(135deg, #004399 0%, #00367A 50%, #002A5E 100%);
  --gradient-card: linear-gradient(135deg, #1A1A1A 0%, #141414 100%);
  --gradient-accent-soft: linear-gradient(135deg, rgba(242,116,5,0.15) 0%, rgba(184,85,3,0.10) 100%);
  --gradient-glass: linear-gradient(135deg, rgba(26,26,26,0.90) 0%, rgba(20,20,20,0.70) 100%);
}

html, body,
div, span, applet, object, iframe,
p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
main, menu, nav, output, ruby, section, summary,
time, mark, audio, video,
button, input, textarea, select, option, optgroup,
dialog, meter, progress,
h1, h2, h3, h4, h5, h6,
.font-serif, .font-sans {
  font-family: var(--font-brand) !important;
}

body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color 300ms ease, color 300ms ease;
}

::selection {
  background: var(--brand-orange-40);
  color: #0A0A0A;
}

/* Typographic hierarchy (guideline: Arabic H1 Bold, H2 Medium, body Regular, light text Extra Light;
   English headlines Black/Bold, text Medium/Light). Size + leading + weight come from one place. */
html h1 { font-weight: 700; }
html h2 { font-weight: 500; }
html h3, html h4 { font-weight: 600; }
html h5, html h6 { font-weight: 500; }

.type-display,
.type-h1,
.type-h2,
.type-h3 {
  letter-spacing: 0;
  text-wrap: balance;
}
.type-display { font-size: clamp(2.5rem, 1.6rem + 3.6vw, 5rem); line-height: 1.3; font-weight: 700; }
.type-h1 { font-size: clamp(2.125rem, 1.6rem + 2vw, 3.5rem); line-height: 1.3; font-weight: 700; }
.type-h2 { font-size: clamp(1.75rem, 1.4rem + 1.3vw, 2.5rem); line-height: 1.4; font-weight: 500; }
.type-h3 { font-size: 1.25rem; line-height: 1.5; font-weight: 600; }
.type-lead { font-size: clamp(1rem, 0.95rem + 0.3vw, 1.125rem); line-height: 1.85; font-weight: 400; }
.type-body { font-size: 1rem; line-height: 1.8; font-weight: 400; }
.type-caption { font-size: 0.8125rem; line-height: 1.6; font-weight: 300; }

html[lang="en"] .type-display { line-height: 1.08; font-weight: 900; letter-spacing: -0.01em; }
html[lang="en"] .type-h1 { line-height: 1.12; letter-spacing: -0.005em; }
html[lang="en"] .type-h2 { line-height: 1.2; font-weight: 700; }
html[lang="en"] .type-h3 { line-height: 1.35; font-weight: 700; }
html[lang="en"] h2 { font-weight: 700; }

/* Logo: clear space = X on every side (X = logo height / 8 per the logo structure: 8X mark),
   minimum height 32px (~100px wide) so the Arabic wordmark stays legible. */
.brand-logo {
  --logo-h: 48px;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  line-height: 0;
  padding: calc(var(--logo-h) / 8);
}
.brand-logo__img {
  display: block;
  height: var(--logo-h);
  min-height: 32px;
  width: auto;
  max-width: none;
}
.brand-logo__img--dark { display: none; }
[data-theme="dark"] .brand-logo__img--light { display: none; }
[data-theme="dark"] .brand-logo__img--dark { display: block; }
[data-portal-sidebar][data-collapsed="1"] [data-sidebar-logo] { display: none; }
[data-portal-sidebar][data-collapsed="1"] [data-sidebar-mark] { display: block; }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

.animate-fade-up {
  opacity: 0;
  animation: fadeUp 700ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes fadeInScale {
  from { opacity: 0; transform: scale(0.92); }
  to { opacity: 1; transform: scale(1); }
}

.animate-fade-scale {
  opacity: 0;
  animation: fadeInScale 500ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(40px); }
  to { opacity: 1; transform: translateY(0); }
}

.animate-slide-up {
  opacity: 0;
  animation: slideUp 600ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.animate-shimmer {
  background: linear-gradient(90deg, var(--bg-secondary) 25%, var(--bg-tertiary) 50%, var(--bg-secondary) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
}

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

.animate-marquee {
  animation: marquee 40s linear infinite;
}

.animate-marquee:hover {
  animation-play-state: paused;
}

@keyframes pulse-breathe {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(1.15); }
}

.animate-pulse-breathe {
  animation: pulse-breathe 2s ease-in-out infinite;
}

@keyframes slideInRight {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

.animate-slide-in-right {
  animation: slideInRight 300ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-6px); }
}

.animate-float {
  animation: float 3s ease-in-out infinite;
}

@keyframes glow-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0,67,153,0.4); }
  50% { box-shadow: 0 0 0 12px rgba(0,67,153,0); }
}

.animate-glow-pulse {
  animation: glow-pulse 2s ease-in-out infinite;
}

@keyframes shimmer-light {
  0% { background-position: -1000px 0; }
  100% { background-position: 1000px 0; }
}

.animate-shimmer-light {
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.4) 50%, transparent 100%);
  background-size: 1000px 100%;
  animation: shimmer-light 2s infinite linear;
}

.honeypot-field {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  padding: 0;
  margin: 0;
}

::selection {
  background-color: var(--accent);
  color: var(--on-accent);
}

.custom-scrollbar::-webkit-scrollbar {
  height: 4px;
}
.custom-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
  background: var(--accent);
  border-radius: 999px;
}

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

.card-lift {
  transition: transform 250ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 250ms cubic-bezier(0.16, 1, 0.3, 1);
}
.card-lift:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.card-press {
  transition: transform 150ms ease, box-shadow 150ms ease;
}
.card-press:active {
  transform: scale(0.97);
  box-shadow: var(--shadow-xs);
}

.gradient-text {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover, #00367A) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.glass-card {
  background: var(--gradient-glass);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.2);
}

[data-theme="dark"] .glass-card {
  border: 1px solid rgba(255,255,255,0.08);
}

[data-site-header] {
  height: 72px;
  background: transparent;
  border-color: transparent;
}
[data-site-header].is-scrolled {
  height: 60px;
  background: var(--nav-bg);
  backdrop-filter: blur(20px);
  border-color: var(--border-subtle);
}
/* Home sections: admin-set heading sizes and per-section light/dark bands (intro_home_layout). */
.home-kicker { font-size: calc(var(--home-kicker, 22px) * 0.82); }
@media (min-width: 768px) { .home-kicker { font-size: var(--home-kicker, 22px); } }
.has-title-size .home-title {
  font-size: clamp(calc(var(--home-title) * 0.7), calc(var(--home-title) * 0.5 + 1.2vw), var(--home-title));
}
.sec-tone-light {
  --bg-primary: #FAFAFA;
  --bg-secondary: #F5F5F5;
  --bg-tertiary: #EAEAEA;
  --bg-card: #FFFFFF;
  --border-subtle: #E5E5E5;
  --border-strong: #D4D4D4;
  --text-primary: #0A0A0A;
  --text-secondary: #3F3F46;
  --text-muted: #71717A;
  color: var(--text-primary);
}
.sec-tone-dark {
  --bg-primary: #0A0A0A;
  --bg-secondary: #141414;
  --bg-tertiary: #1F1F1F;
  --bg-card: #1A1A1A;
  --border-subtle: #262626;
  --border-strong: #3A3A3A;
  --text-primary: #FFFFFF;
  --text-secondary: #D4D4D8;
  --text-muted: #A1A1AA;
  color: var(--text-primary);
}