@import "../../tokens/tokens.css";
@import "./fonts.css";

/* ==========================================================================
   CodaMetrix Living Styleguide
   --------------------------------------------------------------------------
   Every color comes from a var(--*) token defined in tokens.css.
   This file contains NO raw hex values. Non-color design tokens (type scale,
   spacing, motion, radius) that were not emitted into tokens.css are declared
   here, sourced verbatim from tokens/tokens.json.
   ========================================================================== */

:root {
  /* Type scale (tokens.type.size) */
  --size-headline: 3rem;
  --size-sub: 1.953rem;
  --size-quote: 1.563rem;
  --size-body: 1rem;
  --size-small: 0.8rem;
  --size-label: 0.75rem;
  --leading-tight: 1.1;
  --leading-normal: 1.5;
  --tracking-label: 0.04em;
  --weight-light: 300;
  --weight-regular: 400;
  --weight-semibold: 600;

  /* Spacing scale (tokens.space, base 4px) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* Grid (tokens.grid) */
  --grid-gutter: 24px;
  --content-max: 1440px;

  /* Radius (tokens.radius) */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-pill: 999px;

  /* Motion (tokens.motion) */
  --dur-fast: 180ms;
  --dur-base: 320ms;
  --dur-slow: 640ms;
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-decelerate: cubic-bezier(0, 0, 0.2, 1);
  --ease-assemble: cubic-bezier(0.2, 0.8, 0.2, 1);

  /* Layout */
  --nav-width: 240px;
}

/* ---- Reset / base ------------------------------------------------------- */
* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body), system-ui, sans-serif;
  font-weight: var(--weight-regular);
  font-size: var(--size-body);
  line-height: var(--leading-normal);
  color: var(--text-on-light);
  background: var(--bg-surface);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-display), system-ui, sans-serif;
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  margin: 0;
}

a { color: var(--color-purple); }

code, .mono {
  font-family: var(--font-label), ui-monospace, monospace;
  letter-spacing: var(--tracking-label);
}

/* ---- App shell: left nav + content -------------------------------------- */
.app {
  display: grid;
  grid-template-columns: var(--nav-width) 1fr;
  min-height: 100vh;
}

.nav {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  overflow-y: auto;
  padding: var(--space-6) var(--space-5);
  background: var(--color-text-black);
  color: var(--text-on-dark);
  border-right: var(--space-1) solid var(--color-deep-plum);
}

.nav__brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-7);
}
.nav__mark {
  width: var(--space-7);
  height: var(--space-7);
  flex: 0 0 auto;
}
.nav__brand-name {
  font-family: var(--font-display), sans-serif;
  font-weight: var(--weight-semibold);
  font-size: var(--size-body);
  color: var(--text-on-dark);
  line-height: var(--leading-tight);
}
.nav__brand-sub {
  font-family: var(--font-label), sans-serif;
  font-size: var(--size-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--warmth-lavender);
}

.nav ul { list-style: none; margin: 0; padding: 0; }
.nav li { margin: 0; }
.nav a {
  display: block;
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-1);
  border-radius: var(--radius-sm);
  font-family: var(--font-label), sans-serif;
  font-size: var(--size-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-medium-grey);
  text-decoration: none;
  border-left: var(--space-1) solid transparent;
  transition: color var(--dur-fast) var(--ease-standard),
              background var(--dur-fast) var(--ease-standard);
}
.nav a:hover {
  color: var(--text-on-dark);
  background: var(--color-deep-plum);
  border-left-color: var(--accent-cta);
}

.content {
  min-width: 0;
  max-width: var(--content-max);
}

/* ---- Sections ----------------------------------------------------------- */
.section {
  padding: var(--space-9) var(--space-8);
  border-bottom: 1px solid var(--color-light-grey);
}
.section:nth-child(even) { background: var(--color-white); }

.section__eyebrow {
  font-family: var(--font-label), sans-serif;
  font-size: var(--size-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-purple);
  margin-bottom: var(--space-2);
}
.section__title {
  font-size: var(--size-headline);
  color: var(--text-on-light);
}
.section__lead {
  max-width: 60ch;
  margin-top: var(--space-4);
  color: var(--text-on-light);
}
.subhead {
  font-size: var(--size-sub);
  margin: var(--space-8) 0 var(--space-4);
  color: var(--text-on-light);
}

/* Coral rule — the signature brand move */
.coral-rule {
  width: 56px;
  height: 4px;
  background: var(--accent-rule);
  border: 0;
  margin: var(--space-2) 0 0;
  border-radius: var(--radius-sm);
}

/* ---- Hero --------------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  padding: var(--space-9) var(--space-8);
  background: linear-gradient(135deg, var(--bg-field-from) 0%, var(--bg-field-to) 100%);
  color: var(--text-on-dark);
  border-bottom: 0;
}
.hero__wave {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  opacity: 0.55;
  pointer-events: none;
}
.hero__inner { position: relative; max-width: 60ch; }
.hero__eyebrow {
  font-family: var(--font-label), sans-serif;
  font-size: var(--size-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--warmth-lavender);
  margin-bottom: var(--space-3);
}
.hero h1 {
  font-size: var(--size-headline);
  color: var(--text-on-dark);
}
.hero__lead {
  margin-top: var(--space-5);
  font-size: var(--size-quote);
  font-family: var(--font-display), sans-serif;
  font-weight: var(--weight-light);
  color: var(--text-on-dark);
  opacity: 0.92;
}

/* ---- Color swatch grid -------------------------------------------------- */
.swatch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--grid-gutter);
  margin-top: var(--space-6);
}
.swatch {
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--color-light-grey);
  background: var(--color-white);
}
.swatch__chip { height: 88px; }
.swatch__meta { padding: var(--space-3) var(--space-4); }
.swatch__name {
  font-family: var(--font-display), sans-serif;
  font-weight: var(--weight-semibold);
  font-size: var(--size-small);
  color: var(--text-on-light);
}
.swatch__hex {
  font-family: var(--font-label), sans-serif;
  font-size: var(--size-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-purple);
}
.swatch__token {
  display: block;
  font-family: var(--font-label), sans-serif;
  font-size: var(--size-label);
  color: var(--text-on-light);
  opacity: 0.6;
}

/* ---- Type specimens ----------------------------------------------------- */
.specimens { margin-top: var(--space-6); }
.specimen {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: var(--space-5);
  align-items: baseline;
  padding: var(--space-5) 0;
  border-top: 1px solid var(--color-light-grey);
}
.specimen__meta {
  font-family: var(--font-label), sans-serif;
  font-size: var(--size-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-on-light);
  opacity: 0.65;
}
.specimen__meta strong { display: block; color: var(--color-purple); opacity: 1; }
.sp-headline { font-family: var(--font-display); font-weight: var(--weight-semibold); font-size: var(--size-headline); line-height: var(--leading-tight); }
.sp-sub      { font-family: var(--font-display); font-weight: var(--weight-semibold); font-size: var(--size-sub); line-height: var(--leading-tight); }
.sp-quote    { font-family: var(--font-display); font-weight: var(--weight-regular); font-size: var(--size-quote); }
.sp-body     { font-family: var(--font-body); font-weight: var(--weight-regular); font-size: var(--size-body); }
.sp-small    { font-family: var(--font-body); font-weight: var(--weight-regular); font-size: var(--size-small); }
.sp-label    { font-family: var(--font-label); font-weight: var(--weight-regular); font-size: var(--size-label); letter-spacing: var(--tracking-label); text-transform: uppercase; }

/* ---- Spacing scale demo ------------------------------------------------- */
.space-scale { margin-top: var(--space-6); display: grid; gap: var(--space-3); }
.space-row { display: flex; align-items: center; gap: var(--space-4); }
.space-bar { height: var(--space-4); background: var(--color-purple); border-radius: var(--radius-sm); }
.space-row code { font-size: var(--size-small); color: var(--text-on-light); }

/* ---- Grid demo ---------------------------------------------------------- */
.grid-demo {
  margin-top: var(--space-6);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--grid-gutter);
}
.grid-demo > span {
  background: var(--warmth-lavender);
  color: var(--text-on-light);
  text-align: center;
  font-family: var(--font-label), sans-serif;
  font-size: var(--size-label);
  padding: var(--space-3) 0;
  border-radius: var(--radius-sm);
}

/* ---- Generic card grid -------------------------------------------------- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--grid-gutter);
  margin-top: var(--space-6);
}
.card {
  border: 1px solid var(--color-light-grey);
  border-radius: var(--radius-md);
  background: var(--color-white);
  padding: var(--space-6);
}
.card__label {
  font-family: var(--font-label), sans-serif;
  font-size: var(--size-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-purple);
  margin-bottom: var(--space-2);
}
.card__note {
  font-size: var(--size-small);
  color: var(--text-on-light);
  opacity: 0.7;
  margin-top: var(--space-4);
}
.card__demo {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 140px;
  padding: var(--space-5);
  background: var(--bg-surface);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-4);
}
.card__demo--dark {
  background: linear-gradient(135deg, var(--bg-field-from) 0%, var(--bg-field-to) 100%);
}

/* ---- Component renderings ----------------------------------------------- */
.cmp-headline { font-family: var(--font-display); font-weight: var(--weight-semibold); font-size: var(--size-sub); color: var(--text-on-light); line-height: var(--leading-tight); }
.card__demo--dark .cmp-headline { color: var(--text-on-dark); }

.cta-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  background: var(--accent-cta);
  color: var(--text-on-dark);
  border: 0;
  border-radius: var(--radius-pill);
  font-family: var(--font-display), sans-serif;
  font-weight: var(--weight-semibold);
  font-size: var(--size-small);
  cursor: pointer;
  transition: filter var(--dur-fast) var(--ease-standard),
              transform var(--dur-fast) var(--ease-standard);
}
.cta-pill:hover { filter: brightness(0.88); }
.cta-pill:active { transform: translateY(1px); }
/* Outline must contrast the coral pill itself — white reads against coral. */
.cta-pill:focus-visible { outline: 2px solid var(--text-on-dark); outline-offset: 2px; }

.stat__figure {
  font-family: var(--font-display), sans-serif;
  font-weight: var(--weight-light);
  font-size: 4rem;
  line-height: 1;
  color: var(--color-purple);
}
.card__demo--dark .stat__figure { color: var(--text-on-dark); }
.stat__desc { font-size: var(--size-small); margin-top: var(--space-3); color: var(--text-on-light); }
/* Full opacity: small white text over the purple gradient end must clear AA. */
.card__demo--dark .stat__desc { color: var(--text-on-dark); opacity: 1; }

.quote-card { text-align: left; }
.quote-card__text {
  font-family: var(--font-display), sans-serif;
  font-weight: var(--weight-regular);
  font-size: var(--size-quote);
  line-height: var(--leading-tight);
  color: var(--text-on-light);
  margin: var(--space-3) 0;
}
.card__demo--dark .quote-card__text { color: var(--text-on-dark); }
.quote-card__attr {
  font-family: var(--font-label), sans-serif;
  font-size: var(--size-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-on-light);
  opacity: 0.7;
}
/* Full opacity: small white label text over the purple gradient must clear AA. */
.card__demo--dark .quote-card__attr { color: var(--text-on-dark); opacity: 1; }

.section-tag {
  display: inline-block;
  position: relative;
  padding: var(--space-1) var(--space-3);
  background: var(--color-purple);
  color: var(--text-on-dark);
  font-family: var(--font-label), sans-serif;
  font-size: var(--size-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  /* 45-degree cut top-right corner, cut-ratio applied to height */
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
}
.section-tag--maroon { background: var(--color-dark-maroon); }

/* proof-point list */
.proof-list { list-style: none; margin: 0; padding: 0; text-align: left; width: 100%; }
.proof-list li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  font-family: var(--font-label), sans-serif;
  font-size: var(--size-body);
  color: var(--text-on-light);
}
.card__demo--dark .proof-list li { color: var(--text-on-dark); }
.proof-list li::before {
  content: "";
  flex: 0 0 auto;
  width: 16px;
  height: 2px;
  background: var(--accent-rule);
}

/* ---- Code-block role demos ---------------------------------------------- */
.role-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--grid-gutter);
  margin-top: var(--space-6);
}
.role { text-align: center; }
.role svg { width: 120px; height: 120px; }
.role__name { font-family: var(--font-display); font-weight: var(--weight-semibold); font-size: var(--size-body); margin-top: var(--space-3); color: var(--text-on-light); }
.role__desc { font-size: var(--size-small); color: var(--text-on-light); opacity: 0.7; margin-top: var(--space-1); }

/* ---- Photography masked placeholder ------------------------------------- */
.photo-mask {
  width: 280px;
  height: 360px;
  background:
    repeating-linear-gradient(135deg, var(--color-medium-grey) 0 18px, var(--color-light-grey) 18px 36px);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--text-on-light);
  font-family: var(--font-label), sans-serif;
  font-size: var(--size-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  /* Code Block geometry: 45-degree cut, cut-ratio 0.28 on shorter (280) edge -> ~78px */
  clip-path: polygon(0 0, calc(100% - 78px) 0, 100% 78px, 100% 100%, 0 100%);
}

/* ---- Pixel wave embeds -------------------------------------------------- */
.wave-embed {
  margin-top: var(--space-5);
  background: linear-gradient(135deg, var(--bg-field-from) 0%, var(--bg-field-to) 100%);
  border-radius: var(--radius-md);
  padding: var(--space-6);
}
.wave-embed--light { background: var(--color-light-grey); }
.wave-embed svg { width: 100%; height: auto; display: block; }
.wave-embed__cap {
  font-family: var(--font-label), sans-serif;
  font-size: var(--size-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-on-dark);
  margin-bottom: var(--space-3);
}
.wave-embed--light .wave-embed__cap { color: var(--text-on-light); }

/* ---- Media kit tiles ---------------------------------------------------- */
.media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--grid-gutter);
  margin-top: var(--space-6);
}
.media-tile {
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--color-light-grey);
  background: var(--color-white);
}
.media-tile__head {
  padding: var(--space-5);
  background: linear-gradient(135deg, var(--bg-field-from) 0%, var(--bg-field-to) 100%);
  color: var(--text-on-dark);
}
.media-tile__kind { font-family: var(--font-display); font-weight: var(--weight-semibold); font-size: var(--size-sub); }
.media-tile__body { padding: var(--space-5); }
.media-tile__body ul { margin: 0; padding-left: var(--space-5); }
.media-tile__body li { font-size: var(--size-small); color: var(--text-on-light); margin-bottom: var(--space-1); }

/* ---- Logo demo ---------------------------------------------------------- */
.logo-versions { display: flex; flex-wrap: wrap; gap: var(--grid-gutter); margin-top: var(--space-6); }
.logo-chip {
  flex: 1 1 220px;
  border: 1px solid var(--color-light-grey);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  text-align: center;
}
.logo-chip--reversed { background: linear-gradient(135deg, var(--bg-field-from) 0%, var(--bg-field-to) 100%); }
.logo-mark { width: 64px; height: 64px; margin: 0 auto var(--space-3); }
.logo-wordmark {
  font-family: var(--font-display), sans-serif;
  font-weight: var(--weight-semibold);
  font-size: var(--size-sub);
  color: var(--color-logo-black);
}
.logo-chip--reversed .logo-wordmark { color: var(--text-on-dark); }
.logo-caption {
  font-family: var(--font-label), sans-serif;
  font-size: var(--size-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-on-light);
  opacity: 0.65;
  margin-top: var(--space-3);
}
.logo-chip--reversed .logo-caption { color: var(--text-on-dark); opacity: 0.8; }

/* ---- Iconography demo --------------------------------------------------- */
.icon-row { display: flex; gap: var(--space-6); align-items: flex-end; margin-top: var(--space-6); flex-wrap: wrap; }
.icon-row svg { color: var(--text-on-light); }
.icon-spec { text-align: center; }
.icon-spec span { display: block; font-family: var(--font-label); font-size: var(--size-label); letter-spacing: var(--tracking-label); margin-top: var(--space-2); color: var(--text-on-light); opacity: 0.7; }

/* ---- Motion demos ------------------------------------------------------- */
.motion-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--grid-gutter);
  margin-top: var(--space-6);
}
.demo {
  border: 1px solid var(--color-light-grey);
  border-radius: var(--radius-md);
  background: var(--color-white);
  overflow: hidden;
}
.demo__stage {
  position: relative;
  height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--bg-field-from) 0%, var(--bg-field-to) 100%);
  overflow: hidden;
}
.demo__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
}
.demo__cap {
  font-family: var(--font-label), sans-serif;
  font-size: var(--size-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-on-light);
  opacity: 0.7;
}
.demo__title {
  font-family: var(--font-display), sans-serif;
  font-weight: var(--weight-semibold);
  font-size: var(--size-small);
  color: var(--text-on-light);
  margin: 0 0 var(--space-1);
}
.replay {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: var(--accent-cta);
  color: var(--text-on-dark);
  border: 0;
  border-radius: var(--radius-pill);
  font-family: var(--font-display), sans-serif;
  font-weight: var(--weight-semibold);
  font-size: var(--size-label);
  cursor: pointer;
  transition: filter var(--dur-fast) var(--ease-standard);
}
.replay:hover { filter: brightness(0.9); }
.replay:focus-visible { outline: 2px solid var(--text-on-dark); outline-offset: 2px; }

/* demo (a) code-block cluster */
.cluster-block { position: absolute; width: 56px; height: 56px; }
.cluster-block svg { width: 100%; height: 100%; display: block; }

/* demo (c) title card */
.titlecard { text-align: left; padding: var(--space-6); width: 80%; }
.titlecard__h { font-family: var(--font-display); font-weight: var(--weight-semibold); font-size: var(--size-sub); color: var(--text-on-dark); line-height: var(--leading-tight); }
.titlecard__rule { height: 4px; width: 56px; background: var(--accent-cta); margin-top: var(--space-3); transform-origin: left center; }

/* demo (d) proof points */
.proofstack { list-style: none; margin: 0; padding: 0; width: 80%; }
.proofstack li {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-2) 0;
  color: var(--text-on-dark);
  font-family: var(--font-body), sans-serif;
  font-size: var(--size-body);
}
.proofstack li::before { content: ""; width: 16px; height: 2px; background: var(--accent-cta); flex: 0 0 auto; }

/* demo (b) wave2 stage */
.wave2-stage svg { width: 86%; height: auto; }

/* ---- Footer wave -------------------------------------------------------- */
.foot {
  padding: var(--space-7) var(--space-8);
  background: var(--color-text-black);
  color: var(--text-on-dark);
}
.foot__note { font-family: var(--font-label); font-size: var(--size-label); letter-spacing: var(--tracking-label); text-transform: uppercase; opacity: 0.7; }

/* ---- Responsive --------------------------------------------------------- */
@media (max-width: 768px) {
  .app { grid-template-columns: 1fr; }
  .nav { position: static; height: auto; }
  .section { padding: var(--space-7) var(--space-5); }
  .hero { padding: var(--space-7) var(--space-5); }
  .specimen { grid-template-columns: 1fr; gap: var(--space-2); }
  .section__title, .hero h1 { font-size: var(--size-sub); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: 0.001ms !important; }
}