/*
 * Scotty docs: Factorial design system layer on top of @factorial/docs.
 * Values come from the factorial-design tokens (colors_and_type.css), read
 * at this theme's 16px root: 1 design-system rem (10px) = 0.625rem here.
 * Homepage hero + Benefits follow the phabalicious docs; they use ./styles/tokens.css
 * (factorial-design tokens, @font-face stripped since fdocs serves SuisseIntl).
 */
@import url("./styles/tokens.css");

html {
  /* brand palette */
  --color-orange: #cf451c;              /* --color-primary */
  --color-grey-900: #111827;            /* --color-blue-dark */
  --color-grey-100: #f5f7fa;            /* light grey surface */
  --color-background: #fff;             /* white page, always */
  --color-footer: #111827;

  /* shape + motion */
  --border-radius: 0.1171875rem;        /* 0.1875rem @ 10px root = 1.875px */
  --fac-transition: 250ms ease-out;

  /* type scale (u-fontH1..H4, desktop) */
  --typo-h1-font-size: 3.375rem;        /* 54px */
  --typo-h2-font-size: 2.5rem;          /* 40px */
  --typo-h3-font-size: 1.875rem;        /* 30px */
  --typo-h4-font-size: 1.5rem;          /* 24px */
  --typo-h1-font-weight: 400;
  --typo-h2-font-weight: 400;
  --typo-h3-font-weight: 400;
  --typo-h4-font-weight: 400;

  background-color: #fff;
  color-scheme: light;
}

body {
  background-color: #fff;
}

/* ---------- header: white, sticky, no border, no shadow ---------- */
.Header {
  border-block-end: 0;
}

/* ---------- focus: 3px primary, always visible (BITV) ---------- */
:where(.Header, main, .Footer) :where(a, button):focus-visible {
  outline: 3px solid var(--color-orange);
  outline-offset: 3px;
}

/* ---------- links: animated underline (u-linkHover) ---------- */
.RichText a:not([class]) {
  text-decoration-color: transparent;
  text-decoration-thickness: 0.09375em;
  text-underline-offset: 0.4em;
  background-image: linear-gradient(currentColor, currentColor);
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 100% 0.09375em;
  transition: background-size var(--fac-transition), color var(--fac-transition);
  text-decoration: none;
  padding-block-end: 0.15em;
}

.RichText a:not([class]):hover {
  color: var(--color-orange);
  background-size: 0 0.09375em;
}

/* ---------- homepage hero: dark band, copy column bottom-aligned ---------- */
.Hero {
  background: var(--color-bg-dark);
  color: var(--color-copy-primary-dark);
}
.Hero-container {
  display: grid;
  grid-template-columns: var(--layout-grid);
  max-width: none;
}
.Hero-contentContainer {
  grid-column: span var(--span-hero-copy);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--space-16) var(--layout-gutter);
}
.Hero-imageContainer {
  grid-column: span var(--span-hero-media);
  background: var(--color-bg-dark);
}
.Hero-image {
  display: block;
  inline-size: 100%;
  block-size: auto;
  max-block-size: 600px;
  object-fit: contain;
}
.Hero-title {
  font: var(--text-h2);
  letter-spacing: 0;
  max-inline-size: var(--measure-hero-title);
}
.Hero-titleProject {
  font: var(--text-eyebrow);              /* top-label */
  color: var(--color-primary-light);
  margin-block-end: var(--space-4);
}
.Hero-titleTagline {
  font: inherit;
}
/* ghost button on dark */
.Hero-link {
  align-self: flex-start;
  margin-block-start: var(--space-10);
  font: var(--text-copy-small);
  color: var(--color-copy-primary-dark);
  background: transparent;
  border: var(--border-width) solid currentColor;
  border-radius: var(--border-radius);
  padding: calc(0.75em - var(--border-width)) calc(1.5em - var(--border-width));
  text-decoration: none;
  transition: filter var(--fac-transition);
}
.Hero-link:hover {
  background: transparent;
  color: var(--color-copy-primary-dark);
  filter: brightness(0.7);
}
@media (max-width: 1023px) {
  .Hero-contentContainer,
  .Hero-imageContainer { grid-column: 1 / -1; }
}

/* ---------- features as "Benefits": index number + column dividers ---------- */
.Features {
  counter-reset: feature;
  max-width: none;                        /* full width, so columns line up with the hero copy */
  padding: var(--space-24) var(--layout-gutter);
  gap: var(--layout-gap-y) 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.Features-entry {
  counter-increment: feature;
  padding-inline: var(--space-8);
  border-inline-start: var(--divider-width) solid currentColor;
}
.Features-entry:nth-child(3n + 1) {
  border-inline-start: 0;
  padding-inline-start: 0;
}
/* Benefits carry an index number, not icons (factorial-design web §4). */
.Features-icon { display: none; }
.Features-entry::before {
  content: counter(feature, decimal-leading-zero);
  display: block;
  font: var(--text-mono-small);
  letter-spacing: var(--tracking-mono-small);
  color: var(--color-primary);
  margin-block-end: var(--space-4);
}
.Features-title,
.Features-icon + .Features-title {
  font: var(--text-h4);
  margin-block-start: 0;
}
.Features-details {
  font: var(--text-copy-small);
  color: var(--color-copy-secondary);
  margin-block-start: var(--space-4);
}
@media (max-width: 1023px) {
  .Features { grid-template-columns: minmax(0, 1fr); padding-block: var(--space-16); }
  .Features-entry,
  .Features-entry:nth-child(3n + 1) { border: 0; padding-inline: 0; }
}

/* ---------- docs nav ---------- */
.Nav-listItemLink {
  transition: color var(--fac-transition);
}

.Nav-listItemLink:hover {
  color: var(--color-orange);
}

/* ---------- code ---------- */
:not(pre) > code,
pre {
  background: var(--color-grey-100);
  border-radius: var(--border-radius);
}

pre {
  padding: 1.25rem;                     /* --static-spacing-small */
}

code,
pre {
  text-shadow: none;
}

/* ---------- tables ---------- */
.RichText table {
  border-collapse: collapse;
  inline-size: 100%;
}

.RichText :is(th, td) {
  border-block-end: 1px solid var(--color-grey-200);
  padding: 0.625rem 0.75rem;
  text-align: start;
  vertical-align: top;
}

.RichText th {
  font-weight: 600;
}

/* ---------- blockquote: orange rule ---------- */
.RichText blockquote {
  border-inline-start: 3px solid var(--color-orange);
  padding-inline-start: 1.25rem;
}

/* ---------- pagination: ghost buttons ---------- */
.Pagination-link {
  transition: filter var(--fac-transition);
}

.Pagination-link:hover {
  filter: brightness(0.7);
}