/* Al Tamam brand layer: matches https://altamamff.ae
   Navy #0B1B2B, fire red #D8232A, gold #C9A227, Poppins headings + Inter text.
   Loaded after style.css; only overrides colours, fonts and the banner. */
:root {
  --accent: #D8232A;
  --navy: #0B1B2B;
  --navy-2: #16202C;
  --gold: #C9A227;
  --bg: #f4f5f7;
  --text: #16202c;
  --muted: #5f6b7a;
  --line: #e3e7ec;
  --font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --display: Poppins, Inter, "Segoe UI", Arial, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #08131f; --surface: #0f1d2c; --text: #eef0f2; --muted: #9aa6b4; --line: #1d2d3f; }
}

h1, h2 { font-family: var(--display); }
h1 { font-weight: 700; line-height: 1.25; }

/* Banner: navy like the website hero, with a red glow and a gold edge */
.banner {
  background:
    radial-gradient(circle at 90% 0%, rgba(216, 35, 42, .55), transparent 52%),
    radial-gradient(circle at 5% 120%, rgba(201, 162, 39, .22), transparent 45%),
    linear-gradient(135deg, var(--navy), var(--navy-2));
  border-bottom: 3px solid var(--gold);
}

.logo { padding: 6px; }

/* Primary actions in the brand red */
.save { box-shadow: 0 6px 18px rgba(216, 35, 42, .28); }
.action .icon { background: var(--accent); }

/* Certification badges use the website's gold star */
.badge-ic { color: var(--gold); }

@media (min-width: 960px) {
  .banner { height: 128px; }
}

/* Dark mode: the brand red is already bright, so keep it (the template lightens dark colours) */
@media (prefers-color-scheme: dark) {
  .save { background: var(--accent); color: #fff; }
  .action .icon { background: var(--accent); color: #fff; }
  .banner { filter: none; }
}