/* Fabula — Quiet Intelligence tokens (shared across patterns) */

:root {
  /* Base: warm-neutral off-white × sumi */
  --fb-bg: oklch(0.985 0.003 80);
  --fb-bg-2: oklch(0.968 0.004 80);
  --fb-bg-3: oklch(0.945 0.005 80);
  --fb-line: oklch(0.88 0.006 80);
  --fb-line-2: oklch(0.78 0.008 80);

  --fb-ink: oklch(0.22 0.008 260);
  --fb-ink-2: oklch(0.40 0.008 260);
  --fb-ink-3: oklch(0.58 0.006 260);
  --fb-ink-4: oklch(0.74 0.005 260);

  /* Quiet accent — indigo-leaning, low chroma */
  --fb-accent: oklch(0.48 0.06 250);
  --fb-accent-soft: oklch(0.92 0.015 250);

  /* Fonts */
  --fb-serif: "Shippori Mincho", "Noto Serif JP", "Hiragino Mincho ProN", serif;
  --fb-sans: "Inter", "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --fb-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Type scale (desktop) */
  --fb-hero: clamp(44px, 6.2vw, 88px);
  --fb-h1: clamp(32px, 3.4vw, 52px);
  --fb-h2: clamp(22px, 2vw, 30px);
  --fb-body: 15px;
  --fb-small: 12.5px;
  --fb-xsmall: 11px;
}

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

body.fb-reset {
  margin: 0;
  background: var(--fb-bg);
  color: var(--fb-ink);
  font-family: var(--fb-sans);
  font-size: var(--fb-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "palt" 1;
}

.fb-mono { font-family: var(--fb-mono); letter-spacing: 0.02em; }
.fb-serif { font-family: var(--fb-serif); font-weight: 400; }
.fb-sans { font-family: var(--fb-sans); }

.fb-label {
  font-family: var(--fb-mono);
  font-size: var(--fb-xsmall);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fb-ink-3);
}

.fb-rule { height: 1px; background: var(--fb-line); width: 100%; }
.fb-vrule { width: 1px; background: var(--fb-line); }

/* pattern wrapper: fixed viewport per artboard */
.fb-frame {
  background: var(--fb-bg);
  color: var(--fb-ink);
  font-family: var(--fb-sans);
  overflow: hidden;
  position: relative;
}

/* Shared building blocks */
.fb-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.fb-logo {
  font-family: var(--fb-serif);
  font-size: 20px;
  letter-spacing: 0.02em;
}
.fb-nav-links {
  display: flex;
  gap: 28px;
  align-items: center;
  font-size: 13.5px;
  color: var(--fb-ink-2);
}
.fb-nav-links a { color: inherit; text-decoration: none; }
.fb-nav-links a:hover { color: var(--fb-ink); }

.fb-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  color: var(--fb-ink);
  text-decoration: none;
  border: 1px solid var(--fb-line-2);
  padding: 9px 16px;
  border-radius: 0;
  transition: border-color .2s, color .2s, background .2s;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
}
.fb-cta:hover { border-color: var(--fb-ink); }
.fb-cta-ghost {
  border: none;
  padding: 0;
  color: var(--fb-ink-2);
  gap: 8px;
}
.fb-cta-ghost:hover { color: var(--fb-ink); }
.fb-arrow {
  display: inline-block;
  width: 14px; height: 1px; background: currentColor; position: relative;
  transition: width .2s;
}
.fb-arrow::after {
  content: ""; position: absolute; right: 0; top: -3px;
  width: 7px; height: 7px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: rotate(45deg);
}
.fb-cta:hover .fb-arrow { width: 20px; }

/* Tiny biz-card thumbnail vocabulary — used across patterns so they
   feel related. Each thumb is pure CSS/HTML (no bitmaps). */
.fb-thumb {
  background: var(--fb-bg-2);
  border: 1px solid var(--fb-line);
  position: relative;
  overflow: hidden;
  font-family: var(--fb-mono);
  font-size: 10px;
  color: var(--fb-ink-3);
}

/* Hairline scanline — whisper of technicality */
.fb-scan {
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0 3px,
    oklch(0.88 0.006 80 / .35) 3px 4px
  );
}

/* Hero serif treatment */
.fb-hero-copy {
  font-family: var(--fb-serif);
  font-weight: 400;
  line-height: 1.22;
  letter-spacing: 0.01em;
}

/* Text balance */
.fb-balance { text-wrap: pretty; }
.fb-tight { text-wrap: balance; }