/* ════════════════════════════════════════════════════════════
   KATOMU — Design System Tokens
   ════════════════════════════════════════════════════════════ */
:root {
    /* Accent palette — per-tab */
    --c-basic: #3AAE7A;
    --c-flirt: #E85D75;
    --c-rp: #7A5AF8;

    /* Shared accent (used by default for generic accent) */
    --accent-color: var(--c-basic);
    /* Gradient end for accent buttons — overridden by JS on tab switch */
    --accent-gradient-end: #2a8f60;

    /* Layout */
    --max-w: 600px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-pill: 999px;

    /* Typography */
    --font: 'Manrope', sans-serif;
    --fs-xs: 11px;
    --fs-sm: 13px;
    --fs-base: 15px;
    --fs-lg: 16px;
    --fs-xl: 18px;

    /* Timing */
    --ease: cubic-bezier(0.4, 0, 0.2, 1);
    --duration: 0.2s;

    /* Shadows */
    --shadow-md: 0 3px 12px rgba(0, 0, 0, 0.14);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.22);
}

/* Dark theme tokens — neutral dark-grey palette */
body.dark {
    color-scheme: dark;
    --bg: #111418;
    --surface: #13151a;
    --surface-2: #1a1c23;
    --surface-3: #1e2128;
    --text: #f0f0f3;
    --text-2: #9ca3af;
    --text-3: #6b7280;
    --border: rgba(255, 255, 255, 0.06);
    --border-2: rgba(255, 255, 255, 0.1);
    --overlay: rgba(0, 0, 0, 0.7);

    /* Message bubble styling — adapted to neutral dark palette */
    --outgoing-bg: color-mix(in srgb, var(--accent-color) 28%, #13151a);
    --outgoing-color: #f0f0f3;
    --incoming-bg: #1c1f26;
    --incoming-color: #e8edf2;
    --incoming-border: rgba(255, 255, 255, 0.08);
}


/* Light theme tokens */
body.light {
    color-scheme: light;
    --bg: #e7ebf0;
    --surface: #ffffff;
    --surface-2: #f1f5f9;
    --surface-3: #e2e8f0;
    --text: #000000;
    --text-2: #707579;
    --text-3: #999999;
    --border: rgba(0, 0, 0, 0.05);
    --border-2: rgba(0, 0, 0, 0.08);
    --overlay: rgba(0, 0, 0, 0.55);

    /* Message bubble styling — outgoing uses dark accent bubble (Telegram-style) */
    --outgoing-bg: color-mix(in srgb, var(--accent-color) 30%, #1a2636);
    --outgoing-color: #f0f4f8;
    --incoming-bg: #ffffff;
    --incoming-color: #1a1a1a;
    --incoming-border: rgba(0, 0, 0, 0.09);
}