/* HiBiKi — Resonance Operating System
   Tokens & base styles
   ─────────────────────────────────── */

:root {
  /* Neutrals (cool, very pale) */
  --hb-bg-0: #fafbfd;
  --hb-bg-1: #f3f5fb;
  --hb-bg-2: #eef1f8;
  --hb-ink-0: #1a2238;       /* deep navy ink */
  --hb-ink-1: #2c3654;
  --hb-ink-2: #5a6486;
  --hb-ink-3: #8a93b4;
  --hb-ink-4: #c0c6dc;
  --hb-line:  rgba(26, 34, 56, 0.08);
  --hb-line-strong: rgba(26, 34, 56, 0.16);

  /* Accents — same chroma family, hue varies */
  --hb-blue:    oklch(0.82 0.06 240);
  --hb-blue-2:  oklch(0.72 0.08 240);
  --hb-blue-3:  oklch(0.55 0.10 240);
  --hb-lavender:    oklch(0.82 0.06 295);
  --hb-lavender-2:  oklch(0.72 0.08 295);
  --hb-lavender-3:  oklch(0.55 0.10 295);
  --hb-mint:    oklch(0.84 0.05 175);
  --hb-mint-2:  oklch(0.72 0.07 175);
  --hb-gold:    oklch(0.86 0.05 85);
  --hb-gold-2:  oklch(0.78 0.07 85);
  --hb-gold-3:  oklch(0.60 0.08 75);

  /* AWAI — stronger, vivid accents (Ternary protocol & MOLT WORLD) */
  --awai-plus:  oklch(0.62 0.16 245);   /* +1 進める Connect — vivid blue */
  --awai-zero:  oklch(0.70 0.14 85);    /*  0 観測・調律 — luminous gold */
  --awai-minus: oklch(0.66 0.12 165);   /* −1 手放す Release — clear teal/mint */
  --awai-rose:  oklch(0.62 0.18 25);    /* binary tension — rose */
  --awai-violet: oklch(0.58 0.16 305);  /* harmony violet */
  --awai-aurora-1: oklch(0.78 0.14 220);
  --awai-aurora-2: oklch(0.74 0.14 290);
  --awai-aurora-3: oklch(0.80 0.12 95);

  /* Observation Depth Layers — 0 → 4 (sensory → integration) */
  --awai-l0: oklch(0.62 0.16 305);   /* L0 sensory — violet */
  --awai-l1: oklch(0.62 0.14 245);   /* L1 awareness — blue */
  --awai-l2: oklch(0.65 0.13 165);   /* L2 structure — teal/mint */
  --awai-l3: oklch(0.68 0.13 95);    /* L3 application — gold */
  --awai-l4: oklch(0.62 0.18 25);    /* L4 integration — rose */

  /* Glass */
  --hb-glass-1: rgba(255, 255, 255, 0.62);
  --hb-glass-2: rgba(255, 255, 255, 0.42);
  --hb-glass-edge: rgba(255, 255, 255, 0.85);
  --hb-glass-edge-inner: rgba(255, 255, 255, 0.35);
  --hb-shadow-soft: 0 1px 1px rgba(26, 34, 56, 0.04),
                    0 8px 28px rgba(26, 34, 56, 0.06),
                    0 24px 60px rgba(26, 34, 56, 0.05);
  --hb-shadow-card: 0 1px 2px rgba(26, 34, 56, 0.05),
                    0 12px 36px rgba(26, 34, 56, 0.08);

  /* Type */
  --hb-font-serif: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --hb-font-sans:  "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --hb-font-mono:  "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --hb-font-en:    "Inter", "Helvetica Neue", system-ui, sans-serif;

  /* Radii — squared, just lightly softened */
  --hb-r-xs: 4px;
  --hb-r-sm: 6px;
  --hb-r-md: 10px;
  --hb-r-lg: 14px;
}

/* ── base ──────────────────────────────────────────── */
.hb {
  font-family: var(--hb-font-sans);
  color: var(--hb-ink-0);
  background: var(--hb-bg-0);
  font-feature-settings: "palt" 1;
  letter-spacing: 0.01em;
  line-height: 1.6;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
}
.hb *,
.hb *::before,
.hb *::after { box-sizing: border-box; }

.hb-serif    { font-family: var(--hb-font-serif); font-weight: 400; letter-spacing: 0.04em; }
.hb-en       { font-family: var(--hb-font-en); letter-spacing: 0.18em; text-transform: uppercase; }
.hb-mono     { font-family: var(--hb-font-mono); }

.hb-eyebrow {
  font-family: var(--hb-font-en);
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--hb-ink-2);
}

/* ── ambient atmospheric background ────────────────── */
.hb-atmosphere {
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    radial-gradient(60% 50% at 18% 22%, rgba(186, 204, 240, 0.55), transparent 70%),
    radial-gradient(48% 42% at 88% 18%, rgba(214, 200, 240, 0.50), transparent 72%),
    radial-gradient(70% 50% at 50% 110%, rgba(232, 220, 188, 0.42), transparent 70%),
    radial-gradient(40% 40% at 80% 80%, rgba(196, 220, 232, 0.40), transparent 70%);
  filter: saturate(1.05);
}
.hb-grain {
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: 0.35;
  mix-blend-mode: multiply;
  background-image:
    linear-gradient(rgba(26,34,56,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(26,34,56,0.025) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: radial-gradient(70% 70% at 50% 50%, #000 60%, transparent 100%);
}

/* ── glass primitives ──────────────────────────────── */
.hb-glass {
  background: linear-gradient(180deg, var(--hb-glass-1), var(--hb-glass-2));
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
  backdrop-filter: blur(18px) saturate(1.15);
  border: 1px solid var(--hb-glass-edge);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.9),
    inset 0 -1px 0 rgba(255,255,255,0.4),
    var(--hb-shadow-card);
  border-radius: var(--hb-r-md);
}
.hb-glass-flat {
  background: rgba(255,255,255,0.55);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid var(--hb-line);
  border-radius: var(--hb-r-md);
}

/* hairline divider */
.hb-hairline {
  height: 1px; width: 100%;
  background: linear-gradient(90deg, transparent, var(--hb-line-strong), transparent);
}

/* tiny dot */
.hb-dot { width: 4px; height: 4px; border-radius: 50%; background: currentColor; display: inline-block; }

/* keyboard tag */
.hb-tag {
  display: inline-flex; align-items: center; gap: 6px;
  height: 22px; padding: 0 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.7);
  border: 1px solid var(--hb-line);
  font-family: var(--hb-font-en);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--hb-ink-2);
}

.hb-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 48px; padding: 0 22px;
  border-radius: 999px;
  background: linear-gradient(180deg, #1a2238, #0f1528);
  color: #f5f7ff;
  font-family: var(--hb-font-sans);
  font-size: 13px; font-weight: 500; letter-spacing: 0.16em;
  border: 1px solid rgba(255,255,255,0.15);
  box-shadow: 0 6px 20px rgba(26,34,56,0.18), inset 0 1px 0 rgba(255,255,255,0.2);
  cursor: pointer;
}
.hb-cta-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 48px; padding: 0 22px;
  border-radius: 999px;
  background: rgba(255,255,255,0.7);
  color: var(--hb-ink-0);
  font-size: 13px; font-weight: 500; letter-spacing: 0.16em;
  border: 1px solid var(--hb-line-strong);
  cursor: pointer;
}

/* nav */
.hb-nav-link {
  font-family: var(--hb-font-sans);
  font-size: 12px;
  color: var(--hb-ink-1);
  letter-spacing: 0.08em;
  cursor: pointer;
}
.hb-nav-link:hover { color: var(--hb-ink-0); }

/* breadcrumb */
.hb-crumb-bar {
  border-bottom: 1px solid rgba(26,34,56,0.05);
  background: rgba(250,251,253,0.6);
  backdrop-filter: blur(8px);
}
.hb-crumb-inner {
  max-width: 1340px; margin: 0 auto;
  padding: 10px 60px;
  display: flex; align-items: center; gap: 10px;
  font-family: var(--hb-font-sans);
  font-size: 11px; letter-spacing: 0.08em;
  color: var(--hb-ink-2);
  overflow-x: auto; white-space: nowrap;
}
.hb-crumb-inner a { color: var(--hb-ink-2); text-decoration: none; transition: color 0.2s; }
.hb-crumb-inner a:hover { color: var(--hb-gold-3); }
.hb-crumb-sep {
  display: inline-block; width: 4px; height: 4px;
  background: var(--hb-line-strong); transform: rotate(45deg);
  opacity: 0.5;
}
.hb-crumb-cur { color: var(--hb-ink-0); font-weight: 500; }
.hb-crumb-en {
  font-family: var(--hb-font-en);
  font-size: 9px; letter-spacing: 0.32em;
  color: var(--hb-gold-3); text-transform: uppercase;
  margin-right: 14px;
  padding-right: 14px;
  border-right: 1px solid rgba(186,160,80,0.25);
}

/* ── geometric SVG accents (sacred geometry, very subtle) ── */
.hb-sigil { stroke: var(--hb-ink-3); stroke-width: 0.6; fill: none; opacity: 0.5; }