/*
 * Sebia design system — base typography & helpers
 * Depends on sebia-variables.css. Load both:
 *   <link rel="stylesheet" href="css/sebia-variables.css">
 *   <link rel="stylesheet" href="css/sebia-base.css">
 *
 * Self-host the fonts: see fonts/Poppins/ and fonts/DMSerifDisplay/.
 * (License: SIL OFL 1.1, OK to redistribute.)
 */

@font-face {
  font-family: "DM Serif Display";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/DMSerifDisplay/DMSerifDisplay-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "DM Serif Display";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/DMSerifDisplay/DMSerifDisplay-Italic.ttf") format("truetype");
}

@font-face { font-family: "Poppins"; font-style: normal; font-weight: 300; font-display: swap;
  src: url("../fonts/Poppins/Poppins-Light.ttf") format("truetype"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/Poppins/Poppins-Regular.ttf") format("truetype"); }
@font-face { font-family: "Poppins"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("../fonts/Poppins/Poppins-Italic.ttf") format("truetype"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/Poppins/Poppins-Medium.ttf") format("truetype"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/Poppins/Poppins-SemiBold.ttf") format("truetype"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../fonts/Poppins/Poppins-Bold.ttf") format("truetype"); }

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  color: var(--color-text);
  background: var(--color-background);
}

h1, h2 {
  font-family: var(--font-title);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-tight);
  color: var(--sebia-navy);
  margin: 0 0 var(--space-4) 0;
}
h1 { font-size: var(--font-size-4xl); }
h2 { font-size: var(--font-size-3xl); }

h3, h4, h5 {
  font-family: var(--font-body);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  color: var(--sebia-navy);
  margin: 0 0 var(--space-3) 0;
}
h3 { font-size: var(--font-size-2xl); }
h4 { font-size: var(--font-size-xl); }
h5 { font-size: var(--font-size-lg); }

p { margin: 0 0 var(--space-3) 0; }

a {
  color: var(--color-link);
  text-decoration: underline;
  text-underline-offset: 2px;
}
a:hover { color: var(--color-link-hover); }

strong, b { font-weight: var(--font-weight-semibold); }

/* Brand surface helpers */
.sebia-bg-navy   { background: var(--sebia-navy); color: var(--color-text-on-primary); }
.sebia-bg-blue   { background: var(--sebia-blue); }
.sebia-bg-purple { background: var(--sebia-purple); color: var(--color-text-on-primary); }
.sebia-bg-cyan   { background: var(--sebia-cyan); }

.sebia-text-navy   { color: var(--sebia-navy); }
.sebia-text-blue   { color: var(--sebia-blue); }
.sebia-text-purple { color: var(--sebia-purple); }

/* Button — primary */
.sebia-btn {
  display: inline-block;
  padding: var(--space-3) var(--space-6);
  font-family: var(--font-body);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-base);
  line-height: 1;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background 120ms ease, color 120ms ease;
}
.sebia-btn-primary {
  background: var(--sebia-navy);
  color: var(--color-text-on-primary);
}
.sebia-btn-primary:hover { background: #001456; }
.sebia-btn-secondary {
  background: transparent;
  color: var(--sebia-navy);
  border-color: var(--sebia-navy);
}
.sebia-btn-secondary:hover { background: var(--sebia-gray-100); }

/* Container */
.sebia-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-6);
}