/* ============================================================
   VOICEDESK — DESIGN TOKENS
   One source of truth. Every screen consumes these variables.
   ============================================================ */
:root{
    /* surfaces */
    --bg:            #FCFCFD;
    --surface:       #FFFFFF;
    --surface-2:     #F7F8FA;
    --surface-3:     #F1F2F6;

    /* ink */
    --text:          #09090B;
    --muted:         #6B7280;
    --muted-2:       #9CA1AE;

    /* lines */
    --border:        rgba(9,9,11,.07);
    --border-strong: rgba(9,9,11,.14);

    /* brand + semantic */
    --primary:       #6C4EFF;
    --primary-2:     #8B7BFF;
    --primary-soft:  rgba(108,78,255,.08);
    --primary-ring:  rgba(108,78,255,.28);
    --success:       #0E9F6E;
    --success-soft:  rgba(14,159,110,.10);
    --danger:        #E5484D;
    --danger-soft:   rgba(229,72,77,.09);
    --warning:       #D97706;
    --warning-soft:  rgba(217,119,6,.10);
    --info:          #0E7490;
    --info-soft:     rgba(14,116,144,.10);

    /* geometry */
    --radius-sm:     10px;
    --radius:        14px;
    --radius-lg:     20px;
    --radius-xl:     28px;

    /* elevation */
    --shadow-sm:     0 1px 3px rgba(9,9,11,.05), 0 1px 2px rgba(9,9,11,.03);
    --shadow:        0 10px 30px -12px rgba(9,9,11,.10), 0 2px 8px rgba(9,9,11,.04);
    --shadow-lg:     0 34px 80px -28px rgba(9,9,11,.16), 0 4px 16px rgba(9,9,11,.04);
    --shadow-pop:    0 24px 60px -18px rgba(9,9,11,.22);

    /* motion */
    --ease:          cubic-bezier(.16,1,.3,1);
    --ease-io:       cubic-bezier(.65,0,.35,1);
    --t-fast:        .18s var(--ease);
    --t:             .35s var(--ease);
    --t-slow:        .7s var(--ease);

    /* type */
    --font-display:  'Inter Tight', system-ui, sans-serif;
    --font-body:     'Inter', system-ui, sans-serif;
    --font-mono:     'JetBrains Mono', ui-monospace, monospace;
    --font-serif:    'Instrument Serif', Georgia, serif;

    /* layout */
    --sidebar-w:     248px;
    --sidebar-w-min: 76px;
    --topbar-h:      68px;
    --content-max:   1120px;
}