/* ============================================================
   AI-ANCHOR: CSS_BRAND_TOKENS
   ⛔ GENERATED FILE — JANGAN DIEDIT MANUAL.
   Sumber: brand/brand.json  ·  Regenerasi: node brand/build-brand.js
   Brand: AIBIO · concept: Aggregator Automatic Blockchain with AI agent · Obsidian + Electric Mint
   ============================================================ */
:root {
	/* --- color --- */
	--brand: #4D7EFF;
	--brand2: #C8D8FF;
	--bg: #000000;
	--panel: #0A0A0A;
	--card: #0D0D0D;
	--card2: #171717;
	--line: #2A2A2A;
	--line2: #3A3A3A;
	--txt: #E8F2EE;
	--mut: #9AA7A1; /* TASK-065 (owner #95): #7A8A84 → #9AA7A1 (hue sama, OKLCH L naik) — ≥ 6:1 di semua kartu gelap/biru. Generator brand/build-brand.js tidak ada lagi → edit di sini. */
	--on-brand: #000000;
	--good: #C8D8FF;
	--bad: #FF5A6A;
	--warn: #C8D8FF;
	--info: #4D7EFF;
	/* --- color as r,g,b (untuk rgba(var(--x-rgb), .22)) --- */
	--brand-rgb: 77, 126, 255;
	--brand2-rgb: 200, 216, 255;
	--bg-rgb: 0, 0, 0;
	--panel-rgb: 10, 10, 10;
	--card-rgb: 13, 13, 13;
	--card2-rgb: 23, 23, 23;
	--line-rgb: 42, 42, 42;
	--line2-rgb: 58, 58, 58;
	--txt-rgb: 232, 242, 238;
	--mut-rgb: 154, 167, 161;
	--on-brand-rgb: 0, 0, 0;
	--good-rgb: 200, 216, 255;
	--bad-rgb: 255, 90, 106;
	--warn-rgb: 200, 216, 255;
	--info-rgb: 77, 126, 255;
	/* --- typography --- */
	--font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
	--font-title: 'Bakbak One', cursive;
	--font-data: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	--font-size: 15px;
	--line-height: 1.55;
	/* --- radius --- */
	--radius-lg: 4px;
	--radius-md: 4px;
	--radius-sm: 2px;
	--radius-pill: 4px;
	/* --- spacing --- */
	--gap: clamp(14px, 1.6vw, 22px);
	--section-gap: clamp(52px, 6vw, 76px);
	--pad: clamp(16px, 2vw, 22px);
	/* --- layout --- */
	--max-w: 1180px;
	--app-max-w: 1300px;
	--rail: 250px;
	--touch: 44px;
	--btn-h: 42px;
	--btn-h-mobile: 44px;
	--btn-h-big: 54px;
	/* --- shadow --- */
	--shadow-card: 0 16px 42px rgba(0,0,0,.38);
	--shadow-soft: 0 18px 44px rgba(0,0,0,.55);
	--shadow-glow: 0 0 0 1px rgba(var(--brand-rgb), .35), 0 10px 26px rgba(var(--brand-rgb), .18);
	/* --- motion --- */
	--motion-fast: 140ms;
	--motion-base: 220ms;
	--motion-slow: 420ms;
	--motion-ease: cubic-bezier(.22,.61,.36,1);
	/* --- surface recipes --- */
	--surface-card-bg: linear-gradient(155deg, rgba(23,23,23,.96), rgba(10,10,10,.98));
	--surface-btn-primary: linear-gradient(135deg, var(--brand2), var(--brand));
	--surface-btn-secondary: var(--card2);
	/* --- legacy aliases (CSS lama tetap hidup) --- */
	--acc: var(--brand);
	--acc2: var(--brand2);
	--gold: var(--brand);
	--gold2: var(--brand2);
	--violet: var(--brand);
	--r: var(--radius-lg);
	--r-sm: var(--radius-md);
	--font: var(--font-ui);
	--monofont: var(--font-data);
	--shadow: var(--shadow-soft);
	--glow-acc: var(--shadow-glow);
	--glow: var(--shadow-glow);
	--landing-max: var(--max-w);
	--landing-gap: var(--gap);
	--landing-section-gap: var(--section-gap);
	--landing-radius: var(--radius-lg);
	--landing-pad: var(--pad);
}

/* AI-ANCHOR: CSS_BRAND_PRIMITIVES — komponen dasar yang otomatis ikut brand.json */
html { color-scheme: dark; }
body { background: var(--bg); color: var(--txt); font-family: var(--font-ui); font-size: var(--font-size); line-height: var(--line-height); }
.u-data, .mono, .num { font-family: var(--font-data); font-variant-numeric: tabular-nums; }
.ui-surface { border: 0; border-radius: var(--radius-lg); color: var(--txt); background: var(--surface-card-bg); box-shadow: var(--shadow-card), inset 0 1px rgba(var(--brand2-rgb), .025); }
.ui-btn { min-height: var(--btn-h); border-radius: var(--radius-md); font-family: var(--font-ui); font-weight: 600; cursor: pointer; transition: transform var(--motion-fast) var(--motion-ease), box-shadow var(--motion-fast) var(--motion-ease); }
.ui-btn-primary { background: var(--surface-btn-primary); color: var(--on-brand); border: 0; }
.ui-btn-secondary { background: var(--surface-btn-secondary); color: var(--brand2); border: 1px solid var(--line2); }
.ui-btn:focus-visible, a:focus-visible, button:focus-visible { outline: 2px solid var(--brand2); outline-offset: 3px; }
@media (max-width: 640px) { .ui-btn { min-height: var(--btn-h-mobile); } }
.ui-btn.big { min-height: var(--btn-h-big); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }