/*
 * Hausl's product typography.
 *
 * This is the product type layer. It is the only place where product font
 * faces, type tokens, and semantic text roles live; the public landing page
 * may layer its own tokenized presentation on top when needed.
 *
 * Font sources are vendored official upstream release artifacts.
 */

@font-face {
  font-family: "Inter";
  src: url("/assets/InterVariable-884c49a1.woff2") format("woff2-variations"),
       url("/assets/InterVariable-884c49a1.woff2") format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: 100 900;
}

@font-face {
  font-family: "Source Serif 4";
  src: url("/assets/SourceSerif4Variable-Roman.ttf-68db0884.woff2") format("woff2-variations"),
       url("/assets/SourceSerif4Variable-Roman.ttf-68db0884.woff2") format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: 200 900;
}

:root {
  /* Product font stacks. Keep these definitions in this file only. */
  --hausl-font-ui:
    "Inter",
    system-ui,
    -apple-system,
    "Segoe UI",
    sans-serif;

  --hausl-font-editorial:
    "Source Serif 4",
    Georgia,
    serif;

  --hausl-font-mono:
    ui-monospace,
    "SFMono-Regular",
    Consolas,
    monospace;

  /* Font sizes */
  --hausl-text-display: clamp(2.25rem, 3vw, 3rem);
  --hausl-text-page-title: 2rem;
  --hausl-text-section: 1.375rem;
  --hausl-text-card-title: 1.125rem;
  --hausl-text-body: 1rem;
  --hausl-text-ui: 0.9375rem;
  --hausl-text-label: 0.875rem;
  --hausl-text-meta: 0.8125rem;
  --hausl-text-micro: 0.75rem;

  /* Font weights */
  --hausl-weight-regular: 400;
  --hausl-weight-medium: 500;
  --hausl-weight-semibold: 600;
  --hausl-weight-bold: 700;

  /* Icon sizes */
  --hausl-icon-sm: 1rem;
  --hausl-icon-md: 1.25rem;
  --hausl-icon-lg: 1.5rem;

  /* Line heights */
  --hausl-leading-display: 1.05;
  --hausl-leading-heading: 1.15;
  --hausl-leading-title: 1.3;
  --hausl-leading-ui: 1.4;
  --hausl-leading-body: 1.55;
  --hausl-leading-compact: 1;
  --hausl-leading-none: 0;
  --hausl-text-none: 0;
}

/* Keep native controls on the same UI face as their surrounding form. */
:where(button, input, select, textarea) {
  font-family: inherit;
}

/* Semantic product type roles. */
.type-display {
  font-family: var(--hausl-font-editorial);
  font-size: var(--hausl-text-display);
  font-weight: var(--hausl-weight-semibold);
  line-height: var(--hausl-leading-display);
}

.type-page-title {
  font-family: var(--hausl-font-editorial);
  font-size: var(--hausl-text-page-title);
  font-weight: var(--hausl-weight-semibold);
  line-height: var(--hausl-leading-heading);
}

.type-section-title {
  font-family: var(--hausl-font-editorial);
  font-size: var(--hausl-text-section);
  font-weight: var(--hausl-weight-semibold);
  line-height: var(--hausl-leading-heading);
}

.type-card-title {
  font-family: var(--hausl-font-ui);
  font-size: var(--hausl-text-card-title);
  font-weight: var(--hausl-weight-semibold);
  line-height: var(--hausl-leading-title);
}

.type-body {
  font-family: var(--hausl-font-ui);
  font-size: var(--hausl-text-body);
  font-weight: var(--hausl-weight-regular);
  line-height: var(--hausl-leading-body);
}

.type-ui {
  font-family: var(--hausl-font-ui);
  font-size: var(--hausl-text-ui);
  font-weight: var(--hausl-weight-medium);
  line-height: var(--hausl-leading-ui);
}

.type-label {
  font-family: var(--hausl-font-ui);
  font-size: var(--hausl-text-label);
  font-weight: var(--hausl-weight-semibold);
  line-height: var(--hausl-leading-ui);
}

.type-meta {
  font-family: var(--hausl-font-ui);
  font-size: var(--hausl-text-meta);
  font-weight: var(--hausl-weight-regular);
  line-height: var(--hausl-leading-ui);
}

.type-micro {
  font-family: var(--hausl-font-ui);
  font-size: var(--hausl-text-micro);
  font-weight: var(--hausl-weight-semibold);
  line-height: var(--hausl-leading-ui);
}

.type-eyebrow {
  font-family: var(--hausl-font-ui);
  font-size: var(--hausl-text-micro);
  font-weight: var(--hausl-weight-bold);
  line-height: var(--hausl-leading-ui);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.type-track-heading { letter-spacing: -0.025em; }
.type-track-eyebrow { letter-spacing: 0.04em; }

/* Form roles not covered by the content scale. They still use its tokens. */
.type-form-section {
  font-family: var(--hausl-font-ui);
  font-size: var(--hausl-text-body);
  font-weight: var(--hausl-weight-semibold);
  line-height: var(--hausl-leading-ui);
}

.type-dialog-title,
.type-sheet-title {
  font-family: var(--hausl-font-ui);
  font-size: var(--hausl-text-card-title);
  font-weight: var(--hausl-weight-semibold);
  line-height: var(--hausl-leading-title);
}

.type-sheet-title {
  overflow-wrap: anywhere;
}

.type-file-input {
  font-family: var(--hausl-font-ui);
  font-size: var(--hausl-text-body);
  font-weight: var(--hausl-weight-regular);
  line-height: var(--hausl-leading-body);
}

.type-file-input::file-selector-button {
  font-family: var(--hausl-font-ui);
  font-size: var(--hausl-text-label);
  font-weight: var(--hausl-weight-semibold);
  line-height: var(--hausl-leading-ui);
}

/* SVGs have their own size scale; text-size utilities must not size icons. */
.ui-icon--sm {
  width: var(--hausl-icon-sm);
  height: var(--hausl-icon-sm);
}

.ui-icon--md {
  width: var(--hausl-icon-md);
  height: var(--hausl-icon-md);
}

.ui-icon--lg {
  width: var(--hausl-icon-lg);
  height: var(--hausl-icon-lg);
}

/*
 * These narrowly scoped utilities let legacy markup express a second
 * semantic dimension without reintroducing Tailwind's arbitrary type scale.
 * They are intentionally defined here, beside the roles they refine.
 */
.type-weight-regular { font-weight: var(--hausl-weight-regular); }
.type-weight-medium { font-weight: var(--hausl-weight-medium); }
.type-weight-semibold { font-weight: var(--hausl-weight-semibold); }
.type-weight-bold { font-weight: var(--hausl-weight-bold); }

.type-leading-none { line-height: var(--hausl-leading-none); }
.type-leading-compact { line-height: var(--hausl-leading-compact); }
.type-leading-tight { line-height: var(--hausl-leading-heading); }
.type-leading-snug { line-height: var(--hausl-leading-title); }
.type-leading-normal { line-height: var(--hausl-leading-ui); }
.type-leading-relaxed { line-height: var(--hausl-leading-body); }
.type-leading-loose { line-height: var(--hausl-leading-body); }

.type-font-ui { font-family: var(--hausl-font-ui); }
.type-font-editorial { font-family: var(--hausl-font-editorial); }
.type-font-mono { font-family: var(--hausl-font-mono); }

/* Component contracts win when old markup carries a generic size utility. */
.ui-btn.type-label {
  font-family: var(--hausl-font-ui);
  font-size: var(--hausl-text-label);
  font-weight: var(--hausl-weight-semibold);
  line-height: var(--hausl-leading-ui);
}