/* =========================================================
   DESIGN SYSTEM — Palm Mind
   White surfaces, Palm Mind blue (#0071DB) as the single accent.
   Every colour in the app resolves to one of these; nothing below
   this file should hardcode a hex.
========================================================= */

:root {
    --bg: #f7fafd;
    --surface: #ffffff;
    --surface-soft: #f4f9ff;
    --surface-hover: #e9f2fe;
    --surface-glass: rgba(255, 255, 255, .74);
    --glass-border: rgba(255, 255, 255, .6);

    --text: #0d1b2a;
    --text-2: #4a5b6e;
    --text-3: #64748b;

    --border: #e3edf8;
    --border-strong: #c7dcf2;

    --instagram: #C13584;
    --facebook: #1877F2;
    --primary: #0071db;
    --primary-2: #3d8ce0;
    --primary-dark: #0059ad;
    --primary-soft: #cfe4fb;
    --primary-soft-2: #eef6ff;
    --primary-gradient: linear-gradient(135deg, #0071db 0%, #3d8ce0 55%, #4e9cff 100%);
    --identity-gradient: linear-gradient(120deg, #f4f9ff 0%, #dcebfd 100%);

    /* A calmer, lighter blue reserved for "your own message" bubbles — kept
       out of the brand gradient family so it doesn't read as the same blue
       as the agent's avatar/console. */
    --user-bubble: #3a6ea5;

    /* The Palm Mind app mark, reused as a masked watermark across the app —
       one source of truth so the asset path only has to change in one place. */
    --emblem-mask-image: url("../../assets/palmmind-mark.svg");

    /* Pali, the automation assistant. Full-colour, used where the product
       introduces itself: orientation, login, empty states. Swap this one
       line to change the mascot everywhere. */
    --mascot-image: url("../../assets/palmmind-mascot.svg");

    --success: #12855f;
    --success-soft: #e6f6f0;

    --warning: #9a6b05;
    --warning-soft: #fdf1d7;

    --danger: #cf3b3b;
    --danger-soft: #fceded;

    --purple: #1b3a5c;
    --purple-soft: #e6eef7;

    --sidebar: 248px;
    --topbar: 68px;

    --radius-sm: 7px;
    --radius-md: 10px;
    --radius-lg: 14px;

    /* Every backdrop behind a modal, drawer or overlay — dark enough that the
       page behind clearly reads as out of reach. */
    --overlay: rgba(9, 25, 43, .68);

    --shadow-sm: 0 1px 2px rgba(13, 27, 42, .05);
    --shadow-md: 0 8px 24px rgba(13, 27, 42, .10);

    --transition: 160ms ease;
}