/* =========================================================
   Punggawa Cybersecurity — Web CSS Typography Guideline
   Typeface System: Montserrat (Titles) + Lato (Body)
   Values: Trust • Integrity • Professionalism • Expertise
   ========================================================= */

/* 1) Font loading (recommended: Google Fonts) */
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700;800&family=Lato:wght@400;500;600;700&display=swap");

/* 2) Design tokens (CSS variables) */
:root {
  /* Font families */
  --font-title: "Montserrat", "Helvetica Neue", Arial, Helvetica, sans-serif;
  --font-body: "Lato", "Helvetica Neue", Arial, Helvetica, sans-serif;

  /* Font weights */
  --w-regular: 400;
  --w-medium: 500;
  --w-semibold: 600;
  --w-bold: 700;
  --w-extrabold: 800;

  /* Line heights */
  --lh-title: 1.2;     /* Headlines */
  --lh-subtitle: 1.3;  /* Subheads */
  --lh-body: 1.6;      /* Paragraphs */
  --lh-tight: 1.15;    /* Rare use, e.g., big hero headline */

  /* Letter spacing */
  --ls-title: -0.01em; /* Titles: slightly tight for authority */
  --ls-body: 0.00em;   /* Body: neutral */
  --ls-label: 0.06em;  /* Labels: uppercase tracking */

  /* Type scale (desktop base) */
  --fs-900: clamp(2.5rem, 3.2vw, 3rem);   /* H1 40–48px */
  --fs-800: clamp(2rem, 2.6vw, 2.25rem);  /* H2 32–36px */
  --fs-700: clamp(1.5rem, 2vw, 1.75rem);  /* H3 24–28px */
  --fs-600: 1.375rem;                     /* H4 22px */
  --fs-500: 1.25rem;                      /* Lead 20px */
  --fs-400: 1rem;                         /* Body 16px */
  --fs-300: 0.875rem;                     /* Small 14px */
  --fs-200: 0.8125rem;                    /* Caption 13px */

  /* Paragraph spacing */
  --space-paragraph: 0.9em;
}

/* 3) Base element defaults */
html {
  font-size: 16px;
  text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-weight: var(--w-regular);
  font-size: var(--fs-400);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
}

/* 4) Headings (Montserrat) */
h1, h2, h3, h4, h5, h6,
.heading {
  font-family: var(--font-title);
  letter-spacing: var(--ls-title);
  margin: 0 0 0.5em 0;
}

h1 {
  font-size: var(--fs-900);
  font-weight: var(--w-bold);
  line-height: var(--lh-title);
}

h2 {
  font-size: var(--fs-800);
  font-weight: var(--w-semibold);
  line-height: var(--lh-title);
}

h3 {
  font-size: var(--fs-700);
  font-weight: var(--w-semibold);
  line-height: var(--lh-subtitle);
}

h4 {
  font-size: var(--fs-600);
  font-weight: var(--w-medium);
  line-height: var(--lh-subtitle);
}

h5 {
  font-size: 1.125rem; /* 18px */
  font-weight: var(--w-medium);
  line-height: var(--lh-subtitle);
}

h6 {
  font-size: 1rem; /* 16px */
  font-weight: var(--w-medium);
  line-height: var(--lh-subtitle);
}

/* 5) Paragraphs & content rhythm */
p {
  margin: 0 0 var(--space-paragraph) 0;
}

.lead {
  font-size: var(--fs-500);   /* 20px */
  line-height: var(--lh-body);
  font-weight: var(--w-regular);
}

/* 6) Links (keep brand color in your color tokens) */
a {
  text-underline-offset: 0.18em;
  text-decoration-thickness: 0.08em;
}

a:hover {
  text-decoration-thickness: 0.12em;
}

/* 7) UI labels, tags, navigation */
.label,
.tag,
.nav-item {
  font-family: var(--font-title);
  font-weight: var(--w-semibold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  font-size: 0.75rem; /* 12px */
  line-height: 1.2;
}

/* 8) Buttons (Montserrat for authority) */
button,
.btn {
  font-family: var(--font-title);
  font-weight: var(--w-semibold);
  letter-spacing: 0.01em;
}

/* 9) Forms */
input,
textarea,
select {
  font-family: var(--font-body);
  font-weight: var(--w-regular);
  font-size: 1rem;
  line-height: 1.4;
}

::placeholder {
  font-weight: var(--w-regular);
  opacity: 0.7;
}

/* 10) Captions, footnotes, meta text */
.caption,
small,
.meta {
  font-family: var(--font-body);
  font-size: var(--fs-200); /* 13px */
  line-height: 1.5;
}

/* 11) Lists */
ul, ol {
  margin: 0 0 var(--space-paragraph) 1.25em;
}
li {
  margin: 0.35em 0;
}

/* 12) Long-form content (articles, whitepapers) */
.prose {
  max-width: 72ch; /* readability */
}
.prose p {
  font-size: 1.0625rem; /* 17px for reading comfort */
}
.prose h2 {
  margin-top: 1.2em;
}
.prose h3 {
  margin-top: 1em;
}

/* 13) Cards / sections */
.section-title {
  font-family: var(--font-title);
  font-weight: var(--w-semibold);
  font-size: var(--fs-600);
  line-height: var(--lh-subtitle);
  letter-spacing: var(--ls-title);
}

/* 14) Responsive tweaks */
@media (max-width: 640px) {
  :root {
    --fs-600: 1.25rem;  /* H4 20px */
    --fs-500: 1.125rem; /* Lead 18px */
  }
  .prose {
    max-width: 100%;
  }
}

/* 15) Accessibility helpers */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* =========================================================
   Usage Notes (quick):
   - Titles/Headers: Montserrat 600–700 (800 only for hero)
   - Body: Lato 400 (500 for emphasis)
   - Avoid italics for long paragraphs; use Medium weight instead
   - Keep max text width ~65–75 characters for long reads
   ========================================================= */