/* Design tokens (SRS 12.6: soft green, sky blue, yellow, coral). Change colours here only. */
:root {
  --ink: #1f3b33;
  --muted: #566b64;
  --bg: #f6fbf8;
  --leaf: #2e7d5b;        /* buttons and links: 5:1 contrast with white */
  --leaf-soft: #dff1e7;
  --sky-soft: #e0f2fb;
  --sky-ink: #1d5b7a;
  --sun-soft: #fdf0c4;
  --sun-ink: #7a5a00;
  --coral-soft: #fde2db;
  --coral-ink: #9a3a27;

  --bs-body-font-family: 'Noto Sans Sinhala', 'Noto Sans', system-ui, 'Segoe UI', Roboto, sans-serif;
  --bs-body-color: var(--ink);
  --bs-body-bg: var(--bg);
  --bs-link-color: var(--leaf);
  --bs-link-hover-color: #1f573d;
  --bs-border-radius: 0.9rem;
}

body { line-height: 1.6; }
h1, h2, h3 { line-height: 1.2; font-weight: 800; }
.muted { color: var(--muted); }

.btn-primary {
  --bs-btn-bg: var(--leaf); --bs-btn-border-color: var(--leaf);
  --bs-btn-hover-bg: #256849; --bs-btn-hover-border-color: #256849;
  --bs-btn-active-bg: #1f573d; --bs-btn-active-border-color: #1f573d;
  --bs-btn-disabled-bg: var(--leaf); --bs-btn-disabled-border-color: var(--leaf);
  font-weight: 600;
}
.btn-outline-primary {
  --bs-btn-color: var(--leaf); --bs-btn-border-color: var(--leaf);
  --bs-btn-hover-bg: var(--leaf); --bs-btn-hover-border-color: var(--leaf);
  --bs-btn-active-bg: #256849; --bs-btn-active-border-color: #256849;
  font-weight: 600;
}

.brand { font-weight: 800; font-size: 1.4rem; color: var(--ink); text-decoration: none; }
.brand:hover { color: var(--ink); }

/* Home: the hero is four Sinhala sound tiles, the thing children will actually meet */
.hero { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 2.5rem; align-items: center; padding-block: 3rem 4.5rem; }
.hero h1 { font-size: clamp(2rem, 5vw, 3.3rem); }
.hero p { max-width: 34rem; font-size: 1.15rem; }
.tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; max-width: 22rem; margin-inline: auto; width: 100%; }
.tile { display: grid; place-items: center; aspect-ratio: 1; border-radius: 2rem; font-size: clamp(3rem, 10vw, 5.5rem); font-weight: 800; }
.tile:nth-child(1) { background: var(--sun-soft); color: var(--sun-ink); border-radius: 2.5rem 1rem 2.5rem 1rem; }
.tile:nth-child(2) { background: var(--sky-soft); color: var(--sky-ink); transform: translateY(1.5rem); }
.tile:nth-child(3) { background: var(--coral-soft); color: var(--coral-ink); }
.tile:nth-child(4) { background: var(--leaf-soft); color: var(--leaf); border-radius: 1rem 2.5rem 1rem 2.5rem; transform: translateY(1.5rem); }
@media (max-width: 767px) { .hero { grid-template-columns: 1fr; padding-block: 2rem 3rem; } }

/* Course list: an accent edge per age band instead of identical shadowed cards */
.course { background: #fff; border-radius: 1.25rem; padding: 1.5rem; border-left: 0.6rem solid var(--leaf-soft); height: 100%; }
#course-list > :nth-child(1) .course { border-color: #f3cf55; }
#course-list > :nth-child(2) .course { border-color: #7cc3e6; }
#course-list > :nth-child(3) .course { border-color: #ef8a75; }
.course h3 { font-size: 1.15rem; }

/* Forms and dashboard */
.auth-card { background: #fff; border-radius: 1.5rem; padding: 2rem; max-width: 30rem; margin: 2rem auto 4rem; border: 2px solid var(--leaf-soft); }
.form-control, .form-select { border-radius: 0.8rem; padding: 0.7rem 1rem; }
.field-error { color: #b3261e; font-size: 0.9rem; min-height: 1.2rem; }

.child { display: flex; align-items: center; gap: 1rem; background: #fff; border-radius: 1.25rem; padding: 1rem 1.25rem; }
.avatar { width: 3rem; height: 3rem; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 1.3rem; flex: none; }
.child:nth-child(4n+1) .avatar { background: var(--sun-soft); color: var(--sun-ink); }
.child:nth-child(4n+2) .avatar { background: var(--sky-soft); color: var(--sky-ink); }
.child:nth-child(4n+3) .avatar { background: var(--coral-soft); color: var(--coral-ink); }
.child:nth-child(4n) .avatar { background: var(--leaf-soft); color: var(--leaf); }

.site-footer { border-top: 2px solid var(--leaf-soft); padding-block: 1.5rem; font-size: 0.9rem; color: var(--muted); }