/*
 * MP2G CORPORATE DESIGN SYSTEM
 * Parent brand: luxury navy, gold and white.
 * Edit these variables centrally when brand colours are finalised.
 */

:root {
  /* Parent brand */
  --mp2g-navy: #101B35;
  --mp2g-navy-2: #172A4D;
  --mp2g-gold: #C9A45C;
  --mp2g-gold-light: #E5D2A5;
  --mp2g-white: #FFFFFF;
  --mp2g-ivory: #F7F5F0;

  /* Neutral palette */
  --mp2g-bg: #F7F5F0;
  --mp2g-surface: #FFFFFF;
  --mp2g-text: #172033;
  --mp2g-muted: #64748B;
  --mp2g-border: #E5E1D8;

  /* Temporary vertical accents */
  --vertical-technology: #3478F6;
  --vertical-foundation: #18A77B;
  --vertical-media: #9B59B6;
  --vertical-emart: #E99A2B;
  --vertical-fintech: #159CA6;
  --vertical-law: #B38B43;
  --vertical-transports: #E45B48;

  /* Typography */
  --font-heading: "Manrope", sans-serif;
  --font-body: "Inter", sans-serif;

  /* Layout */
  --container-width: 1240px;
  --section-space: 100px;
  --card-radius: 18px;
  --button-radius: 12px;

  /* Gradients */
  --gradient-primary: linear-gradient(120deg, #101B35, #172A4D);
  --gradient-gold: linear-gradient(120deg, #B38B43, #E5D2A5);
  --gradient-hero:
    radial-gradient(circle at 15% 20%, rgba(201,164,92,.20), transparent 42%),
    radial-gradient(circle at 85% 80%, rgba(52,120,246,.16), transparent 42%),
    #101B35;

  color-scheme: light;
}

/* Dark theme tokens. Theme switching is wired in Phase 4. */
html[data-theme="dark"] {
  --mp2g-bg: #0B1220;
  --mp2g-surface: #151F31;
  --mp2g-text: #F1F5F9;
  --mp2g-muted: #A6B3C6;
  --mp2g-border: #29364B;
  color-scheme: dark;
}

/* Global base */
body {
  background-color: var(--mp2g-bg);
  color: var(--mp2g-text);
  font-family: var(--font-body);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--mp2g-text);
  line-height: 1.2;
}

.mp2g-container {
  width: min(92%, var(--container-width));
  margin-inline: auto;
}

.mp2g-section {
  padding-block: var(--section-space);
}

.mp2g-card {
  background: var(--mp2g-surface);
  border: 1px solid var(--mp2g-border);
  border-radius: var(--card-radius);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.mp2g-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 35px rgba(16, 27, 53, .10);
}

.mp2g-gradient-text {
  background: var(--gradient-gold);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

.mp2g-button {
  border-radius: var(--button-radius);
  padding: 14px 24px;
  font-weight: 600;
}

/* Vertical accent utilities */
.vertical-technology { --vertical-accent: var(--vertical-technology); }
.vertical-foundation { --vertical-accent: var(--vertical-foundation); }
.vertical-media { --vertical-accent: var(--vertical-media); }
.vertical-emart { --vertical-accent: var(--vertical-emart); }
.vertical-fintech { --vertical-accent: var(--vertical-fintech); }
.vertical-law { --vertical-accent: var(--vertical-law); }
.vertical-transports { --vertical-accent: var(--vertical-transports); }

.mp2g-vertical-card {
  border-top: 4px solid var(--vertical-accent);
}

/* Keyboard focus */
:focus-visible {
  outline: 3px solid var(--mp2g-gold);
  outline-offset: 4px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* Responsive adjustments */
@media (max-width: 767px) {
  :root {
    --section-space: 60px;
  }

  .mp2g-container {
    width: 90%;
  }

  .mp2g-card:hover {
    transform: none;
  }
}