/* =========================================================================
   Hone Brand Kit — stylesheet entry point.
   Everything a design needs (fonts, colour tokens, type tokens, logos, base
   styles) is reachable from this file's @import closure. Link ONLY this file.
   ========================================================================= */

@import url("./tokens/colors.css");
@import url("./tokens/typography.css");
@import url("./tokens/logos.css");

/* ---- Fonts -------------------------------------------------------------- */
/* Sofia Pro is the primary brand family (Bold headings / Regular body). */
@font-face {
  font-family: "Sofia Pro";
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  src: url("./fonts/SofiaPro-Light.otf") format("opentype");
}
@font-face {
  font-family: "Sofia Pro";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("./fonts/SofiaPro-Regular.otf") format("opentype");
}
@font-face {
  font-family: "Sofia Pro";
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url("./fonts/SofiaPro-Medium.otf") format("opentype");
}
@font-face {
  font-family: "Sofia Pro";
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url("./fonts/SofiaPro-Bold.otf") format("opentype");
}

/* ---- Base --------------------------------------------------------------- */
:root {
  --hone-radius-sm: 6px;
  --hone-radius-md: 10px;
  --hone-radius-lg: 16px;
  --hone-radius-pill: 999px;

  --hone-space-xs: 4px;
  --hone-space-sm: 8px;
  --hone-space-md: 16px;
  --hone-space-lg: 24px;
  --hone-space-xl: 40px;
  --hone-space-2xl: 64px;

  --hone-shadow-sm: 0 1px 2px rgba(25, 32, 48, 0.06), 0 1px 3px rgba(25, 32, 48, 0.10);
  --hone-shadow-md: 0 4px 12px rgba(25, 32, 48, 0.10);
  --hone-shadow-lg: 0 12px 32px rgba(25, 32, 48, 0.14);
}

body {
  font-family: var(--hone-font-body);
  font-weight: var(--hone-weight-body);
  font-size: var(--hone-text-base);
  line-height: var(--hone-leading-body);
  color: var(--hone-text);
  background: var(--hone-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--hone-font-heading);
  font-weight: var(--hone-weight-heading);
  line-height: var(--hone-leading-heading);
  color: var(--hone-text);
  letter-spacing: var(--hone-tracking-tight);
  margin: 0 0 0.5em;
}
h1 { font-size: var(--hone-text-4xl); line-height: var(--hone-leading-tight); }
h2 { font-size: var(--hone-text-3xl); }
h3 { font-size: var(--hone-text-2xl); }
h4 { font-size: var(--hone-text-xl); }
h5 { font-size: var(--hone-text-lg); }
h6 { font-size: var(--hone-text-base); }

a { color: var(--hone-accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Eyebrow / small-caps label, as used throughout Hone decks (e.g. "BUILD", "TEST") */
.hone-eyebrow {
  font-weight: var(--hone-weight-bold);
  font-size: var(--hone-text-sm);
  letter-spacing: var(--hone-tracking-wide);
  text-transform: uppercase;
  color: var(--hone-text-muted);
}

/* ---- Buttons ------------------------------------------------------------ */
.hone-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--hone-space-sm);
  font-family: var(--hone-font-sans);
  font-weight: var(--hone-weight-bold);
  font-size: var(--hone-text-base);
  line-height: 1;
  padding: 12px 24px;
  border-radius: var(--hone-radius-md);
  border: 2px solid transparent;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.hone-btn--primary { background: var(--hone-red); color: var(--hone-white); }
.hone-btn--primary:hover { background: #ff3b3b; }
.hone-btn--secondary { background: var(--hone-navy); color: var(--hone-white); }
.hone-btn--secondary:hover { background: var(--hone-navy-medium); }
.hone-btn--ghost { background: transparent; color: var(--hone-red); border-color: var(--hone-red); }
.hone-btn--ghost:hover { background: var(--hone-red); color: var(--hone-white); }
.hone-btn:focus-visible { outline: 3px solid var(--hone-focus-ring); outline-offset: 2px; }

/* ---- Card --------------------------------------------------------------- */
.hone-card {
  background: var(--hone-surface);
  border: 1px solid var(--hone-border);
  border-radius: var(--hone-radius-lg);
  box-shadow: var(--hone-shadow-sm);
  padding: var(--hone-space-lg);
}

/* ---- Logo helpers ------------------------------------------------------- */
/* Drop a Hone logo anywhere: <span class="hone-logo hone-logo--horizontal-red"></span>
   Width comes from you; the aspect ratio is preserved. Prefer the RED logo unless
   it sits on a red background (use white/navy there). Keep on clean backgrounds. */
.hone-logo {
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.hone-logo--horizontal-red   { background-image: var(--hone-logo-horizontal-red);   aspect-ratio: 506.46 / 140; }
.hone-logo--horizontal-white { background-image: var(--hone-logo-horizontal-white); aspect-ratio: 506.46 / 140; }
.hone-logo--horizontal-navy  { background-image: var(--hone-logo-horizontal-navy);  aspect-ratio: 506.46 / 140; }
.hone-logo--vertical-red     { background-image: var(--hone-logo-vertical-red);     aspect-ratio: 290.97 / 246.81; }
.hone-logo--vertical-white   { background-image: var(--hone-logo-vertical-white);   aspect-ratio: 290.97 / 246.81; }
.hone-logo--mark-red         { background-image: var(--hone-mark-red);              aspect-ratio: 1 / 1; }
.hone-logo--mark-white       { background-image: var(--hone-mark-white);            aspect-ratio: 1 / 1; }
.hone-logo--mark-navy        { background-image: var(--hone-mark-navy);             aspect-ratio: 1 / 1; }