/* ==========================================================================
   common.css — shared framework for every page
   Holds: reset, design tokens, typography variables, predefined button
   classes and the .content-wrap width control.
   Page-level files (css/style.css) must never redefine what lives here.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Reset
   -------------------------------------------------------------------------- */
* {
  box-sizing: border-box;
  border: 0;
  margin: 0;
  padding: 0;
}

/* --------------------------------------------------------------------------
   Design tokens
   -------------------------------------------------------------------------- */
:root {
  /* Brand palette */
  --color-dark: #2f2a1f;
  --color-cream: #faf8f3;
  --color-gold: #d4a853;
  --color-olive: #8b8f57;
  --color-leaf: #4a7c3f;
  --color-leaf-soft: #eef3ea;
  --color-white: #ffffff;
  --color-heading: #2f2a1f;
  --color-text: #57534e;
  --color-text-strong: #44403c;

  /* Typography — system stacks, no external font files to download.
     Weight comes from the --weight-* tokens below, never a raw number. */
  --font-regular: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-heading: ui-serif, Georgia, "Times New Roman", serif;

  /* Weights */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* Tamil stack — the serif and Puvi families carry no Tamil glyphs, so Tamil
     copy silently fell back to whatever the OS picked. These are the Tamil
     faces that actually ship on macOS, Windows and Android. */
  --font-tamil: "Noto Sans Tamil", "Nirmala UI", "Latha", "Tamil Sangam MN", "Tamil MN", sans-serif;

  /* Spacing scale */
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 40px;
  --space-xl: 64px;
  --space-2xl: 96px;

  /* Radii */
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(47, 42, 31, 0.06), 0 2px 8px rgba(47, 42, 31, 0.05);
  --shadow-md: 0 6px 20px rgba(47, 42, 31, 0.1);
  --shadow-lg: 0 18px 45px rgba(0, 0, 0, 0.3);

  /* Layout */
  --max-width: 1280px;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
/* No scroll-behavior here on purpose: the menu scroll is animated in
   script.js with jQuery, and CSS smooth scrolling governs scrollTop writes
   too, so the two would fight frame by frame. Sections keep their
   scroll-margin-top so anchors still land clear of the header without JS. */

body {
  font-family: var(--font-regular);
  background: var(--color-cream);
  -webkit-font-smoothing: antialiased;
}

/* --------------------------------------------------------------------------
   Width control — max-width only. No padding, gap or flex here.
   Inner spacing belongs to the single div placed inside .content-wrap.
   -------------------------------------------------------------------------- */
.content-wrap {
  max-width: var(--max-width);
  margin: 0 auto;
}

/* --------------------------------------------------------------------------
   Predefined buttons
   .primary-btn -> base action button, .primary-btn.secondary-btn -> gold filled variant.
   Section CSS must never restyle these classes.
   -------------------------------------------------------------------------- */
.primary-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 28px;
  border-radius: var(--radius-sm);
  font-weight: var(--weight-semibold);
  font-size: 16px;
  line-height: 1.2;
  text-decoration: none;
  color: var(--color-dark);
  border: 1px solid var(--color-dark);
}

.primary-btn.secondary-btn {
  background: var(--color-gold);
  border-color: var(--color-gold);
  color: #000000;
  box-shadow: var(--shadow-md);
}

/* --------------------------------------------------------------------------
   Shared media defaults
   -------------------------------------------------------------------------- */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Every list on the site is a layout list, never a bulleted one */
ul {
  list-style: none;
}

/* One reading rhythm for body copy across the whole site */
p {
  line-height: 1.8;
}