/* ============================================
   css/variables.css
   Design tokens, base reset & utility classes
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=Nunito+Sans:wght@300;400;500;600;700&display=swap');

:root {
  /* ── Core palette ── */
  --color-bg:           #0f0f0f;
  --color-bg-alt:       #161616;
  --color-bg-card:      #1e1e1e;
  --color-border:       #2c2c2c;
  --color-border-light: #3a3a3a;

  --color-green:        #4caf50;
  --color-green-dark:   #388e3c;
  --color-green-glow:   rgba(76,175,80,0.20);
  --color-green-bright: #81c784;

  --color-text:         #e8e8e8;
  --color-text-muted:   #999;
  --color-white:        #ffffff;

  /* Star color = #388e3c (as requested) */
  --color-star:         #388e3c;

  /* ── Typography ── */
  --font-display: 'Cinzel', serif;
  --font-body:    'Nunito Sans', sans-serif;

  /* ── Spacing ── */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  40px;

  /* ── Radii ── */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;

  /* ── Effects ── */
  --shadow-card:  0 4px 20px rgba(0,0,0,0.55);
  --shadow-green: 0 0 22px rgba(56,142,60,0.45);
  --transition:   0.22s ease;

  /* ── Layout ── */
  --max-width: 920px;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html  { scroll-behavior: smooth; }
body  {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
a   { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button, select { font-family: var(--font-body); cursor: pointer; }

/* ── Shared utilities ── */
.section-wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-xl) var(--space-lg);
}

.section-title {
  text-align: center;
  font-size: 19px;
  font-weight: 700;
  color: var(--color-white);
  margin-bottom: var(--space-lg);
  letter-spacing: 0.3px;
}

.section-title .highlight { color: var(--color-green); }

hr.divider {
  border: none;
  border-top: 1px solid var(--color-border);
}