/* =====================================================================
   Notion Chat — Design tokens (strictly mirrors design.md)
   ===================================================================== */
:root {
    /* ---- Brand & accent ---- */
    --color-primary:         #0075de; /* Notion Blue — single structural accent */
    --color-primary-active:  #005bab; /* Pressed Blue */
    --color-secondary:       #213183; /* Deep Indigo "night" band */
    --color-on-primary:      #ffffff;

    /* ---- Decorative sticker palette (illustration / dots only) ---- */
    --accent-sky:           #62aef0;
    --accent-purple:        #d6b6f6;
    --accent-purple-deep:   #391c57;
    --accent-pink:          #ff64c8;
    --accent-orange:        #dd5b00;
    --accent-orange-deep:   #793400;
    --accent-teal:          #2a9d99;
    --accent-green:         #1aae39;
    --accent-brown:         #523410;

    /* ---- Surface ---- */
    --color-canvas:         #ffffff; /* White cards / panels */
    --color-canvas-soft:    #f6f5f4; /* Warm paper canvas */
    --color-surface:        #ffffff;
    --color-hairline:       #e6e6e6;

    /* ---- Text ---- */
    --color-ink:            rgba(0,0,0,0.95); /* soft true-black */
    --color-ink-secondary:  #31302e; /* warm charcoal */
    --color-ink-muted:      #615d59; /* stone */
    --color-ink-faint:      #a39e98; /* ash */

    /* ---- Typography ---- */
    --font-sans: NotionInter, Inter, -apple-system, BlinkMacSystemFont,
                 system-ui, "Segoe UI", Helvetica, Arial, sans-serif;

    --fs-display-1: 64px;   --lh-display-1: 1.0;   --ls-display-1: -2.125px;
    --fs-display-2: 54px;   --lh-display-2: 1.04;  --ls-display-2: -1.875px;
    --fs-heading-1: 40px;   --lh-heading-1: 1.1;   --ls-heading-1: -1px;
    --fs-heading-2: 26px;   --lh-heading-2: 1.23;  --ls-heading-2: -0.625px;
    --fs-heading-3: 22px;   --lh-heading-3: 1.27;  --ls-heading-3: -0.25px;
    --fs-title:     20px;   --lh-title:     1.4;   --ls-title:     -0.125px;
    --fs-body-md:   16px;   --lh-body-md:   1.5;
    --fs-body-sm:   15px;   --lh-body-sm:   1.33;
    --fs-button:    16px;   --lh-button:    1.5;
    --fs-caption:   14px;   --lh-caption:   1.43;
    --fs-eyebrow:   12px;   --lh-eyebrow:   1.33;  --ls-eyebrow: 0.125px;

    /* ---- Spacing ---- */
    --space-xxs: 4px;
    --space-xs:  8px;
    --space-sm:  12px;
    --space-md:  16px;
    --space-lg:  24px;
    --space-xl:  28px;
    --space-xxl: 32px;

    /* ---- Radius ---- */
    --radius-xs:   4px;
    --radius-sm:   5px;
    --radius-md:   8px;
    --radius-lg:   12px;
    --radius-xl:   16px;
    --radius-full: 9999px;

    /* ---- Elevation ---- */
    --shadow-1:
        rgba(0,0,0,0.01) 0 0.175px 1.041px,
        rgba(0,0,0,0.02) 0 0 0.8px 2.925px,
        rgba(0,0,0,0.027) 0 2.025px 7.847px,
        rgba(0,0,0,0.04) 0 4px 18px;
    --shadow-2:
        rgba(0,0,0,0.01) 0 0.175px 1.041px,
        rgba(0,0,0,0.02) 0 0 0.8px 2.925px,
        rgba(0,0,0,0.03) 0 2.025px 7.847px,
        rgba(0,0,0,0.05) 0 23px 52px;

    /* ---- Layout ---- */
    --container-max: 1280px;
    --sidebar-width: 320px;
    --topbar-height: 56px;
}