:root {
  --color-ink: #0d0d0d;
  --color-paper: #ffffff;
  --color-panel: #f1f3f7;
  /* Shared semantic palette. Keep all semantic color uses on these tokens. */
  --color-blue: #60A5FA;
  --color-green: #4ADE80;
  --color-red: #F87171;
  --color-yellow: #FACC15;
  --color-blue-soft: color-mix(in srgb, var(--color-blue) 16%, var(--color-paper));
  --color-green-soft: color-mix(in srgb, var(--color-green) 16%, var(--color-paper));
  --color-red-soft: color-mix(in srgb, var(--color-red) 16%, var(--color-paper));
  --color-brand: var(--color-blue);
  --color-secondary-control: #9aa0aa;
  --color-bottom-control: #b1b6be;
  --color-line: rgba(13, 13, 13, 0.17);
  /* Proven-safe secondary UI color roles. */
  --color-border-strong: #3f4248;
  --color-muted-metadata: #68707b;
  --color-surface-soft: #d9dde4;
  --color-shadow-panel: rgba(13, 13, 13, .16);
  --color-surface-elevated: rgba(255, 255, 255, .94);
  --space: clamp(16px, 4vw, 48px);
  --space-half: calc(var(--space) / 2);
  --panel-radius: clamp(36px, 10vmin, 88px);
  /* One radius family: every rectangular surface descends from the panel. */
  --radius-panel: var(--panel-radius);
  --radius-box: clamp(20px, calc(var(--radius-panel) * .6), 36px);
  --radius-control: clamp(12px, calc(var(--radius-box) * .62), 22px);
  --card-radius: var(--radius-box);
  --panel-safe: clamp(20px, 4vw, 48px);
  /* Shared responsive geometry. x is the panel-to-screen edge gap. */
  --x: var(--panel-safe);
  --layout-x: var(--x);
  --spacing-x: var(--x);
  --layout-major-gap: var(--layout-x);
  --layout-related-gap: calc(var(--layout-x) * .75);
  --layout-compact-gap: calc(var(--layout-x) * .5);
  --layout-content-max: 1280px;
  --layout-gallery-height: clamp(132px, 30dvh, 320px);
  --header-element-size: clamp(16px, 1.45vw, 19px);
  --logo-width: calc(var(--header-element-size) * .743);
  --header-control-size: 24px;
  --header-icon-size: var(--header-element-size);
  /* Shared navigation geometry. */
  --global-navigation-height: calc(var(--homepage-white-card-height) - 8px);
  --navigation-collapsed-line-height: 5px;
  --navigation-control-height: 42px;
  --navigation-control-radius: 22px;
  --navigation-indicator-inset: var(--navigation-collapsed-line-height);
  --contextual-arrow-pill-height: var(--global-navigation-height);
  --contextual-arrow-pill-width: calc(var(--contextual-arrow-pill-height) * 3);
  --contextual-arrow-pill-radius: min(var(--panel-radius), calc(var(--contextual-arrow-pill-height) / 2));
  --navigation-open-duration: .34s;
  --navigation-fade-duration: .18s;
  --navigation-scale-duration: .24s;
  --navigation-close-duration: .18s;
  --navigation-close-stagger-duration: .14s;
  --navigation-open-delay: .14s;
  --navigation-indicator-delay: .1s;
  --current-control-height: var(--navigation-control-height);
  --current-control-radius: var(--navigation-control-radius);
  --bottom-control-line-thickness: var(--navigation-collapsed-line-height);
  --bottom-control-area-height: calc((var(--panel-safe) * 2) + var(--bottom-control-line-thickness));
  --pagination-dot-area-size: var(--bottom-control-line-thickness);
  --previous-page-last-card-height: clamp(24px, 3.5vh, 36px);
  /* Portrait's shared standard rectangle: cards and equivalent controls. */
  --portrait-control-height: clamp(52px, 7.5vh, 76px);
  --homepage-white-card-height: var(--portrait-control-height);
  --portfolio-final-card-bottom-guide-inset: var(--bottom-control-area-height);
  --homepage-standard-card-bottom-inset: var(--portfolio-final-card-bottom-guide-inset);
  --panel-motion: 0.62s cubic-bezier(0.22, 0.61, 0.36, 1);
  --type-label-line-height: 1.4;
  --type-heading-line-height: 1.2;
  --type-heading-arabic-line-height: 1.3;
  --type-body-line-height: 1.5;
  --type-control-line-height: 1.35;
  /* Shared primary content/control text scale. */
  --type-primary-content-size: clamp(10.5px, 1.2vw, 13.5px);
  --type-navigation-micro-size: 9px;
  --font-english: OOXMEEnglish, Arial, sans-serif;
  --font-arabic: OOXMEArabic, Tahoma, sans-serif;
  --ooxme-language-font-scale: 1;
  --ooxme-arabic-font-scale: .9;
}

html[dir="rtl"] { --ooxme-language-font-scale: var(--ooxme-arabic-font-scale); }
.ooxme-language-english { font-family: var(--font-english) !important; direction: ltr; }
.ooxme-language-arabic { font-family: var(--font-arabic) !important; direction: rtl; }

@media (max-aspect-ratio: 4 / 3) {
  :root {
    --navigation-control-height: 38px;
    --navigation-control-radius: 14.5px;
  }
}

@media (min-aspect-ratio: 4 / 3) {
  :root {
    --layout-major-gap: calc(var(--layout-x) * .5);
    --layout-related-gap: calc(var(--layout-x) * .5);
    --layout-compact-gap: calc(var(--layout-x) * .25);
    --layout-gallery-height: clamp(116px, 28dvh, 300px);
    --homepage-white-card-height: clamp(42px, 7dvh, 60px);
  }
}

@font-face {
  font-family: OOXMEEnglish;
  src: url('../assets/fonts/PlusJakartaSans-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: OOXMEArabic;
  src: url('../assets/fonts/TRYToshB-wght-BF677df27a71b87.ttf') format('truetype');
  font-weight: 100 900;
  font-display: swap;
}