@import url("https://fonts.googleapis.com/css2?family=Rokkitt:wght@400;500;600;700&family=Ubuntu:wght@400;500;700&display=swap");

:root {
  --pv-global-color-primary: #02718c;
  --pv-global-color-secondary: #3e444f;
  --pv-global-color-text: #3e434c;
  --pv-global-color-accent: #04b4c8;
  --pv-global-color-pollock_primary: #012f6b;
  --pv-global-color-pollock_text: #3e444f;
  --pv-global-color-pollock_accent: #04b4c8;
  --pv-global-color-pollock_accent_2: #02718c;
  --pv-global-color-pollock_accent_3: #d25b19;
  --pv-global-color-pollock_dark: #026fba;
  --pv-global-color-pollock_light: #dfe1e0;
  --pv-global-color-pollock_light_2: #c5d8d5;
  --pv-global-color-pollock_mid: #014a86;
  --pv-global-color-pollock_mid_2: #02609b;
  --pv-global-color-transparent: #ffffff00;
  --pv-global-color-lightgrey: #f7f7f7;
  --pv-global-color-white: #ffffff;
  --pv-global-color-alt1: #d3eff3;
  --pv-global-color-alt2: #cde8fa;

  --pv-global-typography-primary-font-family: "Rokkitt", serif;
  --pv-global-typography-secondary-font-family:
    "Ubuntu", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue",
    Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  --pv-global-typography-text-font-family:
    "Ubuntu", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue",
    Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
}

[data-theme="pv"] {
  color-scheme: light;
  --color-base-100: var(--pv-global-color-white);
  --color-base-200: var(--pv-global-color-white);
  --color-base-300: var(--pv-global-color-pollock_light);
  --color-base-content: var(--pv-global-color-text);
  --color-primary: var(--pv-global-color-primary);
  --color-primary-content: var(--pv-global-color-white);
  --color-secondary: var(--pv-global-color-secondary);
  --color-secondary-content: var(--pv-global-color-white);
  --color-accent: var(--pv-global-color-accent);
  --color-accent-content: var(--pv-global-color-pollock_primary);
  --color-neutral: var(--pv-global-color-secondary);
  --color-neutral-content: var(--pv-global-color-white);
  --color-info: var(--pv-global-color-pollock_dark);
  --color-info-content: var(--pv-global-color-white);
  --color-success: #15803d;
  --color-success-content: var(--pv-global-color-white);
  --color-warning: #f59e0b;
  --color-warning-content: #422006;
  --color-error: #dc2626;
  --color-error-content: var(--pv-global-color-white);
  --p: var(--pv-global-color-primary);
  --pc: var(--pv-global-color-white);
  --s: var(--pv-global-color-secondary);
  --sc: var(--pv-global-color-white);
  --a: var(--pv-global-color-accent);
  --ac: var(--pv-global-color-pollock_primary);
  --n: var(--pv-global-color-secondary);
  --nc: var(--pv-global-color-white);
  --b1: var(--pv-global-color-lightgrey);
  --b2: var(--pv-global-color-white);
  --b3: var(--pv-global-color-pollock_light);
  --bc: var(--pv-global-color-text);
  --in: var(--pv-global-color-pollock_dark);
  --inc: var(--pv-global-color-white);
  --su: #15803d;
  --suc: var(--pv-global-color-white);
  --wa: #f59e0b;
  --wac: #422006;
  --er: #dc2626;
  --erc: var(--pv-global-color-white);
  --rounded-btn: 0.75rem;
  --rounded-badge: 0.5rem;
  --rounded-box: 1rem;
  --radius-selector: 0.5rem;
  --radius-field: 0.5rem;
  --size-selector: 0.25rem;
  --size-field: 0.25rem;
  --border: 1px;
  --depth: 1;
  --noise: 0;
  --btn-text-case: none;
}

/* Helper classes */
.pv-header {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(
    128deg,
    var(--pv-global-color-pollock_primary) 0%,
    var(--pv-global-color-pollock_mid) 32%,
    var(--pv-global-color-pollock_mid_2) 58%,
    var(--pv-global-color-primary) 78%,
    var(--pv-global-color-accent) 100%
  );
  color: var(--pv-global-color-white);
  font-family: var(--pv-global-typography-secondary-font-family);
  box-shadow: 0 12px 24px rgba(1, 47, 107, 0.15);
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}

.pv-header a {
  color: inherit;
  text-decoration: none;
}
.pv-header a:hover,
.pv-header a:focus-visible {
  color: var(--pv-global-color-alt2);
}
.pv-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 72rem;
  margin: 0 auto;
  padding: 1rem 1.5rem;
  gap: 1.5rem;
  position: relative;
  z-index: 1;
}
.pv-header__brand {
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.pv-header__nav {
  display: flex;
  gap: 1rem;
  align-items: center;
  flex-wrap: wrap;
}
.pv-header__nav-link {
  font-size: 0.95rem;
  font-weight: 500;
  position: relative;
}
.pv-header__nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.35rem;
  width: 100%;
  height: 2px;
  background: rgba(255, 255, 255, 0.6);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.pv-header__nav-link:is(:hover, :focus-visible)::after,
.pv-header__nav-link--active::after {
  opacity: 1;
}
.pv-header__nav-link--active {
  color: var(--pv-global-color-white);
}
.pv-card {
  background: var(--pv-global-color-white);
  border: 1px solid var(--pv-global-color-pollock_light);
  border-radius: 1rem;
  box-shadow: 0 10px 20px rgba(2, 113, 140, 0.05);
}

.card-body > ol {
  counter-reset: pv-ordered;
  display: grid;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.card-body > ol > li {
  counter-increment: pv-ordered;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.75rem 0.85rem;
  margin: 0;
  border-radius: 0.85rem;
  border: 1px solid rgba(1, 47, 107, 0.08);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 6px 12px rgba(1, 47, 107, 0.06);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.card-body > ol > li::before {
  content: counter(pv-ordered, decimal);
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.9rem;
  font-family: var(--pv-global-typography-secondary-font-family);
  color: var(--pv-global-color-pollock_primary);
  background: linear-gradient(135deg, var(--pv-global-color-alt1), rgba(255, 255, 255, 0.9));
  box-shadow: inset 0 0 0 1px rgba(1, 47, 107, 0.08);
}

.card-body > ol > li:hover {
  border-color: var(--pv-global-color-alt1);
  background: var(--pv-global-color-white);
  box-shadow: 0 10px 20px rgba(1, 47, 107, 0.08);
}
.pv-surface {
  background: var(--pv-global-color-white);
  border-radius: 1rem;
  border: 1px solid rgba(1, 47, 107, 0.08);
  box-shadow: 0 12px 24px rgba(1, 47, 107, 0.08);
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--pv-global-typography-secondary-font-family);
}
.pv-title {
  font-family: var(--pv-global-typography-secondary-font-family);
  color: var(--pv-global-color-primary);
}
.pv-text {
  font-family: var(--pv-global-typography-text-font-family);
  color: var(--pv-global-color-secondary);
}
.pv-btn {
  font-family: var(--pv-global-typography-secondary-font-family);
  background: var(--pv-global-color-accent);
  color: #fff;
  border: none;
}
.pv-btn:hover {
  background: var(--pv-global-color-pollock_dark);
}
.pv-badge {
  background: var(--pv-global-color-alt1);
  color: var(--pv-global-color-pollock_primary);
}
.pv-chip {
  background: var(--pv-global-color-alt2);
  color: var(--pv-global-color-primary);
}