:root {
  --color-primary: var(--sr-primary);
  --color-primary-dark: var(--sr-primary-strong);
  --color-primary-hover: var(--sr-primary-strong);
  --color-primary-active: #0f4d5a;
  --color-accent-gold: var(--sr-accent);
  --color-gold-soft: #d99a38;
  --color-icon-tile-bg: color-mix(in srgb, var(--sr-accent) 16%, var(--sr-surface-raised));
  --color-ink: var(--sr-ink);
  --color-text: var(--sr-muted);
  --color-text-muted: color-mix(in srgb, var(--sr-muted) 82%, transparent);
  --color-chip-bg: var(--sr-surface-soft);
  --color-chip-text: var(--sr-ink);
  --color-border: var(--sr-border);
  --color-card: var(--sr-surface-raised);
  --color-hover-bg: var(--sr-surface-soft);
  --radius-card: 16px;
  --radius-panel: var(--sr-radius);
  --shadow-card: 0 1px 3px rgba(21, 69, 76, 0.05);
  --shadow-glass: var(--sr-shadow);
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--sr-primary) 25%, transparent);
  --font-app: var(--sr-font-arabic);
  --surface: color-mix(in srgb, var(--sr-surface-raised) 88%, transparent);
  --page-background: linear-gradient(165deg, var(--sr-surface) 0%, var(--sr-surface-soft) 100%);
  --page-max: var(--sr-shell-width);
}

html[lang='en'] {
  --font-app: var(--sr-font-latin);
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--font-app);
  color: var(--color-text);
  background: var(--page-background);
}

#platform-header,
#platform-footer {
  width: 100%;
  flex: 0 0 auto;
}

#app {
  min-width: 0;
  flex: 1 0 auto;
}

.app-shell {
  min-height: auto;
}

.header-wrap,
.app-shell > footer {
  display: none !important;
}

.app-main {
  width: min(calc(100% - 32px), var(--page-max));
  margin-inline: auto;
}

.home-intro,
.detail-hero {
  border-color: var(--sr-border);
}

.project-card:hover {
  box-shadow: var(--sr-shadow);
}

.sr-site-header,
.sr-site-footer {
  width: 100%;
  margin-inline: 0;
}

.sr-site-footer {
  display: block;
  padding-top: 70px;
  border-top: 0;
  font-size: inherit;
}

.sr-site-footer h3,
.sr-site-footer strong {
  color: #eaf7f7;
}

.sr-site-footer p {
  line-height: 1.7;
}

.sr-site-footer .sr-button--light {
  color: var(--sr-primary-strong);
}

@media (max-width: 768px) {
  .app-main {
    width: min(calc(100% - 20px), var(--page-max));
  }
}

@media print {
  #platform-header,
  #platform-footer {
    display: none !important;
  }
}