/* Young Founders School theme.
   Tokens match the live site and the Future of Work wireframe:
   teal #0ABAB5, hover #099C98, navy #1a1a2e, ink #111827.
   Inter is self-hosted (SIL OFL, see fonts/OFL.txt). */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/static/fonts/inter-latin.woff2") format("woff2");
}

@font-face {
  font-family: "Inter";
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url("/static/fonts/inter-latin-italic.woff2") format("woff2");
}

:root {
  --yfs-teal: #0abab5;
  --yfs-teal-dark: #099c98;
  --yfs-navy: #1a1a2e;
  --yfs-ink: #111827;
  --yfs-body: #374151;
  --yfs-muted: #6b7280;
  --yfs-border: #e5e7eb;
  --yfs-soft: #f9fafb;
  --yfs-tint: #effcfb;
  --yfs-chip: #e6f8f7;
}

html {
  font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
}

body {
  font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
  color: var(--yfs-ink);
  background: var(--yfs-soft);
  line-height: 1.6;
}

h1, h2, h3 {
  color: var(--yfs-ink);
  letter-spacing: -0.02em;
}

h1,
h1.font-semibold {
  font-weight: 700;
}

/* Primary actions were slate-900 pills in the templates. */
a.bg-slate-900,
button.bg-slate-900 {
  background-color: var(--yfs-teal);
  color: #fff;
  border-radius: 999px;
  font-weight: 600;
  border: 2px solid transparent;
}

a.bg-slate-900:hover,
button.bg-slate-900:hover {
  background-color: var(--yfs-teal-dark);
}

/* Outline actions: 2px teal border, teal text, fill on hover. */
a.border-slate-300.rounded-md,
button.border-slate-300.rounded-md {
  border: 2px solid var(--yfs-teal);
  color: var(--yfs-teal);
  background: #fff;
  border-radius: 999px;
  font-weight: 600;
}

a.border-slate-300.rounded-md:hover,
button.border-slate-300.rounded-md:hover {
  background: var(--yfs-teal);
  color: #fff;
}

/* Cards and panels. */
.rounded-lg,
.rounded-xl {
  border-radius: 16px;
}

.bg-white.border,
.bg-white.border-slate-200 {
  border-color: var(--yfs-border);
}

/* Selected settings row used a near-black border. */
.border-slate-900 {
  border-color: var(--yfs-teal);
}

a.text-sky-700,
.text-sky-700 {
  color: var(--yfs-teal-dark);
}

input.border-slate-300:focus,
textarea.border-slate-300:focus,
select.border-slate-300:focus {
  outline: none;
  border-color: var(--yfs-teal) !important;
  box-shadow: 0 0 0 3px rgba(10, 186, 181, 0.22) !important;
}

input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--yfs-teal);
}

.yfs-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: #fff;
  border-bottom: 1px solid var(--yfs-border);
}

.yfs-header-inner {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 24px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.yfs-logo {
  height: 45px;
  width: auto;
  display: block;
}

.yfs-nav {
  display: none;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  font-weight: 500;
}

.yfs-nav a,
.yfs-nav button {
  color: var(--yfs-body);
  text-decoration: none;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: 8px 10px;
  font: inherit;
  cursor: pointer;
}

.yfs-nav a:hover,
.yfs-nav button:hover {
  color: var(--yfs-ink);
}

.yfs-nav a.is-active {
  color: var(--yfs-teal-dark);
  border-bottom-color: var(--yfs-teal);
  font-weight: 600;
}

.yfs-nav .yfs-signout {
  color: var(--yfs-muted);
  border-bottom-color: transparent;
}

@media (min-width: 768px) {
  .yfs-nav {
    display: flex;
  }
  .yfs-menu {
    display: none;
  }
}

.yfs-main {
  max-width: 1140px;
  margin: 0 auto;
  padding: 32px 24px 48px;
  flex: 1;
  width: 100%;
}

.yfs-footer {
  background: var(--yfs-navy);
  color: #fff;
}

.yfs-footer-inner {
  max-width: 1140px;
  margin: 0 auto;
  padding: 28px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.yfs-footer .yfs-logo {
  height: 32px;
  filter: brightness(0) invert(1);
}

.yfs-footer p {
  margin: 0;
  color: #94a3b8;
  font-size: 13px;
}

.yfs-eyebrow {
  color: var(--yfs-teal);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.yfs-hero {
  background: linear-gradient(180deg, var(--yfs-tint), #fff);
}

.yfs-quote {
  font-size: 40px;
  line-height: 1.08;
  letter-spacing: -0.02em;
  font-weight: 700;
  color: var(--yfs-ink);
  margin: 16px 0 20px;
}

@media (min-width: 768px) {
  .yfs-quote {
    font-size: 48px;
  }
}

.yfs-chip {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  color: var(--yfs-teal-dark);
  background: var(--yfs-chip);
  padding: 4px 10px;
  border-radius: 999px;
}

body.yfs-app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  margin: 0;
}