:root {

/* ═══════════════════════ Colors ═══════════════════════ */

     /* ── Brand ── */
    --color-announcement-light:        #F0E5FF;
    --color-announcement:              #DBC2FF;
    --color-announcement-dark:         #BC8CFF;
    --color-announcement-darker:       #8B3FE8;

    --color-conversation-light:        #DCEEFF;
    --color-conversation:              #B1D9FF;
    --color-conversation-dark:         #62B1FD;
    --color-conversation-darker:       #0F79DB;

    --color-getting-started:           #0057A0;
    --color-getting-started-darker:    #003D7A;

    --color-group-light:               #E8F5E9;
    --color-group:                     #C6F0CD;
    --color-group-dark:                #69DF7D;
    --color-group-darker:              #56B166;

    --color-organization:              #F3E46F;
    --color-organization-dark:         #E3D03B;

    --color-standard-tag:              #E7E7E7;
    --color-standard-tag-dark:         #C5C5C5;
    --color-standard-tag-darker:       #949494;

    --color-message-left:              #DBDEEC;
    --color-message-right:             #EBECF1;

    --color-whats-new:                 #5B3A8A;
    --color-whats-new-darker:          #3D2460;

    /* ── Status ── */
    --color-error:                     #AA3333;
    --color-error-light:               #F0D0D0;
    --color-success:                   #367D3E;

    /* ── Background ── */
    --color-background-primary:        #FFFFFF;
    --color-background-secondary:      #F1F1EE;
    --color-background-tertiary:       #E7E7E7;

    /* ── Border ── */
    --color-border-primary:            #949494;
    --color-border-secondary:          #DBDBDB;

    /* ── Link ── */
    --color-link-primary:              #016ED7;

    /* ── Text ── */
    --color-text-primary:              #000000;
    --color-text-secondary:            #555555;
    --color-text-disabled:             #717680;
    --color-text-label:                #808080;

    /* ── Shadow ── */
    /* TODO (nate) commented out will be applied at a later date */
    --color-shadow-sm:                 #0000001A;
    /*--color-shadow-md:               #00000033;*/
    /*--color-shadow-lg:               #0000004D;*/
    /*--color-shadow-xl:               #00000080;*/
    /*--color-shadow-overlay:          #000000B3;*/

    /* ── Scrollbar ── */
    --scrollbar-size:                  0.25rem;
    --scrollbar-thumb:                 var(--color-border-primary);
    --scrollbar-thumb-active:          var(--color-text-secondary);
    --scrollbar-thumb-hover:           var(--color-text-label);
    --scrollbar-track:                 var(--color-background-secondary);

/* ══════════════════════ Opacity ════════════════════════ */

    --opacity-full:                    1;
    --opacity-muted:                   0.75;
    --opacity-faint:                   0.5;
    --opacity-transparent:             0;

/* ═══════════════════ Radius ════════════════════ */

    /* Unlike spacing and font scales, radius is not perceptually uniform —
       small differences at larger values are nearly invisible. Use the
       nearest value below; do not introduce intermediate values. */

    --radius-xs:                       2px;
    --radius-sm:                       4px;
    --radius-md:                       10px;
    --radius-lg:                       14px;
    --radius-xl:                       16px;
    --radius-2xl:                      20px;
    --radius-full:                     9999px;

/* ══════════════════════ Spacing ═══════════════════════ */

    --space-2xs:                       0.125rem;    /* 2px */
    --space-xs:                        0.25rem;     /* 4px */
    --space-sm:                        0.5rem;      /* 8px */
    --space-md:                        0.75rem;     /* 12px */
    --space-lg:                        1rem;        /* 16px */
    --space-xl:                        1.5rem;      /* 24px */
    --space-2xl:                       2rem;        /* 32px */
    --space-3xl:                       2.5rem;      /* 36px */
    --space-4xl:                       3rem;        /* 40px */

/* ═════════════════════ Typography ═════════════════════ */

    /* All family, sizes, weights, and line heights based on Nunito standards */

    --font-family-base:                'Nunito', 'Arial', sans-serif;

    --font-size-3xs:                   0.5rem;      /* 8px */
    --font-size-2xs:                   0.625rem;    /* 10px */
    --font-size-xs:                    0.75rem;     /* 12px */
    --font-size-sm:                    0.875rem;    /* 14px */
    --font-size-base:                  1rem;        /* 16px */
    --font-size-lg:                    1.125rem;    /* 18px */
    --font-size-xl:                    1.25rem;     /* 20px */
    --font-size-2xl:                   1.5rem;      /* 24px */
    --font-size-3xl:                   1.75rem;     /* 28px */
    --font-size-4xl:                   2rem;        /* 32px */
    --font-size-5xl:                   2.25rem;     /* 36px */
    --font-size-6xl:                   2.5rem;      /* 40px */

    --font-weight-light:               300;
    --font-weight-regular:             400;
    --font-weight-medium:              500;
    --font-weight-semi-bold:           600;
    --font-weight-bold:                700;
    --font-weight-extra-bold:          800;

    /* Standard unitless line height scale — multipliers scale with element font size */
    --line-height-tight:               1.25;
    --line-height-base:                1.5;
    /*--line-height-relaxed:           1.75;*/

}