/* ==========================================================
   MyMylapore.in Brand / Design System
   Version: 1.0 — August 2026
   Fonts: Source Sans Pro + Source Serif Pro
   ========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@400;500;600;700;800&family=Source+Serif+4:opsz,wght@8..60,600;8..60,700&display=swap');

:root {
  /* Brand heritage palette — derived from MyMylapore logo */
  --mm-heritage-green: #0B5B43;
  --mm-heritage-green-dark: #073D31;
  --mm-temple-gold: #B9903B;
  --mm-ivory: #FCF7E8;

  /* Blue Eclipse — editorial depth */
  --mm-midnight: #0F0E47;
  --mm-deep-indigo: #272757;
  --mm-indigo: #505081;
  --mm-periwinkle: #8686AC;

  /* Stormy Morning — utility / trust / civic */
  --mm-slate-blue: #6A89A7;
  --mm-mist-blue: #BDDDFC;
  --mm-sky-blue: #88BDF2;
  --mm-blue-grey: #384959;

  /* Neutral UI */
  --mm-ink: #18211F;
  --mm-text: #33413D;
  --mm-muted: #6C7975;
  --mm-line: #DCE4E0;
  --mm-surface: #FFFFFF;
  --mm-page: #F7F8F6;
  --mm-soft-green: #EDF5F1;
  --mm-soft-blue: #EEF4FA;
  --mm-soft-gold: #F6F0DF;

  /* Semantic */
  --mm-success: #177447;
  --mm-warning: #A66D19;
  --mm-danger: #A7443E;
  --mm-info: #3E6F9D;

  /* Typography */
  --mm-font-ui: "Source Sans 3", "Source Sans Pro", Arial, sans-serif;
  --mm-font-editorial: "Source Serif 4", "Source Serif Pro", Georgia, serif;

  /* Type scale */
  --mm-text-xs: 0.75rem;
  --mm-text-sm: 0.875rem;
  --mm-text-base: 1rem;
  --mm-text-lg: 1.125rem;
  --mm-text-xl: 1.375rem;
  --mm-text-2xl: clamp(1.75rem, 3vw, 2.35rem);
  --mm-text-3xl: clamp(2.35rem, 5vw, 4.25rem);

  /* Spacing: 4/8 based */
  --mm-space-1: 0.25rem;
  --mm-space-2: 0.5rem;
  --mm-space-3: 0.75rem;
  --mm-space-4: 1rem;
  --mm-space-5: 1.5rem;
  --mm-space-6: 2rem;
  --mm-space-7: 3rem;
  --mm-space-8: 4rem;

  /* Layout */
  --mm-max: 1200px;
  --mm-radius-sm: 8px;
  --mm-radius: 14px;
  --mm-radius-lg: 20px;
  --mm-shadow-sm: 0 4px 12px rgba(15, 14, 71, 0.05);
  --mm-shadow: 0 12px 32px rgba(15, 14, 71, 0.08);
  --mm-focus: 0 0 0 3px rgba(136, 189, 242, 0.45);
}

/* ----- Base ----- */
* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--mm-font-ui);
  font-size: var(--mm-text-base);
  line-height: 1.6;
  background: var(--mm-page);
  color: var(--mm-ink);
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.16em;
}

img {
  max-width: 100%;
  display: block;
}

button,
input,
select,
textarea {
  font: inherit;
}

:focus-visible {
  outline: none;
  box-shadow: var(--mm-focus);
  border-radius: var(--mm-radius-sm);
}

.mm-container {
  width: min(var(--mm-max), 92vw);
  margin-inline: auto;
}

/* ----- Typography Hierarchy ----- */
.mm-kicker {
  margin: 0 0 var(--mm-space-2);
  font-size: var(--mm-text-xs);
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mm-heritage-green);
}

.mm-display,
.mm-title,
.mm-section-title,
.mm-card-title {
  margin-top: 0;
  font-family: var(--mm-font-editorial);
  text-wrap: balance;
}

.mm-display {
  margin-bottom: var(--mm-space-4);
  font-size: var(--mm-text-3xl);
  line-height: 1.02;
  letter-spacing: -0.035em;
  color: var(--mm-midnight);
}

.mm-section-title {
  margin-bottom: var(--mm-space-3);
  font-size: var(--mm-text-2xl);
  line-height: 1.08;
  letter-spacing: -0.02em;
}

.mm-card-title {
  margin-bottom: var(--mm-space-2);
  font-size: var(--mm-text-xl);
  line-height: 1.16;
}

.mm-lead {
  max-width: 48rem;
  margin: 0;
  color: var(--mm-text);
  font-size: var(--mm-text-lg);
}

.mm-meta {
  color: var(--mm-muted);
  font-size: var(--mm-text-sm);
}

/* ----- Brand Header ----- */
.mm-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255,255,255,.96);
  border-bottom: 1px solid var(--mm-line);
  backdrop-filter: blur(12px);
}

.mm-nav {
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mm-space-5);
}

.mm-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
}

.mm-brand img {
  width: 54px;
  height: 54px;
  object-fit: cover;
  border-radius: 50%;
}

.mm-brand-name {
  display: block;
  color: var(--mm-midnight);
  font-weight: 800;
  font-size: 1.1rem;
  line-height: 1.05;
}

.mm-brand-sub {
  display: block;
  margin-top: 0.18rem;
  color: var(--mm-muted);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* ----- Core Surfaces ----- */
.mm-card {
  background: var(--mm-surface);
  border: 1px solid var(--mm-line);
  border-radius: var(--mm-radius);
  box-shadow: var(--mm-shadow-sm);
}

.mm-card:hover {
  border-color: #C9D7D1;
}

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

.mm-section--soft {
  background: var(--mm-soft-blue);
  border-block: 1px solid #DFEAF4;
}

.mm-section--heritage {
  background: var(--mm-ivory);
  border-block: 1px solid #EFE5C8;
}

/* ----- Tags / Categories ----- */
.mm-tag {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0.25rem 0.55rem;
  border-radius: 999px;
  background: var(--mm-soft-green);
  color: var(--mm-heritage-green);
  font-size: var(--mm-text-xs);
  font-weight: 800;
}

.mm-tag--civic {
  background: var(--mm-soft-blue);
  color: var(--mm-blue-grey);
}

.mm-tag--heritage {
  background: var(--mm-soft-gold);
  color: #725616;
}

/* ----- Buttons ----- */
.mm-btn {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.68rem 1rem;
  border: 1px solid var(--mm-line);
  border-radius: 10px;
  background: #fff;
  color: var(--mm-midnight);
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
}

.mm-btn--primary {
  border-color: var(--mm-heritage-green);
  background: var(--mm-heritage-green);
  color: #fff;
}

.mm-btn--editorial {
  border-color: var(--mm-midnight);
  background: var(--mm-midnight);
  color: #fff;
}

.mm-btn--primary:hover {
  background: var(--mm-heritage-green-dark);
}

/* ----- Forms ----- */
.mm-field {
  display: grid;
  gap: 0.4rem;
}

.mm-field label {
  color: var(--mm-text);
  font-size: var(--mm-text-sm);
  font-weight: 700;
}

.mm-field input,
.mm-field select,
.mm-field textarea {
  width: 100%;
  min-height: 44px;
  padding: 0.68rem 0.8rem;
  border: 1px solid var(--mm-line);
  border-radius: 10px;
  background: #fff;
  color: var(--mm-ink);
}

.mm-field textarea {
  min-height: 130px;
  resize: vertical;
}

/* ----- Footer ----- */
.mm-footer-cta {
  padding-block: var(--mm-space-6);
  background: var(--mm-deep-indigo);
  color: #fff;
}

.mm-footer {
  background: var(--mm-midnight);
  color: #E9EAF6;
}

.mm-footer a {
  color: #D0D3E5;
}

.mm-footer-muted {
  color: #AEB3CE;
}

/* ----- Accessibility / 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;
  }
}

@media (max-width: 760px) {
  .mm-section { padding-block: var(--mm-space-6); }
  .mm-brand-sub { display: none; }
}