/*
 * iTool family skeleton. Shared by itool.tech and every product site.
 *
 * Source of truth: itool-tech/design/family/family.css.
 * Copied into each product repo by design/family/sync.sh, so no site loads
 * it cross-origin. Edit here, run sync.sh, never edit the copies.
 *
 * A site picks its product by setting data-product on <html>:
 *   <html data-product="transeen">
 * and then uses --fam-accent / --fam-accent-fill / --fam-accent-ink.
 *
 * Where a product's hue goes, on every site: the second phrase of the hero
 * title, focus rings, text selection, and highlight marks in figures.
 * Primary buttons stay ink on every site: white text on the fills is below
 * 4.5:1, and ink buttons are what makes the sites read as one family.
 * Light mode: <html data-theme="light"> (or the OS preference when the
 * site sets data-theme="auto").
 */

:root {
  /* Neutrals */
  --fam-canvas:        #09090b;
  --fam-surface:       #111113;
  --fam-raised:        #18181b;
  --fam-line:          rgb(255 255 255 / 0.08);
  --fam-line-strong:   rgb(255 255 255 / 0.14);
  --fam-text:          #f4f4f5;
  --fam-text-2:        #a1a1aa;
  --fam-text-3:        #8b8b94;

  /* Product hues: same OKLCH lightness/chroma, different hue. */
  --fam-vibecheck:     #fc8f6e;  --fam-vibecheck-fill:    #d15227;  --fam-vibecheck-light:    #ad411c;
  --fam-stupidmirror:  #e4a339;  --fam-stupidmirror-fill: #b96c00;  --fam-stupidmirror-light: #995700;
  --fam-saylane:       #4fcc92;  --fam-saylane-fill:      #009d5b;  --fam-saylane-light:      #008149;
  --fam-transeen:      #30c0f8;  --fam-transeen-fill:     #008fd1;  --fam-transeen-light:     #0075ad;
  /* LinkShell keeps its own hues: apps/client/src/theme/brand-colors.json in linkshell-release. */
  --fam-linkshell:     #8d9bff;  --fam-linkshell-fill:    #5263e8;  --fam-linkshell-light:    #4c5fd5;

  /* iTool itself is neutral ink. */
  --fam-accent:        #f4f4f5;
  --fam-accent-fill:   #f4f4f5;
  --fam-accent-ink:    #09090b;

  /* Shape */
  --fam-r-sm: 6px;
  --fam-r-md: 8px;
  --fam-r-lg: 12px;

  /* Type */
  --fam-sans: "Geist", "Geist Fallback", -apple-system, "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", "Microsoft YaHei", sans-serif;
  --fam-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Motion */
  --fam-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --fam-ease-spring: cubic-bezier(0.22, 1, 0.36, 1);
  --fam-enter: 240ms;
  --fam-reveal: 480ms;
  --fam-quick: 140ms;

  color-scheme: dark;
}

html[data-product="vibecheck"]    { --fam-accent: var(--fam-vibecheck);    --fam-accent-fill: var(--fam-vibecheck-fill); }
html[data-product="stupidmirror"] { --fam-accent: var(--fam-stupidmirror); --fam-accent-fill: var(--fam-stupidmirror-fill); }
html[data-product="saylane"]      { --fam-accent: var(--fam-saylane);      --fam-accent-fill: var(--fam-saylane-fill); }
html[data-product="transeen"]     { --fam-accent: var(--fam-transeen);     --fam-accent-fill: var(--fam-transeen-fill); }
html[data-product="linkshell"]    { --fam-accent: var(--fam-linkshell);    --fam-accent-fill: var(--fam-linkshell-fill); }
html[data-product]:not([data-product="itool"]) { --fam-accent-ink: #ffffff; }

html[data-theme="light"] {
  --fam-canvas:      #fafafa;
  --fam-surface:     #ffffff;
  --fam-raised:      #f4f4f5;
  --fam-line:        rgb(9 9 11 / 0.09);
  --fam-line-strong: rgb(9 9 11 / 0.16);
  --fam-text:        #09090b;
  --fam-text-2:      #52525b;
  --fam-text-3:      #6b6b74;
  --fam-accent:      #09090b;
  --fam-accent-fill: #09090b;
  --fam-accent-ink:  #fafafa;
  color-scheme: light;
}
html[data-theme="light"][data-product="vibecheck"]    { --fam-accent: var(--fam-vibecheck-light);    --fam-accent-fill: var(--fam-vibecheck-fill); }
html[data-theme="light"][data-product="stupidmirror"] { --fam-accent: var(--fam-stupidmirror-light); --fam-accent-fill: var(--fam-stupidmirror-fill); }
html[data-theme="light"][data-product="saylane"]      { --fam-accent: var(--fam-saylane-light);      --fam-accent-fill: var(--fam-saylane-fill); }
html[data-theme="light"][data-product="transeen"]     { --fam-accent: var(--fam-transeen-light);     --fam-accent-fill: var(--fam-transeen-fill); }
html[data-theme="light"][data-product="linkshell"]    { --fam-accent: var(--fam-linkshell-light);    --fam-accent-fill: var(--fam-linkshell-fill); }
html[data-theme="light"][data-product]:not([data-product="itool"]) { --fam-accent-ink: #ffffff; }

/* Primitives. Every site may use these class names; none of them is required. */

.fam-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px;
  border-radius: var(--fam-r-md);
  border: 1px solid var(--fam-line-strong);
  background: var(--fam-surface);
  color: var(--fam-text);
  font: 500 14px/1 var(--fam-sans);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--fam-quick) var(--fam-ease), border-color var(--fam-quick) var(--fam-ease), transform var(--fam-quick) var(--fam-ease);
}
.fam-btn:hover { background: var(--fam-raised); border-color: color-mix(in srgb, var(--fam-text) 22%, transparent); }
.fam-btn:active { transform: translateY(1px) scale(0.985); }
.fam-btn:focus-visible { outline: 2px solid var(--fam-accent); outline-offset: 2px; }
.fam-btn[data-variant="primary"] {
  background: var(--fam-text);
  border-color: transparent;
  color: var(--fam-canvas);
}
.fam-btn[data-variant="primary"]:hover { background: #ffffff; }
html[data-theme="light"] .fam-btn[data-variant="primary"]:hover { background: #27272a; }

/* Hairline ledger: replaces boxed card grids and badge clouds across the family. */
.fam-ledger {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  border-top: 1px solid var(--fam-line);
}
.fam-ledger > * {
  padding: 24px 24px 0 0;
}
.fam-ledger > * + * {
  padding-left: 24px;
  border-left: 1px solid var(--fam-line);
}
@media (max-width: 760px) {
  .fam-ledger { grid-template-columns: 1fr; }
  .fam-ledger > * { padding: 20px 0; }
  .fam-ledger > * + * { padding-left: 0; border-left: 0; border-top: 1px solid var(--fam-line); }
}

/* The hero's second phrase carries the product hue. */
.fam-hue { color: var(--fam-accent); }
::selection { background: color-mix(in srgb, var(--fam-accent) 35%, transparent); }

.fam-card {
  background: var(--fam-surface);
  border: 1px solid var(--fam-line);
  border-radius: var(--fam-r-lg);
}

.fam-kbd {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: var(--fam-r-sm);
  border: 1px solid var(--fam-line-strong);
  border-bottom-width: 2px;
  font: 500 12px/1 var(--fam-mono);
  color: var(--fam-text-2);
}

/* App icon tile: each product's own icon image, untouched. */
.fam-icon {
  display: block;
  width: 48px;
  height: 48px;
  flex: none;
  transition: opacity var(--fam-enter) var(--fam-ease), filter var(--fam-enter) var(--fam-ease), transform var(--fam-enter) var(--fam-ease);
}
.fam-icon[data-off] { opacity: 0.28; filter: grayscale(1); transform: scale(0.94); }

/* Footer wordmark: the product's name, nearly full width, in a tone just off the ground
   (LinkShell's footer, shared). Put it last in the footer, which clips it:
     <p class="fam-wordmark" aria-hidden="true" translate="no">Transeen</p>
   --fam-wordmark-em is the name's width in em at this weight and tracking, so every
   name fills the same width and no name grows past 300px tall. */
.fam-wordmark {
  display: block;
  margin: 48px 0 0;
  color: var(--fam-wordmark);
  font: 700 min(300px, calc(min(79vw, 1215px) / var(--fam-wordmark-em, 4.05)))/0.78 var(--fam-sans);
  letter-spacing: -0.06em;
  text-align: center;
  white-space: nowrap;
  user-select: none;
  pointer-events: none;
}
:root { --fam-wordmark: #18181b; }
html[data-theme="light"] { --fam-wordmark: #e9e9eb; }
html[data-product="linkshell"]    { --fam-wordmark-em: 4.05; }
html[data-product="transeen"]     { --fam-wordmark-em: 4.02; }
html[data-product="saylane"]      { --fam-wordmark-em: 3.51; }
html[data-product="stupidmirror"] { --fam-wordmark-em: 5.51; }
html[data-product="vibecheck"]    { --fam-wordmark-em: 4.81; }
html[data-product="itool"], html:not([data-product]) { --fam-wordmark-em: 2.01; }

/* Entrances: add .fam-enter; stagger with style="--i: 2". */
@keyframes fam-enter {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
.fam-enter {
  animation: fam-enter var(--fam-enter) var(--fam-ease) both;
  animation-delay: calc(var(--i, 0) * 40ms);
}

@media (prefers-reduced-motion: reduce) {
  .fam-enter { animation: none; }
  .fam-btn, .fam-icon { transition: none; }
}