/* ============================================================
   Konwaba Training Institute — Styling Helper (Tailwind Companion)
   File: assets/css/styling.css
   Improvement #1: Corporate tokens + typography + reduced radius
   ============================================================ */

/* -----------------------------
   1) Brand Tokens + Defaults (INSTITUTE)
------------------------------ */
:root{
  /* Brand (Maroon) */
  --maroon-950:#3B0A1A;
  --maroon-900:#4A0E22;
  --maroon-800:#5E142C;
  --maroon-700:#6E1934;
  --maroon-600:#7B1E3A; /* primary */
  --maroon-500:#8F2A4A;

  /* Silver (replaces beige system) */
  --silver-50:#F7F8FA;
  --silver-100:#EFF1F4;
  --silver-200:#E2E6EB;
  --silver-300:#D2D8E0;
  --silver-400:#B8C0CB;

  /* Neutrals (cool / professional) */
  --ink-950:#0A0F18;
  --ink-900:#101827;
  --ink-800:#1B2534;
  --ink-700:#2C3647;
  --ink-600:#4B5563;
  --ink-500:#6B7280;

  /* Surfaces */
  --bg:#F7F8FA;
  --card:#FFFFFF;

  /* Effects (restrained / adult) */
  --shadow-sm: 0 8px 22px rgba(16,24,40,.06);
  --shadow-md: 0 16px 40px rgba(16,24,40,.10);
  --shadow-lg: 0 24px 70px rgba(16,24,40,.14);
  --ring: 0 0 0 4px rgba(123,30,58,.14);

  /* Radius (reduced vs school) */
  --radius-sm: 10px;
  --radius-md: 12px;
  --radius-lg: 14px;

  /* Layout max (do NOT bunch up) */
  --max: 100%;

  --ease: cubic-bezier(.2,.8,.2,1);
}

/* -----------------------------
   2) Base (Global Polish)
------------------------------ */
html{ scroll-behavior:smooth; }
body{
  background: var(--bg);
  color: var(--ink-800);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
::selection{ background: rgba(123,30,58,.18); }

a{ text-decoration:none; }
img{ display:block; max-width:100%; }
.container-max{ max-width: var(--max); margin: 0 auto; }

/* Accessible focus */
:focus{ outline:none; }
:focus-visible{
  box-shadow: var(--ring);
  border-radius: 10px;
}

/* Institute background texture (cooler, not “beige paper”) */
.bg-paper{
  background:
    radial-gradient(1200px 600px at 18% -10%, rgba(226,230,235,.55), transparent 62%),
    radial-gradient(900px 500px at 85% 0%, rgba(123,30,58,.10), transparent 55%),
    radial-gradient(900px 520px at 50% 110%, rgba(226,230,235,.42), transparent 60%),
    var(--bg);
}

/* -----------------------------
   3) Typography Helpers (INSTITUTE)
   - Switch from Playfair (school/heritage) to Inter-like corporate stack
------------------------------ */
.font-heading{
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans";
  letter-spacing: -0.02em;
}
.font-body{
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans";
}

.lead{
  color: var(--ink-600);
  font-size: 1.05rem;
  line-height: 1.9;
}
.kicker{
  letter-spacing: .18em;
  text-transform: uppercase;
  font-size: .78rem;
  color: rgba(16,24,40,.62);
}

/* Section headings */
.section-title{
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans";
  color: var(--ink-900);
  font-weight: 800;
  letter-spacing: -0.02em;
}
.section-subtitle{
  color: var(--ink-600);
  max-width: 58rem;
}