/*
 * Tiny Embers Design System
 * Reusable brand foundations and UI components for Tiny Embers websites.
 * Components are prefixed with `te-` to avoid collisions with project styles.
 */

@font-face {
  font-family: "Minecrafted Seven";
  src: url("MinecraftedSeven-Regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Minecrafted Five";
  src: url("MinecraftedFive-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root {
  /* Brand colours */
  --te-ember: #ea3b42;
  --te-ember-light: #ff6269;
  --te-ember-dark: #7f2026;
  --te-blue: #5da8ff;
  --te-green: #69db99;
  --te-pink: #e864a8;
  --te-yellow: #ffd23f;

  /* Surfaces and text */
  --te-bg: #08090d;
  --te-surface: #0d1016;
  --te-surface-raised: #131720;
  --te-text: #f5f6fa;
  --te-text-muted: #aeb3c0;
  --te-border: rgba(255, 255, 255, .14);

  /* Type */
  --te-font-display: "Minecrafted Seven", "Courier New", monospace;
  --te-font-ui: "Minecrafted Five", "Minecrafted Seven", "Courier New", monospace;

  /* Layout */
  --te-container: 1600px;
  --te-page-gutter: clamp(20px, 5vw, 80px);
  --te-section-space: clamp(72px, 9vw, 144px);
  --te-grid-gap: clamp(16px, 2vw, 28px);
  --te-control-height: 50px;
  --te-corner: 2px;
}

/* Opt-in page foundation */
.te-page {
  color-scheme: dark;
  margin: 0;
  overflow-x: hidden;
  color: var(--te-text);
  background: var(--te-bg);
  font-family: var(--te-font-display);
  -webkit-font-smoothing: antialiased;
}

.te-page *,
.te-page *::before,
.te-page *::after { box-sizing: border-box; }

.te-page a { color: inherit; text-decoration: none; }
.te-page img { display: block; max-width: 100%; }
.te-page button,
.te-page input,
.te-page textarea,
.te-page select { color: inherit; font: inherit; }

.te-page :focus-visible {
  outline: 3px solid var(--te-ember-light);
  outline-offset: 4px;
}

.te-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Layout */
.te-container {
  width: min(100%, var(--te-container));
  margin-inline: auto;
  padding-inline: var(--te-page-gutter);
}

.te-section { padding-block: var(--te-section-space); }

.te-grid {
  display: grid;
  grid-template-columns: repeat(var(--te-columns, 3), minmax(0, 1fr));
  gap: var(--te-grid-gap);
}

.te-stack { display: flex; flex-direction: column; gap: var(--te-stack-gap, 20px); }
.te-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--te-cluster-gap, 12px); }

/* Typography */
.te-kicker {
  margin: 0 0 20px;
  color: var(--te-accent, var(--te-ember));
  font: 400 clamp(.72rem, 1.2vw, .88rem)/1 var(--te-font-ui);
  letter-spacing: .055em;
  text-transform: uppercase;
}

.te-display {
  margin: 0;
  color: var(--te-text);
  font: 400 clamp(3rem, 7vw, 7.5rem)/.94 var(--te-font-display);
  letter-spacing: -.035em;
}

.te-heading {
  margin: 0;
  color: var(--te-text);
  font: 400 clamp(2rem, 4vw, 4.5rem)/1 var(--te-font-display);
  letter-spacing: -.025em;
}

.te-copy {
  max-width: 70ch;
  margin: 0;
  color: var(--te-text-muted);
  font: 400 clamp(.92rem, 1.25vw, 1.08rem)/1.75 var(--te-font-display);
}

/* Buttons */
.te-button {
  --te-button-accent: var(--te-ember);
  min-height: var(--te-control-height);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 4px 19px 0;
  border: 1px solid var(--te-border);
  border-radius: var(--te-corner);
  color: var(--te-text);
  background: var(--te-surface);
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .28);
  cursor: pointer;
  font: 400 .78rem/1 var(--te-font-display);
  letter-spacing: .02em;
  text-transform: uppercase;
  transition: transform .16s ease, border-color .16s ease, filter .16s ease;
}

.te-button:hover { transform: translateY(-2px); border-color: var(--te-button-accent); }
.te-button:active { transform: translateY(0); }

.te-button--primary {
  border-color: var(--te-button-accent);
  color: #fff;
  background: var(--te-button-accent);
}

.te-button--ghost { color: var(--te-button-accent); }
.te-button--blue { --te-button-accent: var(--te-blue); }
.te-button--green { --te-button-accent: var(--te-green); }
.te-button--pink { --te-button-accent: var(--te-pink); }
.te-button--yellow { --te-button-accent: var(--te-yellow); color: #111318; }

/* Pills */
.te-pill {
  --te-pill-colour: var(--te-ember-light);
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 4px 11px 1px;
  border: 1px solid color-mix(in srgb, var(--te-pill-colour) 48%, transparent);
  border-radius: var(--te-corner);
  color: var(--te-pill-colour);
  background: color-mix(in srgb, var(--te-pill-colour) 11%, var(--te-bg));
  font: 400 .68rem/1 var(--te-font-ui);
  letter-spacing: .045em;
  text-transform: uppercase;
}

.te-pill--blue { --te-pill-colour: var(--te-blue); }
.te-pill--green { --te-pill-colour: var(--te-green); }
.te-pill--pink { --te-pill-colour: var(--te-pink); }
.te-pill--yellow { --te-pill-colour: var(--te-yellow); }

/* Cards */
.te-card {
  --te-card-accent: var(--te-ember);
  position: relative;
  min-width: 0;
  padding: clamp(22px, 3vw, 38px);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--te-card-accent) 44%, var(--te-border));
  border-radius: var(--te-corner);
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--te-card-accent) 10%, transparent), transparent 45%),
    var(--te-surface);
  box-shadow: 0 18px 55px color-mix(in srgb, var(--te-card-accent) 10%, transparent);
}

.te-card--blue { --te-card-accent: var(--te-blue); }
.te-card--green { --te-card-accent: var(--te-green); }
.te-card--pink { --te-card-accent: var(--te-pink); }
.te-card--yellow { --te-card-accent: var(--te-yellow); }

.te-card__id {
  display: block;
  margin-bottom: clamp(48px, 7vw, 100px);
  color: var(--te-text-muted);
  font: 400 .72rem/1 var(--te-font-ui);
  letter-spacing: .04em;
  text-transform: uppercase;
}

.te-card__title {
  margin: 0 0 20px;
  color: var(--te-card-accent);
  font: 400 clamp(1.8rem, 3.4vw, 3.6rem)/1.03 var(--te-font-display);
}

.te-card__copy {
  margin: 0;
  color: var(--te-text-muted);
  font: 400 .92rem/1.65 var(--te-font-display);
}

/* Header */
.te-header {
  min-height: 66px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 8px 12px;
  border: 1px solid var(--te-border);
  border-radius: var(--te-corner);
  background: rgba(8, 9, 13, .9);
}

.te-header__brand {
  width: 48px;
  height: 48px;
  display: grid;
  flex: 0 0 48px;
  place-items: center;
  border: 1px solid var(--te-border);
  background: var(--te-surface-raised);
}

.te-header__brand img { width: 27px; height: 27px; object-fit: contain; }
.te-header__nav { display: flex; align-items: center; justify-content: flex-end; gap: clamp(14px, 2.5vw, 34px); }
.te-header__nav a { color: var(--te-text-muted); font: 400 .72rem/1 var(--te-font-ui); text-transform: uppercase; }
.te-header__nav a:hover,
.te-header__nav a[aria-current="page"] { color: var(--te-text); }

/* Forms */
.te-field { display: grid; gap: 9px; }
.te-field > span { color: var(--te-text); font: 400 .7rem/1 var(--te-font-ui); }

.te-input {
  width: 100%;
  min-height: var(--te-control-height);
  padding: 13px 15px;
  border: 1px solid var(--te-border);
  border-radius: var(--te-corner);
  outline: 0;
  color: var(--te-text);
  background: var(--te-bg);
  font: 400 .82rem/1.5 var(--te-font-display);
  transition: border-color .16s ease, box-shadow .16s ease;
}

textarea.te-input { min-height: 150px; resize: vertical; }
.te-input:focus { border-color: var(--te-ember); box-shadow: 0 0 0 3px rgba(234, 59, 66, .13); }

/* Footer */
.te-footer {
  padding-block: 36px;
  border-top: 1px solid var(--te-border);
  color: var(--te-text-muted);
  background: var(--te-surface);
  font: 400 .68rem/1.7 var(--te-font-ui);
}

.te-footer__inner {
  width: min(100%, var(--te-container));
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-inline: auto;
  padding-inline: var(--te-page-gutter);
}

/* Accent helpers */
.te-accent-red { --te-accent: var(--te-ember); }
.te-accent-blue { --te-accent: var(--te-blue); }
.te-accent-green { --te-accent: var(--te-green); }
.te-accent-pink { --te-accent: var(--te-pink); }
.te-accent-yellow { --te-accent: var(--te-yellow); }

@media (max-width: 760px) {
  :root {
    --te-page-gutter: 16px;
    --te-section-space: 68px;
  }

  .te-grid { grid-template-columns: 1fr; }
  .te-header { align-items: flex-start; }
  .te-header__nav { flex-wrap: wrap; gap: 14px 18px; padding-block: 14px; }
  .te-display { font-size: clamp(2.75rem, 15vw, 5rem); }
  .te-button { min-height: 46px; padding-inline: 15px; font-size: .7rem; }
  .te-pill { min-height: 30px; padding: 3px 9px 0; font-size: .6rem; }
}

@media (prefers-reduced-motion: reduce) {
  .te-page *,
  .te-page *::before,
  .te-page *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}