/* ================================================================
   INAI MATRIMONY — Design Tokens (single source of truth)
   ================================================================ */
:root {
  /* ── Brand colors ─────────────────────────────────────────── */
  --color-maroon:    #6A2E24;
  --color-maroon-dk: #4A1F19;
  --color-gold:      #C5A059;
  --color-gold-lt:   #D4B57A;
  --color-gold-dk:   #8A6D34;
  --color-ruby:      #A11D33;
  --color-cream:     #FAF6F0;
  --color-bg:        #FAF6F0;
  --color-surface:   #FFFFFF;
  --color-text:      #3B2A26;
  --color-muted:     #7B6E67;
  --color-border:    #EFE6DD;
  --color-primary-lt:#FBF3EC;
  --color-success:   #3F9D6A;
  --color-danger:    #C0573F;

  /* ── Typography families ──────────────────────────────────── */
  /* Cinzel = royal display; Cormorant = elegant supporting serif */
  --font-display: 'Cinzel', 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-brand:   'Cinzel', 'Cormorant Garamond', Georgia, serif;
  --font-serif:   'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-tamil:   'Noto Serif Tamil', 'Noto Sans Tamil', Latha, serif;
  --font-tamil-sans: 'Noto Sans Tamil', 'Noto Serif Tamil', Latha, sans-serif;

  /* ── Type scale ─────────────────────────────────────────── */
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;
  --text-5xl:  clamp(2.6rem, 5vw, 4.5rem);
  --leading-tight:  1.15;
  --leading-normal: 1.65;
  --leading-relaxed: 1.8;

  /* ── Spacing (4px base) ─────────────────────────────────── */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* ── Elevation ────────────────────────────────────────────── */
  --shadow-sm: 0 6px 22px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 12px 40px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 24px 70px rgba(58, 30, 20, 0.12);

  /* ── Radius ─────────────────────────────────────────────── */
  --radius-sm:   10px;
  --radius-md:   16px;
  --radius-lg:   20px;
  --radius-pill: 999px;

  /* ── Layout ─────────────────────────────────────────────── */
  --nav-h: 76px;
  --max-w: 1320px;
  --ease:  cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Legacy aliases (app.css) ───────────────────────────── */
  --gold:       var(--color-gold);
  --gold-dk:    var(--color-gold-dk);
  --maroon:     var(--color-maroon);
  --maroon-dk:  var(--color-maroon-dk);
  --ruby:       var(--color-ruby);
  --cream:      var(--color-cream);
  --primary:    var(--color-maroon);
  --primary-dk: var(--color-maroon-dk);
  --primary-lt: var(--color-primary-lt);
  --accent:     var(--color-gold);
  --success:    var(--color-success);
  --danger:     var(--color-danger);
  --text:       var(--color-text);
  --text-light: var(--color-muted);
  --bg:         var(--color-bg);
  --bg-card:    var(--color-surface);
  --border:     var(--color-border);
  --radius:     var(--radius-lg);
  --shadow:     var(--shadow-md);
  --font:       var(--font-body);
  --font-head:  var(--font-display);
  --font-serif: var(--font-brand);
  --font-tamil: var(--font-tamil);

  /* ── Premium aliases (premium.css) ──────────────────────── */
  --ip-maroon:      var(--color-maroon);
  --ip-maroon-dk:   var(--color-maroon-dk);
  --ip-gold:        var(--color-gold);
  --ip-gold-lt:     var(--color-gold-lt);
  --ip-gold-dk:     var(--color-gold-dk);
  --ip-cream:       var(--color-cream);
  --ip-bg:          var(--color-bg);
  --ip-card:        var(--color-surface);
  --ip-text:        var(--color-text);
  --ip-muted:       var(--color-muted);
  --ip-border:      var(--color-border);
  --ip-success:     var(--color-success);
  --ip-shadow:      var(--shadow-md);
  --ip-shadow-sm:   var(--shadow-sm);
  --ip-shadow-lg:   var(--shadow-lg);
  --ip-radius:      var(--radius-lg);
  --ip-maxw:        var(--max-w);
  --ip-nav-h:       var(--nav-h);
  --ip-font-head:   var(--font-display);
  --ip-font-body:   var(--font-body);
  --ip-font-serif:  var(--font-serif);
  --ip-font-tamil:  var(--font-tamil);
  --ip-ease:        var(--ease);
}

/* ── Global typography base ─────────────────────────────────── */
html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='46'%3E%3Cg fill='%23C9A227' fill-opacity='0.04'%3E%3Ccircle cx='23' cy='23' r='1.3'/%3E%3Ccircle cx='0' cy='0' r='1.3'/%3E%3Ccircle cx='46' cy='0' r='1.3'/%3E%3Ccircle cx='0' cy='46' r='1.3'/%3E%3Ccircle cx='46' cy='46' r='1.3'/%3E%3C/g%3E%3C/svg%3E"),
    var(--color-bg);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: var(--leading-tight);
  color: var(--color-maroon);
}

.tamil-sub {
  font-family: var(--font-tamil-sans);
  font-size: 0.82em;
  font-weight: 400;
  color: var(--color-muted);
  font-style: normal;
}

/* Focus ring utility */
:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 2px;
}