/* Design tokens. Dark mode is the same token set with different values. */
:root {
    --bg: #f6f7f9;
    --surface: #ffffff;
    --surface-secondary: #f1f3f5;
    --surface-raised: #ffffff;

    --text: #17191c;
    --text-muted: #6c727f;
    --text-inverse: #ffffff;

    --border: #e2e5e9;
    --border-strong: #cfd4da;

    --primary: #5b5bf5;
    --primary-hover: #4a46e0;
    --primary-text: #ffffff;

    --accent: #5b5bf5;
    --accent-soft: rgba(91, 91, 245, .1);

    /* Bacolink brand */
    --brand: #6d5bf8;
    --brand-strong: #5b46e8;
    --brand-magenta: #b14ad6;
    --brand-gradient: linear-gradient(135deg, #7b5cf6 0%, #5b5bf5 55%, #4f46e5 100%);
    --brand-word: #14172b;
    --brand-soft: rgba(109, 91, 248, .1);
    --annotation: #4f46e5;

    --page-bg: #f4f3fb;
    --page-bg-2: #ece9fa;
    --blob-1: rgba(151, 122, 255, .28);
    --blob-2: rgba(120, 150, 255, .22);
    --blob-3: rgba(206, 140, 240, .18);

    --link-value: #2563eb;
    --success-bg: #eefaf3;

    --success: #1f9d68;
    --success-soft: rgba(31, 157, 104, .12);
    --warning: #d7901e;
    --warning-soft: rgba(215, 144, 30, .14);
    --danger: #d64545;
    --danger-soft: rgba(214, 69, 69, .12);

    --focus: #5b5bf5;

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-pill: 999px;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .04);
    --shadow-md: 0 6px 20px rgba(0, 0, 0, .06);
    --shadow-lg: 0 24px 60px rgba(0, 0, 0, .18);

    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;

    --sidebar-width: 264px;
    --topbar-height: 68px;
    --content-max: 1320px;
    --chain-max-height: 450px;

    --transition: 160ms ease;
}

[data-theme="dark"] {
    --bg: #0f1115;
    --surface: #161a20;
    --surface-secondary: #1d222a;
    --surface-raised: #1b2027;

    --text: #eef1f5;
    --text-muted: #9aa3b0;
    --text-inverse: #11131a;

    --border: #262c35;
    --border-strong: #343c48;

    --primary: #7b6cff;
    --primary-hover: #8f82ff;
    --primary-text: #ffffff;

    --accent: #9b8cff;
    --accent-soft: rgba(155, 140, 255, .16);

    /* Bacolink brand */
    --brand: #9b8cff;
    --brand-strong: #7b6cff;
    --brand-magenta: #c877ea;
    --brand-gradient: linear-gradient(135deg, #a77dff 0%, #7b6cff 55%, #6366f1 100%);
    --brand-word: #f3f4ff;
    --brand-soft: rgba(155, 140, 255, .14);
    --annotation: #b3a6ff;

    --page-bg: #0f1118;
    --page-bg-2: #151426;
    --blob-1: rgba(123, 108, 255, .22);
    --blob-2: rgba(80, 110, 220, .18);
    --blob-3: rgba(176, 96, 220, .16);

    --link-value: #8ab4ff;
    --success-bg: rgba(63, 196, 139, .12);

    --success: #3fc48b;
    --success-soft: rgba(63, 196, 139, .16);
    --warning: #e7ae4d;
    --warning-soft: rgba(231, 174, 77, .16);
    --danger: #ef6b6b;
    --danger-soft: rgba(239, 107, 107, .16);

    --focus: #9b8cff;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, .4);
    --shadow-lg: 0 24px 60px rgba(0, 0, 0, .55);
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --transition: 0ms;
    }

    * {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
}